chart

v1.9.0

v1.7.0

v1.6.1

v1.4.0

STATUS

Passing

DOWNLOADS

VISIBILITY

Public

PUBLISHED

2 weeks ago

SIZE

137 KB

The Chart components are based on Charts.js an open source HTML5 based charting library. You can learn more about it here:

1 contributor

Use chart in your project ?

Copied

npm i @bit/nexxtway.react-rainbow.chart

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.dev

Component Example

React

Vue

Angular

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

modifieddraft

Chart basic:

import React from 'react';
import { Chart, Dataset } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCog, faEllipsisV } from '@fortawesome/free-solid-svg-icons';

const containerStyles = {
    maxWidth: 600,
};

<div className="rainbow-p-vertical_medium rainbow-m_auto" style={containerStyles}>
    <div className="rainbow-align-content_center">
        <Chart
            labels={['A', 'B', 'C', 'D']}
            type="line"
            className="rainbow-m-horizontal_xx-large rainbow-m-top_x-large"
        >
            <Dataset
                title="Dataset 1"
                values={[23, 45, 123, 56]}
                backgroundColor="#1de9b6"
                borderColor="#1de9b6"
            />
            <Dataset
                title="Dataset 2"
                values={[66, 100, 30, 156]}
                backgroundColor="#01b6f5"
                borderColor="#01b6f5"
            />
        </Chart>
    </div>
</div>

Bar chart vertical:

import React from 'react';
import { Chart, Dataset, ButtonGroup, Button } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlus, faMinus } from '@fortawesome/free-solid-svg-icons';

const containerStyles = {
    maxWidth: 600,
};

class BarChartExample extends React.Component {
    constructor(props) {
        super(props);
        this.titles = ['Data-Blue', 'Data-Purple', 'Data-Dark'];
        this.colors = ['#01b6f5', '#663398', '#061c3f'];
        this.months = ['July', 'August', 'September', 'October', 'November', 'December'];
        this.state = {
            labels: ['January', 'February', 'March', 'April', 'May', 'June'],
            datasets: [
                {
                    title: 'Data-Red',
                    backgroundColor: '#fe4849',
                    values: [18, 42, 58, 50, 19, undefined],
                },
                {
                    title: 'Data-Orange',
                    backgroundColor: '#ff6837',
                    values: [undefined, 40, undefined, 45, 95, 33],
                },
                {
                    title: 'Data-Yellow',
                    backgroundColor: '#ffcc00',
                    values: [undefined, 30, 80, undefined, 65, 50],
                },
                {
                    title: 'Data-Green',
                    backgroundColor: '#1ad1a3',
                    values: [undefined, 15, undefined, 60, 45, 85],
                },
            ],
        };
    }

    addDataset() {
        const { labels, datasets } = this.state;
        const newValues = labels.map(label => Math.round(Math.random() * 100));
        const newDatasets = datasets.concat({
            title: this.titles.shift(),
            values: newValues,
            backgroundColor: this.colors.shift(),
        });
        this.setState({ datasets: newDatasets });
    }

    removeDataset() {
        const { datasets } = this.state;
        const dataset = datasets[datasets.length - 1];
        this.titles.unshift(dataset.title);
        this.colors.unshift(dataset.backgroundColor);
        const newDatasets = datasets.filter(d => d.title !== dataset.title);
        this.setState({ datasets: newDatasets });
    }

    addMonth() {
        const { labels, datasets } = this.state;
        const newlabels = labels.concat(this.months.shift());
        const newDatasets = datasets.map(dataset => {
            const { values, ...rest } = dataset;
            const newValues = values.concat(Math.round(Math.random() * 100));
            return {
                ...rest,
                values: newValues,
            };
        });
        this.setState({ labels: newlabels, datasets: newDatasets });
    }

