Skip to main content

AreaChart

Array of series objects​

Result
Loading...
Live Editor
const data = [
	{
		name: 'DataSet 1',
		data: [
			{
				id: '1',
				x: 1,
				y: 7,
				name: 'Point1',
			},
			{
				id: '2',
				x: 2,
				y: 4,
				name: 'Point2',
			},
			{
				id: '3',
				x: 3,
				y: 7,
				name: 'Point3',
			},
		],
	},
	{
		name: 'DataSet with a long name',
		data: [
			{
				id: '4',
				x: 1,
				y: 1,
				name: 'Point4',
			},
			{
				id: '5',
				x: 2,
				y: 2,
				name: 'Point5',
			},
			{
				id: '6',
				x: 3,
				y: 3,
				name: 'Point6',
			},
		],
	},
];

render(
	<AreaChart
		id="area-chart-array-of-series-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"
		activeDataId="4"
	/>,
);

Flat array of numerical values​

Result
Loading...
Live Editor
const data = [7, 4, 7];

render(
	<AreaChart
		id="area-chart-array-numerical-values-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"
	/>,
);

Nested arrays of numerical values​

Result
Loading...
Live Editor
const data = [
	[
		[1, 7],
		[2, 4],
		[3, 7],
	],
	[
		[1, 1],
		[2, 2],
		[3, 3],
	],
];

render(
	<AreaChart
		id="area-chart-nested-arrays-numerical-values-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 array of data objects​

Result
Loading...
Live Editor
const data = [
	{
		id: '1',
		x: 1,
		y: 7,
		name: 'Point1',
	},
	{
		id: '2',
		x: 2,
		y: 4,
		name: 'Point2',
	},
	{
		id: '3',
		x: 3,
		y: 7,
		name: 'Point3',
	},
];

render(
	<AreaChart
		id="area-chart-flat-array-data-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"
	/>,
);

Nested array of data objects​

Result
Loading...
Live Editor
const data = [
	[
		{
			id: '1',
			x: 1,
			y: 7,
			name: 'Point1',
		},
		{
			id: '2',
			x: 2,
			y: 4,
			name: 'Point2',
		},
		{
			id: '3',
			x: 3,
			y: 7,
			name: 'Point3',
		},
	],
	[
		{
			id: '4',
			x: 1,
			y: 1,
			name: 'Point4',
		},
		{
			id: '5',
			x: 2,
			y: 2,
			name: 'Point5',
		},
		{
			id: '6',
			x: 3,
			y: 3,
			name: 'Point6',
		},
	],
];

render(
	<AreaChart
		id="area-chart-nested-array-data-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"
	/>,
);

Props​