Gauge Chart - Speedometer Animated Fill-up

<!DOCTYPE html>
<html class="zc-html">

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    html,
    body,
    #myChart {
      background-color: white;
      height: 100%;
      width: 100%;
    }

    button {
      cursor: pointer;
      display: block;
      margin: 0 auto;
    }

    button:disabled {
      cursor: not-allowed;
    }

    .chart--container {
      min-height: 530px;
      width: 100%;
      height: 100%;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body>
  <button>Start Animation</button>
  <!-- CHART CONTAINER -->
  <div id="myChart"></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    const GOAL = 500;
    let myConfig = {
      type: "gauge",
      title: {
        text: "Actual Sales vs Target",
        fontWeight: 400
      },
      plotarea: {
        marginTop: '80px',
      },
      plot: {
        size: '100%',
        valueBox: {
          placement: 'center',
          text: 'Actual Sales vs Target<br>$%vk',
          fontSize: 24,
          offsetY: 50,
          fontWeight: 400,
          color: "#0F1418"
        }
      },
      scaleR: {
        aperture: 180,
        ring: {
          size: 75,
          "rules": [{
            "rule": `%v == 0`,
            "background-color": "#FFA300"
          }]
        },
        values: `0:${GOAL}:1`,
        center: {
          size: 10,
          'background-color': "#011CFF",
          'border-color': "none"
        },
        labels: ['$0', ...new Array(GOAL - 2).fill(''), `$${GOAL}k`],
        item: {
          'font-color': "#0F1418",
          'font-size': 24,
          'font-weight': "400",
          'offset-r': -65,
          'offset-y': 20, //To adjust the placement of your scale labels.
        },
        tick: {
          visible: false
        }
      },
      series: [{
        values: [0],
        csize: "10%",
        size: "90%",
        "indicator": [10, 0, 0, 0, 0],
        backgroundColor: "#011CFF",
        animation: {
          effect: 'ANIMATION_EXPAND_VERTICAL',
          method: 'ANIMATION_REGULAR_EASE_OUT',
          speed: 2500,
        }
      }, ]
    };
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: "100%",
      width: "100%"
    });
    // Function to update the gauge value and background
    function updateGauge(value) {
      zingchart.exec('myChart', 'setseriesvalues', {
        plotindex: 0,
        values: [value],
        update: false
      });
      zingchart.exec('myChart', 'modify', {
        data: {
          scaleR: {
            ring: {
              "rules": [{
                "rule": `%v >= 0 && %v < ${value}`,
                "background-color": value === GOAL ? "#31c458" : "#FFA300"
              }]
            }
          }
        }
      });
    }
    let button = document.querySelector('button');
    button.addEventListener('click', () => {
      button.setAttribute('disabled', 'disabled');
      // Animate the gauge to a specific value
      let values = {
        current: 0,
        target: GOAL
      };
      const interval = setInterval(() => {
        values.current += 5;
        if (values.current <= values.target)
          updateGauge(values.current);
        else
          clearInterval(interval);
      }, 5); // Update every 5ms
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html class="zc-html">

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <button>Start Animation</button>
  <!-- CHART CONTAINER -->
  <div id="myChart"></div>
</body>

</html>

html,
body,
#myChart {
  background-color: white;
  height: 100%;
  width: 100%;
}

button {
  cursor: pointer;
  display: block;
  margin: 0 auto;
}

button:disabled {
  cursor: not-allowed;
}

.chart--container {
  min-height: 530px;
  width: 100%;
  height: 100%;
}

.zc-ref {
  display: none;
}

const GOAL = 500;
let myConfig = {
  type: "gauge",
  title: {
    text: "Actual Sales vs Target",
    fontWeight: 400
  },
  plotarea: {
    marginTop: '80px',
  },
  plot: {
    size: '100%',
    valueBox: {
      placement: 'center',
      text: 'Actual Sales vs Target<br>$%vk',
      fontSize: 24,
      offsetY: 50,
      fontWeight: 400,
      color: "#0F1418"
    }
  },
  scaleR: {
    aperture: 180,
    ring: {
      size: 75,
      "rules": [{
        "rule": `%v == 0`,
        "background-color": "#FFA300"
      }]
    },
    values: `0:${GOAL}:1`,
    center: {
      size: 10,
      'background-color': "#011CFF",
      'border-color': "none"
    },
    labels: ['$0', ...new Array(GOAL - 2).fill(''), `$${GOAL}k`],
    item: {
      'font-color': "#0F1418",
      'font-size': 24,
      'font-weight': "400",
      'offset-r': -65,
      'offset-y': 20, //To adjust the placement of your scale labels.
    },
    tick: {
      visible: false
    }
  },
  series: [{
    values: [0],
    csize: "10%",
    size: "90%",
    "indicator": [10, 0, 0, 0, 0],
    backgroundColor: "#011CFF",
    animation: {
      effect: 'ANIMATION_EXPAND_VERTICAL',
      method: 'ANIMATION_REGULAR_EASE_OUT',
      speed: 2500,
    }
  }, ]
};
zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: "100%",
  width: "100%"
});
// Function to update the gauge value and background
function updateGauge(value) {
  zingchart.exec('myChart', 'setseriesvalues', {
    plotindex: 0,
    values: [value],
    update: false
  });
  zingchart.exec('myChart', 'modify', {
    data: {
      scaleR: {
        ring: {
          "rules": [{
            "rule": `%v >= 0 && %v < ${value}`,
            "background-color": value === GOAL ? "#31c458" : "#FFA300"
          }]
        }
      }
    }
  });
}
let button = document.querySelector('button');
button.addEventListener('click', () => {
  button.setAttribute('disabled', 'disabled');
  // Animate the gauge to a specific value
  let values = {
    current: 0,
    target: GOAL
  };
  const interval = setInterval(() => {
    values.current += 5;
    if (values.current <= values.target)
      updateGauge(values.current);
    else
      clearInterval(interval);
  }, 5); // Update every 5ms
});