Half Ring Chart Graphset

<!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>
    .zc-html,
    .zc-body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
    }

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

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


<body class="zc-body">
  <div id="zc" class="chart--container">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    var graph = function(color, label, data, value) {
      return {
        type: 'ring',
        backgroundColor: '#fff',
        plotarea: {
          // Margin around each ring chart
          margin: '0 50'
        },
        plot: {
          slice: '80%', // Ring width,
          detach: false, // Prevent ring piece from detaching on click
          valueBox: [{
              // Percentage text
              type: 'first',
              text: value || `${parseInt(data[0]/(data[0]+data[1])*100)}%`,
              connected: false,
              fontColor: color,
              fontSize: '35px',
              placement: 'center',
              visible: true,
              offsetY: '-65px',
            },
            {
              // Label text
              type: 'first',
              text: label,
              connected: false,
              fontColor: '#718096',
              fontSize: '20px',
              placement: 'center',
              visible: true,
              offsetY: '-25px',
            }
          ],
          animation: {
            // Animation effect
            effect: 3,
            method: 0,
            speed: 300,
            sequence: 1
          }
        },
        labels: [{
          // Fraction text
          text: `${data[0]}/${data[0]+data[1]}`,
          fontColor: color,
          fontSize: '15px',
          fontWeight: 100,
          x: '70%',
          y: '10%',
        }],
        scaleR: {
          // Set to half ring
          refAngle: 180,
          aperture: 180
        },
        tooltip: {
          // Hide tooltip
          visible: false
        },
        series: [{
            // First part of the ring (colored)
            values: [data[0]],
            backgroundColor: color,
          },
          {
            // Remainder of ring
            values: [data[1]],
            backgroundColor: '#EDF2F7',
          }
        ]
      };
    };

    var g1 = graph('#1EBAED', 'Participation', [5, 2]);
    var g2 = graph('#29CB6C', 'Goals met', [3, 4]);
    var g3 = graph('#E7183D', 'Blocked', [0, 7]);
    var g4 = graph('#5352ED', 'Mood', [1, 7], '7.1/10');

    var myConfig = {
      layout: 'horizontal', // Layout ring charts horizontally
      graphset: [g1, g2, g3, g4],
    };

    zingchart.render({
      id: "zc",
      height: '100%',
      width: '100%',
      data: myConfig,
    });
  </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 class="zc-body">
  <div id="zc" class="chart--container">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>
</body>

</html>

.zc-html,
.zc-body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

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

.zc-ref {
  display: none;
}

var graph = function(color, label, data, value) {
  return {
    type: 'ring',
    backgroundColor: '#fff',
    plotarea: {
      // Margin around each ring chart
      margin: '0 50'
    },
    plot: {
      slice: '80%', // Ring width,
      detach: false, // Prevent ring piece from detaching on click
      valueBox: [{
          // Percentage text
          type: 'first',
          text: value || `${parseInt(data[0]/(data[0]+data[1])*100)}%`,
          connected: false,
          fontColor: color,
          fontSize: '35px',
          placement: 'center',
          visible: true,
          offsetY: '-65px',
        },
        {
          // Label text
          type: 'first',
          text: label,
          connected: false,
          fontColor: '#718096',
          fontSize: '20px',
          placement: 'center',
          visible: true,
          offsetY: '-25px',
        }
      ],
      animation: {
        // Animation effect
        effect: 3,
        method: 0,
        speed: 300,
        sequence: 1
      }
    },
    labels: [{
      // Fraction text
      text: `${data[0]}/${data[0]+data[1]}`,
      fontColor: color,
      fontSize: '15px',
      fontWeight: 100,
      x: '70%',
      y: '10%',
    }],
    scaleR: {
      // Set to half ring
      refAngle: 180,
      aperture: 180
    },
    tooltip: {
      // Hide tooltip
      visible: false
    },
    series: [{
        // First part of the ring (colored)
        values: [data[0]],
        backgroundColor: color,
      },
      {
        // Remainder of ring
        values: [data[1]],
        backgroundColor: '#EDF2F7',
      }
    ]
  };
};

var g1 = graph('#1EBAED', 'Participation', [5, 2]);
var g2 = graph('#29CB6C', 'Goals met', [3, 4]);
var g3 = graph('#E7183D', 'Blocked', [0, 7]);
var g4 = graph('#5352ED', 'Mood', [1, 7], '7.1/10');

var myConfig = {
  layout: 'horizontal', // Layout ring charts horizontally
  graphset: [g1, g2, g3, g4],
};

zingchart.render({
  id: "zc",
  height: '100%',
  width: '100%',
  data: myConfig,
});