Gallery Back to Gallery

Animated Gauge

Powered by ZingChart
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 530px;
    }

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

<body>
  <div id="myChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    let chartConfig = {
      type: 'gauge',
      theme: 'classic',
      alpha: 1,
      backgroundColor: '#fff #eee',
      plot: {
        tooltip: {
          backgroundColor: 'black',
        },
        backgroundColor: '#666',
      },
      plotarea: {
        margin: '0 0 0 0',
      },
      scale: {
        sizeFactor: 1.25,
        offsetY: '120px',
      },
      scaleR: {
        values: '0:100:10',
        backgroundColor: '#eeeeee,#b3b3b3',
        borderColor: '#b3b3b3',
        borderWidth: '2px',
        ring: {
          offsetR: '130px',
          rules: [{
              backgroundColor: '#348D00',
              rule: '%v >=0 && %v < 20',
            },
            {
              backgroundColor: '#B1AD00',
              rule: '%v >= 20 && %v < 40',
            },
            {
              backgroundColor: '#FAC100',
              rule: '%v >= 40 && %v < 60',
            },
            {
              backgroundColor: '#EC7928',
              rule: '%v >= 60 && %v < 80',
            },
            {
              backgroundColor: '#FB0A02',
              rule: '%v >= 80',
            },
          ],
          size: '10px',
        },
      },
      labels: [{
          id: 'lbl1',
          text: 'Very High',
          tooltip: {
            text: '< 80 <br>Units',
            backgroundColor: '#ea0901',
            padding: '10px',
            shadow: false,
          },
          anchor: 'c',
          backgroundColor: '#FB0A02',
          offsetX: '160px',
          padding: '10px',
          textAlign: 'center',
          width: '80px',
          x: '50%',
          y: '90%',
        },
        {
          id: 'lbl2',
          text: 'High',
          tooltip: {
            text: '> 60 < 80<br>Units',
            backgroundColor: '#da6817',
            padding: '10px',
            shadow: false,
          },
          anchor: 'c',
          backgroundColor: '#EC7928',
          offsetX: '80px',
          padding: '10px',
          textAlign: 'center',
          width: '80px',
          x: '50%',
          y: '90%',
        },
        {
          id: 'lbl3',
          text: 'Medium',
          tooltip: {
            text: '> 40 < 60<br>Units',
            backgroundColor: '#e9b000',
            padding: '10px',
            shadow: false,
          },
          anchor: 'c',
          backgroundColor: '#FAC100',
          offsetX: '0px',
          padding: '10px',
          textAlign: 'center',
          width: '80px',
          x: '50%',
          y: '90%',
        },
        {
          id: 'lbl4',
          text: 'Low',
          tooltip: {
            text: '> 20 < 40<br>Units',
            backgroundColor: '#a09c00',
            padding: '10px',
            shadow: false,
          },
          anchor: 'c',
          backgroundColor: '#B1AD00',
          offsetX: '-80px',
          padding: '10px',
          textAlign: 'center',
          width: '80px',
          x: '50%',
          y: '90%',
        },
        {
          id: 'lbl5',
          text: 'Very Low',
          tooltip: {
            text: '< 20<br>Units',
            backgroundColor: '#237b00',
            padding: '10px',
            shadow: false,
          },
          anchor: 'c',
          backgroundColor: '#348D00',
          offsetX: '-160px',
          padding: '10px',
          textAlign: 'center',
          width: '80px',
          x: '50%',
          y: '90%',
        },
      ],
      series: [{
        values: [90],
        animation: {
          effect: 'ANIMATION_EXPAND_VERTICAL',
          method: 'ANIMATION_REGULAR_EASE_OUT',
          speed: 2500,
        },
      }, ],
    };

    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: '100%',
      width: '100%',
    });
  </script>
</body>

</html>
<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <title>ZingSoft Demo</title>
		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
	</head>
	<body>
		<div id="myChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div>
	</body>
