How To

Add a range to the circular gauge dynamically

You can add a range to the circular gauge dynamically by pushing the new ranges to the circular gauge axes in button click.

To add ranges dynamically to the circular gauge, follow the given steps:

Step 1:

Initialize the circular gauge with one range.

import { CircularGauge, Range } from '@syncfusion/ej2-circulargauge';

// initialize the circular gauge
let circulargauge: CircularGauge = new CircularGauge({
  axes: [
    {
      minimum: 0, maximum: 120,
      // initialize the ranges
      ranges: [
        {
          start: 0, end: 20
        }
      ]
    }
  ]
});
// render initialized circular gauge
circulargauge.appendTo('#element');

Step 2:

You can add ranges to the circular gauge dynamically using the button click event. In button click, add the new ranges to the circular gauge axes. To refresh the circular gauge, invoke the refresh method.

Source
Preview
index.js
index.html
var circulargauge = new ej.circulargauge.CircularGauge({
    axes: [
    {
      minimum: 0, maximum: 120,
      ranges: [
        {
          start: 0, end: 20
        }
      ]
    }
  ]
}, '#element');

document.getElementById("addRange").onclick = function () {
 var start = +(circulargauge.axes[0].ranges[circulargauge.axes[0].ranges.length - 1].start) + 20;
 var end = start + 20;
  if (end > circulargauge.axes[0].maximum) {
    circulargauge.axes[0].maximum = end;
  }
  let range = { start: start, end: end };
  circulargauge.axes[0].ranges.push(new ej.circulargauge.Range((circulargauge.axes[0].ranges[0]), 'ranges', range));
  circulargauge.refresh();
}
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>
    <button id="addRange">Add Range</button>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>