Skip to main content

MeteredDonutChart

Result
Loading...
Live Editor
<MeteredDonutChart id="demo-component-one" data="76.64" />

With Color Ranges​

Result
Loading...
Live Editor
const sampleRanges = [
	{
		lowerbound: 0,
		upperbound: 50,
		color: 'var(--bs-danger)',
	},
	{
		lowerbound: 50,
		upperbound: 70,
		color: 'var(--bs-warning)',
	},
	{
		lowerbound: 70,
		upperbound: 100,
		color: 'var(--bs-success)',
	},
];

render(
	<div style={{ display: 'flex' }}>
		<MeteredDonutChart
			id="meteredDonutChartRange1"
			title="Chart 1"
			data="90"
			colorRanges={sampleRanges}
		/>
		<MeteredDonutChart
			id="meteredDonutChartRange2"
			title="Chart 2"
			data="55"
			colorRanges={sampleRanges}
		/>
		<MeteredDonutChart
			id="meteredDonutChartRange3"
			title="Chart 3"
			data="30"
			colorRanges={sampleRanges}
		/>
	</div>,
);

Custom Value​

You can customize the text displayed in the middle of the chart by using the value prop.

Result
Loading...
Live Editor
<MeteredDonutChart id="demo-component-two" value="19 of 22" data="75" />

Props​