React Gauges - Title and Center Label Customization

This demo shows how to specify a CircularGauge title and display custom labels in the component's center.

A CircularGauge title describes gauge data. To customize it, use the properties of the title configuration object:

Location
Use the horizontalAlignment and verticalAlignment properties to place a title on any side of your gauge.
Font Settings
Use the font configuration object.

You can display a custom label in the center of a CircularGauge. Use the centerComponent or centerRender properties, and render template content as an SVG element.

TS JS

Backend API

import React from 'react'; import { CircularGauge, Scale, Title, Font, Margin, MinorTick, Export, RangeContainer, ValueIndicator, } from 'devextreme-react/circular-gauge'; import type { CircularGaugeRef } from 'devextreme-react/circular-gauge'; function CenterTemplate(gauge: ReturnType<CircularGaugeRef['instance']>) { return ( <svg> <rect y="0" x="0" width="200" height="200" fill="transparent"></rect> <g transform="translate(50 0)"> <rect x="0" y="0" width="100" height="70" rx="8" fill="#f2f2f2"></rect> <text textAnchor="middle" y="27" x="50" fill="#000" fontSize="20"> <tspan x="50">{gauge.value()}</tspan> <tspan x="50" dy="30">kg</tspan> </text> </g> <g transform="translate(43 140)"> <rect className="description" x="0" y="0" width="114" height="56" rx="8" fill="#fff"></rect> <text textAnchor="start" y="23" x="15" fill="#000" fontSize="12"> <tspan x="15">Capacity: 10 kg</tspan> <tspan x="15" dy="20">Graduation: 10 g</tspan> </text> </g> </svg> ); } function App() { return ( <CircularGauge id="gauge" value={7.78} centerRender={CenterTemplate} > <Scale startValue={0} endValue={10} tickInterval={1}> <MinorTick visible /> </Scale> <Export enabled /> <RangeContainer backgroundColor="#03a9f4" /> <ValueIndicator color="#03a9f4" /> <Title text="Gold Production (in Kilograms)" verticalAlignment="bottom"> <Font size={25} /> <Margin top={25} /> </Title> </CircularGauge> ); } export default App;

import React from 'react'; import { CircularGauge, Scale, Title, Font, Margin, MinorTick, Export, RangeContainer, ValueIndicator, } from 'devextreme-react/circular-gauge'; function CenterTemplate(gauge) { return ( <svg> <rect y="0" x="0" width="200" height="200" fill="transparent" ></rect> <g transform="translate(50 0)"> <rect x="0" y="0" width="100" height="70" rx="8" fill="#f2f2f2" ></rect> <text textAnchor="middle" y="27" x="50" fill="#000" fontSize="20" > <tspan x="50">{gauge.value()}</tspan> <tspan x="50" dy="30" > kg </tspan> </text> </g> <g transform="translate(43 140)"> <rect className="description" x="0" y="0" width="114" height="56" rx="8" fill="#fff" ></rect> <text textAnchor="start" y="23" x="15" fill="#000" fontSize="12" > <tspan x="15">Capacity: 10 kg</tspan> <tspan x="15" dy="20" > Graduation: 10 g </tspan> </text> </g> </svg> ); } function App() { return ( <CircularGauge id="gauge" value={7.78} centerRender={CenterTemplate} > <Scale startValue={0} endValue={10} tickInterval={1} > <MinorTick visible /> </Scale> <Export enabled /> <RangeContainer backgroundColor="#03a9f4" /> <ValueIndicator color="#03a9f4" /> <Title text="Gold Production (in Kilograms)" verticalAlignment="bottom" > <Font size={25} /> <Margin top={25} /> </Title> </CircularGauge> ); } export default App;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> <script src="bundles/vendor/react.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>

#gauge { height: 440px; width: 100%; } .description { filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.16)); }