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

Props