</html>
let chartConfig = {
  type: 'gauge',
  theme: 'classic',
  alpha: 1,
  backgroundColor: '#fff #eee',
  plot: {
    tooltip: {
      backgroundColor: 'black',
    },
    backgroundColor: '#666',
  },
  plotarea: {
    margin: '0 0 0 0',
  },
  scale: {
    sizeFactor: 1.25,
    offsetY: '120px',
  },
  scaleR: {
    values: '0:100:10',
    backgroundColor: '#eeeeee,#b3b3b3',
    borderColor: '#b3b3b3',
    borderWidth: '2px',
    ring: {
      offsetR: '130px',
      rules: [
        {
          backgroundColor: '#348D00',
          rule: '%v >=0 && %v < 20',
        },
        {
          backgroundColor: '#B1AD00',
          rule: '%v >= 20 && %v < 40',
        },
        {
          backgroundColor: '#FAC100',
          rule: '%v >= 40 && %v < 60',
        },
        {
          backgroundColor: '#EC7928',
          rule: '%v >= 60 && %v < 80',
        },
        {
          backgroundColor: '#FB0A02',
          rule: '%v >= 80',
        },
      ],
      size: '10px',
    },
  },
  labels: [
    {
      id: 'lbl1',
      text: 'Very High',
      tooltip: {
        text: '< 80 <br>Units',
        backgroundColor: '#ea0901',
        padding: '10px',
        shadow: false,
      },
      anchor: 'c',
      backgroundColor: '#FB0A02',
      offsetX: '160px',
      padding: '10px',
      textAlign: 'center',
      width: '80px',
      x: '50%',
      y: '90%',
    },
    {
      id: 'lbl2',
      text: 'High',
      tooltip: {
        text: '> 60 < 80<br>Units',
        backgroundColor: '#da6817',
        padding: '10px',
        shadow: false,
      },
      anchor: 'c',
      backgroundColor: '#EC7928',
      offsetX: '80px',
      padding: '10px',
      textAlign: 'center',
      width: '80px',
      x: '50%',
      y: '90%',
    },
    {
      id: 'lbl3',
      text: 'Medium',
      tooltip: {
        text: '> 40 < 60<br>Units',
        backgroundColor: '#e9b000',
        padding: '10px',
        shadow: false,
      },
      anchor: 'c',
      backgroundColor: '#FAC100',
      offsetX: '0px',
      padding: '10px',
      textAlign: 'center',
      width: '80px',
      x: '50%',
      y: '90%',
    },
    {
      id: 'lbl4',
      text: 'Low',
      tooltip: {
        text: '> 20 < 40<br>Units',
        backgroundColor: '#a09c00',
        padding: '10px',
        shadow: false,
      },
      anchor: 'c',
      backgroundColor: '#B1AD00',
      offsetX: '-80px',
      padding: '10px',
      textAlign: 'center',
      width: '80px',
      x: '50%',
      y: '90%',
    },
    {
      id: 'lbl5',
      text: 'Very Low',
      tooltip: {
        text: '< 20<br>Units',
        backgroundColor: '#237b00',
        padding: '10px',
        shadow: false,
      },
      anchor: 'c',
      backgroundColor: '#348D00',
      offsetX: '-160px',
      padding: '10px',
      textAlign: 'center',
      width: '80px',
      x: '50%',
      y: '90%',
    },
  ],
  series: [
    {
      values: [90],
      animation: {
        effect: 'ANIMATION_EXPAND_VERTICAL',
        method: 'ANIMATION_REGULAR_EASE_OUT',
        speed: 2500,
      },
    },
  ],
};

zingchart.render({
  id: 'myChart',
  data: chartConfig,
  height: '100%',
  width: '100%',
});
.chart--container {
  height: 100%;
  width: 100%;
  min-height: 530px;
}

.zc-ref {
  display: none;
}
Bullet Chart with Rules and Tokens 246/281 Bubble Chart with Custom Markers

Related Documentation: