How To Create Circular Gauge Chart In React Js.

In this article, we will learn how to create Circular Guage chart using DevExtreme in React.js.

• First of all, we have to create a react application.
• Then import the below packages into your project.

npm i devextreme-react

− Gauge Chart Data:

export const dataSource = [{
    name: 'Summer',
    mean: 35,
    min: 28,
    max: 38,
}, {
    name: 'Autumn',
    mean: 24,
    min: 20,
    max: 32,
}, {
    name: 'Winter',
    mean: 18,
    min: 16,
    max: 23,
}, {
    name: 'Spring',
    mean: 27,
    min: 18,
    max: 31,
}];

• Now open your app.js file and add the code given below :

import React, { useState } from 'react';
import { CircularGauge, Scale, Label, RangeContainer, Range, Tooltip, Title, Font, } from 'devextreme-react/circular-gauge';
import { SelectBox } from 'devextreme-react/select-box';
import { dataSource } from './Data';

const App = () => {
    const [value, setvalue] = useState(dataSource[0].mean)
    const [subvalues, setsubvalues] = useState([dataSource[0].min, dataSource[0].max])

    const onSelectionChanged = ({ selectedItem }) => {
        setvalue(selectedItem.mean)
        setsubvalues([selectedItem.min, selectedItem.max])
    }

    const customizeText = ({ valueText }) => {
        return `${valueText} °C`;
    }

    return (
        <div>
            <CircularGauge
                id="gauge"
                value={value}
                subvalues={subvalues}
            >
                <Scale startValue={10} endValue={40} tickInterval={5}>
                    <Label customizeText={customizeText} />
                </Scale>
                <RangeContainer>
                    <Range startValue={10} endValue={20} color="#0077BE" />
                    <Range startValue={20} endValue={30} color="#E6E200" />
                    <Range startValue={30} endValue={40} color="#77DD77" />
                </RangeContainer>
                <Tooltip enabled={true} />
                <Title text="Temperature in the Greenhouse">
                    <Font size={28} />
                </Title>
            </CircularGauge>
            <SelectBox
                id="seasons"
                width={150}
                dataSource={dataSource}
                defaultValue={dataSource[0]}
                displayExpr="name"
                onSelectionChanged={onSelectionChanged}
            />
        </div>
    )
}

export default App

Output :