GaugeChart

Default

Result

Loading...

Live Editor

<GaugeChart value={50} />

<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" />

<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 />

<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 />

<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" />

<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 />

<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' }, ]} />

<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 />

<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 />

<GaugeChart value={50} showMarker />

Props