    removeMonth() {
        const { labels, datasets } = this.state;
        const label = labels[labels.length - 1];
        this.months.unshift(label);
        const newLabels = labels.filter(l => l !== label);
        const newDatasets = datasets.map(dataset => {
            const { values, ...rest } = dataset;
            const newValues = values.slice(0, values.length - 1);
            return {
                ...rest,
                values: newValues,
            };
        });
        this.setState({ labels: newLabels, datasets: newDatasets });
    }

    renderDatasets() {
        const { datasets } = this.state;
        return datasets.map(({ title, values, backgroundColor }) => (
            <Dataset key={title} title={title} values={values} backgroundColor={backgroundColor} />
        ));
    }

    render() {
        const { labels, datasets } = this.state;

        const noMoreTitles = this.titles.length === 0;
        const noMoreDatasets = datasets.length === 0;
        const noMoreMonths = this.months.length === 0;
        const noMoreLabels = labels.length === 0;

        return (
            <div className="rainbow-p-vertical_large">
                <div className="rainbow-align-content_center rainbow-flex_wrap">
                    <ButtonGroup className="rainbow-m-horizontal_large rainbow-m-vertical_small">
                        <Button onClick={() => this.addDataset()} disabled={noMoreTitles}>
                            <FontAwesomeIcon icon={faPlus} className="rainbow-m-right_x-small" />{' '}
                            Data
                        </Button>
                        <Button onClick={() => this.removeDataset()} disabled={noMoreDatasets}>
                            <FontAwesomeIcon icon={faMinus} className="rainbow-m-right_x-small" />{' '}
                            Data
                        </Button>
                    </ButtonGroup>
                    <ButtonGroup className="rainbow-m-horizontal_large rainbow-m-vertical_small">
                        <Button onClick={() => this.addMonth()} disabled={noMoreMonths}>
                            <FontAwesomeIcon icon={faPlus} className="rainbow-m-right_x-small" />{' '}
                            Month
                        </Button>
                        <Button onClick={() => this.removeMonth()} disabled={noMoreLabels}>
                            <FontAwesomeIcon icon={faMinus} className="rainbow-m-right_x-small" />{' '}
                            Month
                        </Button>
                    </ButtonGroup>
                </div>
                <div
                    style={containerStyles}
                    className="rainbow-align-content_center rainbow-m-vertical_large rainbow-m_auto"
                >
                    <Chart labels={labels} type="bar">
                        {this.renderDatasets()}
                    </Chart>
                </div>
            </div>
        );
    }
}

<BarChartExample />;

Line chart:

import React from 'react';
import { Chart, Dataset, ButtonGroup, Button } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlus, faMinus } from '@fortawesome/free-solid-svg-icons';

const containerStyles = {
    maxWidth: 600,
};

class LineChartExample extends React.Component {
    constructor(props) {
        super(props);
        this.titles = ['Data-Yellow', 'Data-Green', 'Data-Orange', 'Data-Purple', 'Data-Dark'];
        this.colors = ['#ffcc00', '#1ad1a3', '#ff6837', '#663398', '#061c3f'];
        this.months = ['July', 'August', 'September', 'October', 'November', 'December'];
        this.state = {
            labels: ['January', 'February', 'March', 'April', 'May', 'June'],
            datasets: [
                {
                    title: 'Data-Red',
                    borderColor: '#fe4849',
                    values: [37, 15, 90, 57, 80, 14],
                },
                {
                    title: 'Data-Blue',
                    borderColor: '#01b6f5',
                    values: [18, 39, 15, 38, 15, 35],
                },
            ],
        };
    }

    addDataset() {
        const { labels, datasets } = this.state;
        const newValues = labels.map(label => Math.round(Math.random() * 100));
        const newDatasets = datasets.concat({
            title: this.titles.shift(),
            values: newValues,
            borderColor: this.colors.shift(),
        });
        this.setState({ datasets: newDatasets });
    }

    removeDataset() {
        const { datasets } = this.state;
        const dataset = datasets[datasets.length - 1];
        this.titles.unshift(dataset.title);
        this.colors.unshift(dataset.borderColor);
        const newDatasets = datasets.filter(d => d.title !== dataset.title);
        this.setState({ datasets: newDatasets });
    }

    addMonth() {
        const { labels, datasets } = this.state;
        const newlabels = labels.concat(this.months.shift());
        const newDatasets = datasets.map(dataset => {
            const { values, ...rest } = dataset;
            const newValues = values.concat(Math.round(Math.random() * 100));
            return {
                ...rest,
                values: newValues,
            };
        });
        this.setState({ labels: newlabels, datasets: newDatasets });
    }

    removeMonth() {
        const { labels, datasets } = this.state;
        const label = labels[labels.length - 1];
        this.months.unshift(label);
        const newLabels = labels.filter(l => l !== label);
        const newDatasets = datasets.map(dataset => {
            const { values, ...rest } = dataset;
            const newValues = values.slice(0, values.length - 1);
            return {
                ...rest,
                values: newValues,
            };
        });
        this.setState({ labels: newLabels, datasets: newDatasets });
    }

    renderDatasets() {
        const { datasets } = this.state;
        return datasets.map(({ title, values, borderColor }) => (
            <Dataset
                key={title}
                title={title}
                values={values}
                borderColor={borderColor}
                backgroundColor={borderColor}
            />
        ));
    }

    render() {
        const { labels, datasets } = this.state;

        const noMoreTitles = this.titles.length === 0;
        const noMoreDatasets = datasets.length === 0;
        const noMoreMonths = this.months.length === 0;
        const noMoreLabels = labels.length === 0;

        return (
            <div className="rainbow-p-vertical_large rainbow-m-bottom_large">
                <div className="rainbow-align-content_center rainbow-flex_wrap">
                    <ButtonGroup className="rainbow-m-horizontal_large rainbow-m-vertical_small">
                        <Button onClick={() => this.addDataset()} disabled={noMoreTitles}>
                            <FontAwesomeIcon icon={faPlus} className="rainbow-m-right_x-small" />{' '}
                            Data
                        </Button>
                        <Button onClick={() => this.removeDataset()} disabled={noMoreDatasets}>
                            <FontAwesomeIcon icon={faMinus} className="rainbow-m-right_x-small" />{' '}
                            Data
                        </Button>
                    </ButtonGroup>
                    <ButtonGroup className="rainbow-m-horizontal_large rainbow-m-vertical_small">
                        <Button onClick={() => this.addMonth()} disabled={noMoreMonths}>
                            <FontAwesomeIcon icon={faPlus} className="rainbow-m-right_x-small" />{' '}
                            Month
                        </Button>
                        <Button onClick={() => this.removeMonth()} disabled={noMoreLabels}>
                            <FontAwesomeIcon icon={faMinus} className="rainbow-m-right_x-small" />{' '}
                            Month
                        </Button>
                    </ButtonGroup>
                </div>
                <div
                    style={containerStyles}
                    className="rainbow-align-content_center rainbow-m-vertical_large rainbow-m_auto"
                >
                    <Chart labels={labels} type="line">
                        {this.renderDatasets()}
                    </Chart>
                </div>
            </div>
        );
    }
}

<LineChartExample />;

Line chart fill:

import React from 'react';
import { Chart, Dataset, ButtonGroup, Button } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlus, faMinus } from '@fortawesome/free-solid-svg-icons';

const containerStyles = {
    maxWidth: 600,
};

