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"
  />,
);