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