Gallery Back to Gallery

Ring Chart Value Box

Powered by ZingChart 
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <link href='https://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .chart--container {
      width: 100%;
      height: 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: 'ring',
      globals: {
        fontFamily: 'Lato',
        fontWeight: 100,
      },
      backgroundColor: '#282E3D',
      plot: {
        tooltip: {
          visible: false,
        },
        valueBox: {
          type: 'first',
          text: "<span style='font-size:60px;'>402</span><br>Total Nodes",
          connected: false,
          fontColor: '#fff',
          fontSize: '40px',
          placement: 'center',
          rules: [{
            rule: '%v > 50',
            visible: false,
          }, ],
          visible: true,
        },
        animation: {
          delay: 0,
          effect: 'ANIMATION_EXPAND_VERTICAL',
          method: 'ANIMATION_LINEAR',
          sequence: 'ANIMATION_BY_PLOT',
          speed: '600',
        },
        detach: false,
        hoverState: {
          visible: false,
        },
        refAngle: 270,
        slice: 175,
      },
      plotarea: {
        margin: 0,
      },
      series: [{
          values: [25],
          backgroundColor: '#FDFD47',
          borderColor: '#282E3D',
          borderWidth: '2px',
          shadow: false,
        },
        {
          values: [75],
          backgroundColor: '#35D884',
          borderColor: '#282E3D',
          borderWidth: '2px',
          shadow: false,
        },
      ],
    };

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

</html>
<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <title>ZingSoft Demo</title>
   	<link href='https://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
		<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: 'ring',
  globals: {
    fontFamily: 'Lato',
    fontWeight: 100,
  },
  backgroundColor: '#282E3D',
  plot: {
    tooltip: {
      visible: false,
    },
    valueBox: {
      type: 'first',
      text: "<span style='font-size:60px;'>402</span><br>Total Nodes",
      connected: false,
      fontColor: '#fff',
      fontSize: '40px',
      placement: 'center',
      rules: [
        {
          rule: '%v > 50',
          visible: false,
        },
      ],
      visible: true,
    },
    animation: {
      delay: 0,
      effect: 'ANIMATION_EXPAND_VERTICAL',
      method: 'ANIMATION_LINEAR',
      sequence: 'ANIMATION_BY_PLOT',
      speed: '600',
    },
    detach: false,
    hoverState: {
      visible: false,
    },
    refAngle: 270,
    slice: 175,
  },
  plotarea: {
    margin: 0,
  },
  series: [
    {
      values: [25],
      backgroundColor: '#FDFD47',
      borderColor: '#282E3D',
      borderWidth: '2px',
      shadow: false,
    },
    {
      values: [75],
      backgroundColor: '#35D884',
      borderColor: '#282E3D',
      borderWidth: '2px',
      shadow: false,
    },
  ],
};

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

.zc-ref {
  display: none;
}
Circular Gauge Chart 191/281 Bar Chart with JS Rules and Zooming

Related Documentation: