DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Free Trial Buy
    Your search did not match any results.
    Circular Gauge

    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 usually informs users about the nature of gauge data. To customize it, use the properties of the title configuration object:

    You can display a custom label in the center of a CircularGauge. Use the centerTemplate property. Render template content as an SVG element.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Backend API
    Copy to CodePen
    Apply
    Reset
    $(() => { $('#gauge').dxCircularGauge({ scale: { startValue: 0, endValue: 10, tickInterval: 1, minorTick: { visible: true }, }, export: { enabled: true, }, rangeContainer: { backgroundColor: '#03a9f4', }, valueIndicator: { color: '#03a9f4', }, value: 7.78, title: { text: 'Gold Production (in Kilograms)', verticalAlignment: 'bottom', font: { size: 25, }, margin: { top: 25, }, }, centerTemplate: (gauge, container) => { const topGroup = createGroup(50, 0); const bottomGroup = createGroup(43, 140); const baseRect = createRect(200, 200, 'transparent', 0); const topRect = createRect(100, 70, '#f2f2f2', 8); const bottomRect = createRect(114, 56, '#fff', 8); const valueText = createText(50, 27, 20, 'middle', 30, gauge.value(), 'kg'); const bottomText = createText(15, 23, 12, 'start', 20, 'Capacity: 10 kg', 'Graduation: 10 g'); bottomRect.setAttribute('class', 'description'); topGroup.appendChild(topRect); topGroup.appendChild(valueText); bottomGroup.appendChild(bottomRect); bottomGroup.appendChild(bottomText); container.appendChild(baseRect); container.appendChild(topGroup); container.appendChild(bottomGroup); }, }); }); function createRect(width, height, fill, radius) { const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); rect.setAttribute('x', 0); rect.setAttribute('y', 0); rect.setAttribute('width', width); rect.setAttribute('height', height); rect.setAttribute('fill', fill); rect.setAttribute('rx', radius); return rect; } function createText(x, y, fontSize, textAnchor, dy, content1, content2) { const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); text.setAttribute('x', x); text.setAttribute('y', y); text.setAttribute('fill', '#000'); text.setAttribute('text-anchor', textAnchor); text.setAttribute('font-size', fontSize); const tspan1 = createTSpan(x, 0, content1); const tspan2 = createTSpan(x, dy, content2); text.appendChild(tspan1); text.appendChild(tspan2); return text; } function createGroup(x, y) { const group = document.createElementNS('http://www.w3.org/2000/svg', 'g'); group.setAttribute('transform', `translate(${x} ${y})`); return group; } function createTSpan(x, dy, content) { const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan'); tspan.setAttribute('x', x); tspan.setAttribute('dy', dy); tspan.textContent = content; return tspan; }
    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.1.5/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/23.1.5/js/dx.all.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="gauge"></div> </div> </body> </html>
    #gauge { height: 440px; width: 100%; } .description { filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.16)); }