Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

chart

v1.9.0arrow_drop_down
v1.9.0
v1.7.0
v1.6.1
v1.4.0
STATUS
Passing
DOWNLOADS
17
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
React
Vue
Angular
Add dependency... help_outline
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';
toggle layout
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right
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
NameTypeDefault valueDescription
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
boolfalse

Determines whether to show the stacked bars in a bar chart.

showLegend
booltrue

Defines if the legend is shown.

legendPosition
'top' | 'bottom' | 'right' | 'left''bottom'

The position of the legend.

disableAnimations
boolfalse

Determines whether it should perform animations when rendering the chart, this would improve general performance and is recommended for high data volumes charts.

disableLines
boolfalse

Determines whether to draw the lines that join the dots in a line chart, is recommended for high data volumes charts.

disableCurves
boolfalse

Determines whether the lines that join the dots in a line chart should be curved or straight.

maintainAspectRatio
booltrue

Maintain the original canvas aspect ratio.

className
stringundefined

A CSS class for the outer element, in addition to the component’s base classes.

style
objectundefined

An object with custom style applied for the outer element.

children
nodeundefined