Skip to main content

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

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

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

Props​