class LineChartExample extends React.Component {
    constructor(props) {
        super(props);
        this.titles = [
            'Data-Red',
            'Data-Yellow',
            'Data-Green',
            'Data-Orange',
            'Data-Purple',
            'Data-Dark',
        ];
        this.colors = ['#fe4849', '#ffcc00', '#1ad1a3', '#ff6837', '#663398', '#061c3f'];
        this.backgrounds = [
            'rgba(254, 72, 73, 0.80)',
            'rgba(255, 204, 0, 0.80)',
            'rgba(26, 209, 163, 0.80)',
            'rgba(255, 104, 55, 0.80)',
            undefined,
            undefined,
        ];
        this.months = ['July', 'August', 'September', 'October', 'November', 'December'];
        this.state = {
            labels: ['January', 'February', 'March', 'April', 'May', 'June'],
            datasets: [
                {
                    title: 'Data-Blue',
                    borderColor: '#01b6f5',
                    backgroundColor: 'rgba(1, 182, 245, 0.80)',
                    values: [37, 18, 90, 56, 80, 14],
                },
            ],
        };
    }

    addDataset() {
        const { labels, datasets } = this.state;
        const newValues = labels.map(label => Math.round(Math.random() * 100));
        const newDatasets = datasets.concat({
            title: this.titles.shift(),
            values: newValues,
            borderColor: this.colors.shift(),
            backgroundColor: this.backgrounds.shift(),
        });
        this.setState({ datasets: newDatasets });
    }

    removeDataset() {
        const { datasets } = this.state;
        if (datasets.length > 0) {
            const dataset = datasets[datasets.length - 1];
            this.titles.unshift(dataset.title);
            this.colors.unshift(dataset.borderColor);
            this.backgrounds.unshift(dataset.backgroundColor);
            const newDatasets = datasets.filter(d => d.title !== dataset.title);
            this.setState({ datasets: newDatasets });
        }
    }

    addMonth() {
        const { labels, datasets } = this.state;
        const newlabels = labels.concat(this.months.shift());
        const newDatasets = datasets.map(dataset => {
            const { values, ...rest } = dataset;
            const newValues = values.concat(Math.round(Math.random() * 100));
            return {
                ...rest,
                values: newValues,
            };
        });
        this.setState({ labels: newlabels, datasets: newDatasets });
    }

    removeMonth() {
        const { labels, datasets } = this.state;
        const label = labels[labels.length - 1];
        this.months.unshift(label);
        const newLabels = labels.filter(l => l !== label);
        const newDatasets = datasets.map(dataset => {
            const { values, ...rest } = dataset;
            const newValues = values.slice(0, values.length - 1);
            return {
                ...rest,
                values: newValues,
            };
        });
        this.setState({ labels: newLabels, datasets: newDatasets });
    }

    renderDatasets() {
        const { datasets } = this.state;
        return datasets.map(({ title, values, borderColor, backgroundColor }) => (
            <Dataset
                key={title}
                title={title}
                values={values}
                borderColor={borderColor}
                backgroundColor={backgroundColor}
                fill
            />
        ));
    }

    render() {
        const { labels, datasets } = this.state;

        const noMoreTitles = this.titles.length === 0;
        const noMoreDatasets = datasets.length === 0;
        const noMoreMonths = this.months.length === 0;
        const noMoreLabels = labels.length === 0;

        return (
            <div className="rainbow-p-vertical_large rainbow-m-bottom_x-large">
                <div className="rainbow-align-content_center rainbow-flex_wrap">
                    <ButtonGroup className="rainbow-m-horizontal_large rainbow-m-vertical_small">
                        <Button onClick={() => this.addDataset()} disabled={noMoreTitles}>
                            <FontAwesomeIcon icon={faPlus} className="rainbow-m-right_x-small" />{' '}
                            Data
                        </Button>
                        <Button onClick={() => this.removeDataset()} disabled={noMoreDatasets}>
                            <FontAwesomeIcon icon={faMinus} className="rainbow-m-right_x-small" />{' '}
                            Data
                        </Button>
                    </ButtonGroup>
                    <ButtonGroup className="rainbow-m-horizontal_large rainbow-m-vertical_small">
                        <Button onClick={() => this.addMonth()} disabled={noMoreMonths}>
                            <FontAwesomeIcon icon={faPlus} className="rainbow-m-right_x-small" />{' '}
                            Month
                        </Button>
                        <Button onClick={() => this.removeMonth()} disabled={noMoreLabels}>
                            <FontAwesomeIcon icon={faMinus} className="rainbow-m-right_x-small" />{' '}
                            Month
                        </Button>
                    </ButtonGroup>
                </div>
                <div
                    style={containerStyles}
                    className="rainbow-align-content_center rainbow-m-vertical_large rainbow-m_auto"
                >
                    <Chart labels={labels} type="line" disableCurves>
                        {this.renderDatasets()}
                    </Chart>
                </div>
            </div>
        );
    }
}

<LineChartExample />;

Pie chart:

import React from 'react';
import { Chart, Dataset, ButtonGroup, Button } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlus, faMinus } from '@fortawesome/free-solid-svg-icons';

const containerStyles = {
    maxWidth: 600,
};

class PieChartExample extends React.Component {
    constructor(props) {
        super(props);
        this.titles = ['Data-Blue', 'Data-Purple', 'Data-Dark'];
        this.colors = ['#01b6f5', '#663398', '#061c3f'];
        this.state = {
            labels: ['Data-Red', 'Data-Orange', 'Data-Yellow', 'Data-Green'],
            dataset: [
                {
                    value: 10,
                    color: '#fe4849',
                },
                {
                    value: 15,
                    color: '#ff6837',
                },
                {
                    value: 42,
                    color: '#ffcc00',
                },
                {
                    value: 33,
                    color: '#1ad1a3',
                },
            ],
        };
    }

    addData() {
        const { labels, dataset } = this.state;
        const newLabels = labels.concat(this.titles.shift());
        const newDataset = dataset.concat({
            value: Math.round(Math.random() * 100),
            color: this.colors.shift(),
        });
        this.setState({ labels: newLabels, dataset: newDataset });
    }

    removeData() {
        const { labels, dataset } = this.state;
        const lastLabel = labels[labels.length - 1];
        this.titles.unshift(lastLabel);
        const newLabels = labels.filter(l => l !== lastLabel);
        const lastData = dataset[dataset.length - 1];
        this.colors.unshift(lastData.color);
        const newDataset = dataset.slice(0, dataset.length - 1);
        this.setState({ labels: newLabels, dataset: newDataset });
    }

    renderDataset() {
        let data = [];
        let colors = [];
        const { dataset } = this.state;
        dataset.forEach(d => {
            data.push(d.value);
            colors.push(d.color);
        });

        return <Dataset title="Data" values={data} backgroundColor={colors} />;
    }

    render() {
        const { labels } = this.state;

        const noMoreTitles = this.titles.length === 0;
        const noMoreLabels = labels.length === 0;

        return (
            <div className="rainbow-p-vertical_xx-large rainbow-p-horizontal_medium">
                <ButtonGroup className="rainbow-align-content_center rainbow-flex_wrap">
                    <Button onClick={() => this.addData()} disabled={noMoreTitles}>
                        <FontAwesomeIcon icon={faPlus} className="rainbow-m-right_x-small" /> Data
                    </Button>
                    <Button onClick={() => this.removeData()} disabled={noMoreLabels}>
                        <FontAwesomeIcon icon={faMinus} className="rainbow-m-right_x-small" /> Data
                    </Button>
                </ButtonGroup>
                <div
                    style={containerStyles}
                    className="rainbow-align-content_center rainbow-m-vertical_large rainbow-m_auto"
                >
                    <Chart labels={labels} type="pie" legendPosition="right" disableCurves>
                        {this.renderDataset()}
                    </Chart>
                </div>
            </div>
        );
    }
}

<PieChartExample />;

Doughnut chart:

import React from 'react';
import { Chart, Dataset, ButtonGroup, Button } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlus, faMinus } from '@fortawesome/free-solid-svg-icons';

const containerStyles = {
    maxWidth: 600,
};

class DoughnutChartExample extends React.Component {
    constructor(props) {
        super(props);
        this.titles = ['Data-Blue', 'Data-Purple', 'Data-Dark'];
        this.colors = ['#01b6f5', '#663398', '#061c3f'];
        this.state = {
            labels: ['Data-Red', 'Data-Orange', 'Data-Yellow', 'Data-Green'],
            dataset: [
                {
                    value: 10,
                    color: '#fe4849',
                },
                {
                    value: 15,
                    color: '#ff6837',
                },
                {
                    value: 42,
                    color: '#ffcc00',
                },
                {
                    value: 33,
                    color: '#1ad1a3',
                },
            ],
        };
    }

    addData() {
        const { labels, dataset } = this.state;
        const newLabels = labels.concat(this.titles.shift());
        const newDataset = dataset.concat({
            value: Math.round(Math.random() * 100),
            color: this.colors.shift(),
        });
        this.setState({ labels: newLabels, dataset: newDataset });
    }

    removeData() {
        const { labels, dataset } = this.state;
        const lastLabel = labels[labels.length - 1];
        this.titles.unshift(lastLabel);
        const newLabels = labels.filter(l => l !== lastLabel);
        const lastData = dataset[dataset.length - 1];
        this.colors.unshift(lastData.color);
        const newDataset = dataset.slice(0, dataset.length - 1);
        this.setState({ labels: newLabels, dataset: newDataset });
    }

    renderDataset() {
        let data = [];
        let colors = [];
        const { dataset } = this.state;
        dataset.forEach(d => {
            data.push(d.value);
            colors.push(d.color);
        });

        return <Dataset title="Data" values={data} backgroundColor={colors} />;
    }

    render() {
        const { labels } = this.state;

        const noMoreTitles = this.titles.length === 0;
        const noMoreLabels = labels.length === 0;

        return (
            <div className="rainbow-p-vertical_xx-large rainbow-p-horizontal_medium">
                <div>
                    <ButtonGroup className="rainbow-m-vertical_large">
                        <Button onClick={() => this.addData()} disabled={noMoreTitles}>
                            <FontAwesomeIcon icon={faPlus} className="rainbow-m-right_x-small" />{' '}
                            Data
                        </Button>
                        <Button onClick={() => this.removeData()} disabled={noMoreLabels}>
                            <FontAwesomeIcon icon={faMinus} className="rainbow-m-right_x-small" />{' '}
                            Data
                        </Button>
                    </ButtonGroup>
                </div>
                <div
                    style={containerStyles}
                    className="rainbow-align-content_center rainbow-m-vertical_large rainbow-m_auto"
                >
                    <Chart labels={labels} type="doughnut" legendPosition="right" disableCurves>
                        {this.renderDataset()}
                    </Chart>
                </div>
            </div>
        );
    }
}

<DoughnutChartExample />;

Properties

Name	Type	Default value	Description
type	`'bar' \| 'horizontalBar' \| 'line' \| 'radar' \| 'pie' \| 'doughnut' \| 'polarArea' \| 'bubble'`	`'bar'`	The type of chart to draw.
labels	`string[]`	`[]`	Defines the names of the sections for the corresponding values.
showStacked	`bool`	`false`	Determines whether to show the stacked bars in a bar chart.
showLegend	`bool`	`true`	Defines if the legend is shown.
legendPosition	`'top' \| 'bottom' \| 'right' \| 'left'`	`'bottom'`	The position of the legend.
disableAnimations	`bool`	`false`	Determines whether it should perform animations when rendering the chart, this would improve general performance and is recommended for high data volumes charts.
disableLines	`bool`	`false`	Determines whether to draw the lines that join the dots in a line chart, is recommended for high data volumes charts.
disableCurves	`bool`	`false`	Determines whether the lines that join the dots in a line chart should be curved or straight.
maintainAspectRatio	`bool`	`true`	Maintain the original canvas aspect ratio.
className	`string`	`undefined`	A CSS class for the outer element, in addition to the component’s base classes.
style	`object`	`undefined`	An object with custom style applied for the outer element.
children	`node`	`undefined`