Angular Gauge Chart with Center Label

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/OIWEDHHA

<!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 {
      min-height: 530px;
      width: 100%;
      height: 100%;
    }

    .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 feed = (callback) => {
      let tick = {};
      tick.plot0 = Math.ceil(350 + Math.random() * 500);
      callback(JSON.stringify(tick));
    };

    let chartConfig = {
      type: 'gauge',
      globals: {
        fontSize: '25px',
      },
      plot: {
        tooltip: {
          borderRadius: '5px',
        },
        valueBox: {
          text: '%v', // default
          fontSize: '35px',
          placement: 'center',
          rules: [{
              text: '%v<br>EXCELLENT',
              rule: '%v >= 700',
            },
            {
              text: '%v<br>Good',
              rule: '%v < 700 && %v > 640',
            },
            {
              text: '%v<br>Fair',
              rule: '%v < 640 && %v > 580',
            },
            {
              text: '%v<br>Bad',
              rule: '%v <  580',
            },
          ],
        },
        size: '100%',
      },
      plotarea: {
        marginTop: '80px',
      },
      scaleR: {
        aperture: 180,
        center: {
          visible: false,
        },
        item: {
          offsetR: 0,
          rules: [{
            offsetX: '15px',
            rule: '%i == 9',
          }, ],
        },
        labels: ['300', '', '', '', '', '', '580', '640', '700', '750', '', '850'],
        maxValue: 850,
        minValue: 300,
        ring: {
          rules: [{
              backgroundColor: '#E53935',
              rule: '%v <= 580',
            },
            {
              backgroundColor: '#EF5350',
              rule: '%v > 580 && %v < 640',
            },
            {
              backgroundColor: '#FFA726',
              rule: '%v >= 640 && %v < 700',
            },
            {
              backgroundColor: '#29B6F6',
              rule: '%v >= 700',
            },
          ],
          size: '50px',
        },
        step: 50,
        tick: {
          visible: false,
        },
      },
      refresh: {
        type: 'feed',
        url: 'feed()',
        interval: 1500,
        resetTimeout: 1000,
        transport: 'js',
      },
      series: [{
        values: [755], // starting value
        animation: {
          effect: 'ANIMATION_EXPAND_VERTICAL',
          method: 'ANIMATION_BACK_EASE_OUT',
          sequence: 'null',
          speed: 900,
        },
        backgroundColor: 'black',
        indicator: [10, 10, 10, 10, 0.75],
      }, ],
    };

    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 feed = (callback) => {
  let tick = {};
  tick.plot0 = Math.ceil(350 + Math.random() * 500);
  callback(JSON.stringify(tick));
};

let chartConfig = {
  type: 'gauge',
  globals: {
    fontSize: '25px',
  },
  plot: {
    tooltip: {
      borderRadius: '5px',
    },
    valueBox: {
      text: '%v', // default
      fontSize: '35px',
      placement: 'center',
      rules: [
        {
          text: '%v<br>EXCELLENT',
          rule: '%v >= 700',
        },
        {
          text: '%v<br>Good',
          rule: '%v < 700 && %v > 640',
        },
        {
          text: '%v<br>Fair',
          rule: '%v < 640 && %v > 580',
        },
        {
          text: '%v<br>Bad',
          rule: '%v <  580',
        },
      ],
    },
    size: '100%',
  },
  plotarea: {
    marginTop: '80px',
  },
  scaleR: {
    aperture: 180,
    center: {
      visible: false,
    },
    item: {
      offsetR: 0,
      rules: [
        {
          offsetX: '15px',
          rule: '%i == 9',
        },
      ],
    },
    labels: ['300', '', '', '', '', '', '580', '640', '700', '750', '', '850'],
    maxValue: 850,
    minValue: 300,
    ring: {
      rules: [
        {
          backgroundColor: '#E53935',
          rule: '%v <= 580',
        },
        {
          backgroundColor: '#EF5350',
          rule: '%v > 580 && %v < 640',
        },
        {
          backgroundColor: '#FFA726',
          rule: '%v >= 640 && %v < 700',
        },
        {
          backgroundColor: '#29B6F6',
          rule: '%v >= 700',
        },
      ],
      size: '50px',
    },
    step: 50,
    tick: {
      visible: false,
    },
  },
  refresh: {
    type: 'feed',
    url: 'feed()',
    interval: 1500,
    resetTimeout: 1000,
    transport: 'js',
  },
  series: [
    {
      values: [755], // starting value
      animation: {
        effect: 'ANIMATION_EXPAND_VERTICAL',
        method: 'ANIMATION_BACK_EASE_OUT',
        sequence: 'null',
        speed: 900,
      },
      backgroundColor: 'black',
      indicator: [10, 10, 10, 10, 0.75],
    },
  ],
};

zingchart.render({
  id: 'myChart',
  data: chartConfig,
  height: '100%',
  width: '100%',
});

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

.zc-ref {
  display: none;
}

Machine Monitoring Dashboard 160/281 Radar Polar Chart

Angular Gauge Chart with Center Label

Related Documentation: