Skip to main content

AreaRangeChart

Array of series objects​

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

render(
	<AreaRangeChart
		id="area-range-chart-array-of-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"
	/>,
);

Nested arrays of numerical values​

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

render(
	<AreaRangeChart
		id="area-range-chart-nested-arrays-of-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,
		low: 7,
		high: 9,
		name: 'Point1',
	},
	{
		id: '2',
		x: 2,
		low: 4,
		high: 5,
		name: 'Point2',
	},
	{
		id: '3',
		x: 3,
		low: 7,
		high: 8,
		name: 'Point3',
	},
];

render(
	<AreaRangeChart
		id="area-range-chart-flat-array-of-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,
			low: 7,
			high: 9,
			name: 'Point1',
		},
		{
			id: '2',
			x: 2,
			low: 4,
			high: 5,
			name: 'Point2',
		},
		{
			id: '3',
			x: 3,
			low: 7,
			high: 8,
			name: 'Point3',
		},
	],
	[
		{
			id: '4',
			x: 1,
			low: 1,
			high: 4,
			name: 'Point4',
		},
		{
			id: '5',
			x: 2,
			low: 2,
			high: 4,
			name: 'Point5',
		},
		{
			id: '6',
			x: 3,
			low: 3,
			high: 6,
			name: 'Point6',
		},
	],
];

render(
	<AreaRangeChart
		id="area-range-chart-nested-array-of-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​