BarChart

Array of series objects

Result

Loading...

Live Editor

const data = [ { name: 'Advanced Plan - Apr 2017 A', data: [ { y: 150000, id: '1', }, { y: 3600000, id: '2', }, { y: 0, id: '3', }, ], }, { name: 'Advanced Plan - Apr 2017 B', data: [ { y: 70000, id: '4', }, { y: 2120000, id: '5', }, { y: 350000, id: '6', }, ], }, ]; render( <BarChart id="bar-chart-array-series-objects-demo" onPointMouseOver={(pointData) => console.log('onPointMouseOver - pointData::', pointData)} onPointMouseOut={(pointData) => console.log('onPointMouseOut - pointData::', pointData)} data={data} title="Title" description="Description" xAxis="X Axis Label" yAxis="Y Axis Label" formatType="number" />, );

const data = [
    {
        name: 'Advanced Plan - Apr 2017 A',
        data: [
            {
                y: 150000,
                id: '1',
            },
            {
                y: 3600000,
                id: '2',
            },
            {
                y: 0,
                id: '3',
            },
        ],
    },
    {
        name: 'Advanced Plan - Apr 2017 B',
        data: [
            {
                y: 70000,
                id: '4',
            },
            {
                y: 2120000,
                id: '5',
            },
            {
                y: 350000,
                id: '6',
            },
        ],
    },
];

render(
    <BarChart
        id="bar-chart-array-series-objects-demo"
        onPointMouseOver={(pointData) => console.log('onPointMouseOver - pointData::', pointData)}
        onPointMouseOut={(pointData) => console.log('onPointMouseOut - pointData::', pointData)}
        data={data}
        title="Title"
        description="Description"
        xAxis="X Axis Label"
        yAxis="Y Axis Label"
        formatType="number"
    />,
);

Flat data

Result

Loading...

Live Editor

const data = [ { name: 'Advanced Plan - Apr 2017 A', data: [150000, 3600000, 0], color: '#075895', }, { name: 'Advanced Plan - Apr 2017 B', data: [70000, 2120000, 350000], color: '#2CCFD1', }, ]; render( <BarChart id="bar-chart-flat-data-demo" onPointMouseOver={(pointData) => console.log('onPointMouseOver - pointData::', pointData)} onPointMouseOut={(pointData) => console.log('onPointMouseOut - pointData::', pointData)} data={data} title="Title" description="Description" xAxis="X Axis Label" yAxis="Y Axis Label" formatType="number" />, );

const data = [
    {
        name: 'Advanced Plan - Apr 2017 A',
        data: [150000, 3600000, 0],
        color: '#075895',
    },
    {
        name: 'Advanced Plan - Apr 2017 B',
        data: [70000, 2120000, 350000],
        color: '#2CCFD1',
    },
];

render(
    <BarChart
        id="bar-chart-flat-data-demo"
        onPointMouseOver={(pointData) => console.log('onPointMouseOver - pointData::', pointData)}
        onPointMouseOut={(pointData) => console.log('onPointMouseOut - pointData::', pointData)}
        data={data}
        title="Title"
        description="Description"
        xAxis="X Axis Label"
        yAxis="Y Axis Label"
        formatType="number"
    />,
);

Stacked bar chart

Result

Loading...

Live Editor

const data = [ { name: 'Account A', data: [ { y: 34000, x: 1, }, { y: 30000, x: 2, }, { y: 15000, x: 3, }, ], }, { name: 'Account B', data: [ { y: 7000, x: 1, }, { y: 14000, x: 2, }, { y: 22000, x: 3, }, ], }, ]; const options = { plotOptions: { series: { stacking: 'normal', }, }, }; render( <BarChart id="bar-chart-stacked-demo" onPointMouseOver={(pointData) => console.log('onPointMouseOver - pointData::', pointData)} onPointMouseOut={(pointData) => console.log('onPointMouseOut - pointData::', pointData)} data={data} options={options} title="Title" description="Description" xAxis="X Axis Label" yAxis="Y Axis Label" formatType="number" />, );

const data = [
    {
        name: 'Account A',
        data: [
            {
                y: 34000,
                x: 1,
            },
            {
                y: 30000,
                x: 2,
            },
            {
                y: 15000,
                x: 3,
            },
        ],
    },
    {
        name: 'Account B',
        data: [
            {
                y: 7000,
                x: 1,
            },
            {
                y: 14000,
                x: 2,
            },
            {
                y: 22000,
                x: 3,
            },
        ],
    },
];

const options = {
    plotOptions: {
        series: {
            stacking: 'normal',
        },
    },
};

render(
    <BarChart
        id="bar-chart-stacked-demo"
        onPointMouseOver={(pointData) => console.log('onPointMouseOver - pointData::', pointData)}
        onPointMouseOut={(pointData) => console.log('onPointMouseOut - pointData::', pointData)}
        data={data}
        options={options}
        title="Title"
        description="Description"
        xAxis="X Axis Label"
        yAxis="Y Axis Label"
        formatType="number"
    />,
);

Props