Skip to main content

GaugeChart

Default​

Result
Loading...
Live Editor
<GaugeChart value={50} />

Title​

The title prop will render text under the chart value.

Note: You may need to make the chart larger to accommodate the title using the chartDiameter prop.

Result
Loading...
Live Editor
<GaugeChart value={50} title="Probability of Success" />

Show drop shadow​

The showDropShadow prop will render a container around the chart with a drop-shadow.

Result
Loading...
Live Editor
<GaugeChart value={50} showDropShadow />

Legend​

The showLegend prop will render a legend below the chart.

Note: If you need more customization around the layout of the legend you can build one with the ChartLegend components.

Result
Loading...
Live Editor
<GaugeChart value={50} showLegend />

Custom label​

The valueLabel prop can be used to render a custom label instead of the numeric value.

Result
Loading...
Live Editor
<GaugeChart value={50} valueLabel="Label" />

Custom colors and ranges​

The colorRanges prop allows you to customize the colors and ranges of the chart.

Note: The upperbound and lowerbound values in the prop overlap for math purposes, but the displayed uppperbound will be minus one.

Result
Loading...
Live Editor
<GaugeChart
	value={50}
	colorRanges={[
		{ lowerbound: 0, upperbound: 25, color: 'red' },
		{ lowerbound: 25, upperbound: 50, color: 'orange' },
		{ lowerbound: 50, upperbound: 75, color: 'yellow' },
		{ lowerbound: 75, upperbound: 100, color: 'green' },
	]}
	showLegend
/>

Ranges with labels​

A label can be provided in each range passed to the colorRanges prop. This label will be rendered instead of the numeric value.

Result
Loading...
Live Editor
<GaugeChart
	value={50}
	colorRanges={[
		{ lowerbound: 0, upperbound: 50, color: 'var(--bs-danger)', label: 'Danger' },
		{ lowerbound: 50, upperbound: 75, color: 'var(--bs-warning)', label: 'Warning' },
		{ lowerbound: 75, upperbound: 100, color: 'var(--bs-success)', label: 'Success' },
	]}
/>

Show ticks​

When color ranges are provided, the showTicks prop will render ticks on the chart to indicate the boundaries between ranges.

Result
Loading...
Live Editor
<GaugeChart
	value={90}
	colorRanges={[
		{ lowerbound: 0, upperbound: 50, color: 'var(--bs-danger)' },
		{ lowerbound: 50, upperbound: 75, color: 'var(--bs-warning)' },
		{ lowerbound: 75, upperbound: 100, color: 'var(--bs-success)' },
	]}
	showTicks
/>

Show marker​

A circular marker can be displayed at the end of the colored line with the showMarker prop.

Result
Loading...
Live Editor
<GaugeChart value={50} showMarker />

Props​