A "Rating" type chart related to user feedback

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/4SYEJ8VS

<!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"];
    var chartConfig = {
      type: 'gauge',
      plot: {
        size: '100%',
      },
      plotarea: {
        marginTop: '80px',
      },
      scaleR2: {
        aperture: 180,
        minValue: 0,
        maxValue: 100,
        step: 10,
        center: {
          visible: false,
          center: { //Pivot Point
          }
        },
        tick: {
          visible: false
        },
        maxLabels: 9999,
        labels: ['', 'VERY POOR', '', 'POOR', '', 'FAIR', '', 'GOOD', '', 'EXCELLENT', ''],
        item: {
          fontColor: '#0F1418',
          fontSize: '16px',
          placement: 'center',
          fontWeight: '600',
          fontStyle: 'normal',
          offsetR: '0px',
          _offsetY: '-15px',
          angle: 'auto' //To adjust the angle of your scale labels.
        },
        ring: {
          size: 1,
          borderWidth: '5px',
          borderColor: '#FFFFFF',
        }
      },
      scaleR: {
        aperture: 180,
        minValue: 0,
        maxValue: 100,
        step: 20,
        center: {
          size: 8,
          borderColor: 'black'
        },
        tick: {
          visible: false
        },
        item: {
          'visible': false,
        },
        ring: {
          size: 150,
          borderWidth: 5,
          borderColor: '#FFFFFF',
          rules: [{
              rule: '%v >= 0 && %v <= 20',
              backgroundColor: '#CF2020'
            },
            {
              rule: '%v >= 20 && %v <= 40',
              backgroundColor: '#F76420'
            },
            {
              rule: '%v >= 40 && %v <= 60',
              backgroundColor: '#FFBB10'
            },
            {
              rule: '%v >= 60 && %v <= 80',
              backgroundColor: '#CFDF28'
            },
            {
              rule: '%v >= 80 && %v <= 100',
              backgroundColor: '#42B74A'
            },
          ]
        }
      },
      series: [{
        values: [50],
        csize: '13%',
        size: '90%',
        backgroundColor: '#000000', //Needle Color
      }, ]
    };
    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>

var chartConfig = {
  type: 'gauge',
  plot: {
    size: '100%',
  },
  plotarea: {
    marginTop: '80px',
  },
  scaleR2: {
    aperture: 180,
    minValue: 0,
    maxValue: 100,
    step: 10,
    center: {
      visible: false,
      center: { //Pivot Point
      }
    },
    tick: {
      visible: false
    },
    maxLabels: 9999,
    labels: ['', 'VERY POOR', '', 'POOR', '', 'FAIR', '', 'GOOD', '', 'EXCELLENT', ''],
    item: {
      fontColor: '#0F1418',
      fontSize: '16px',
      placement: 'center',
      fontWeight: '600',
      fontStyle: 'normal',
      offsetR: '0px',
      _offsetY: '-15px',
      angle: 'auto' //To adjust the angle of your scale labels.
    },
    ring: {
      size: 1,
      borderWidth: '5px',
      borderColor: '#FFFFFF',
    }
  },
  scaleR: {
    aperture: 180,
    minValue: 0,
    maxValue: 100,
    step: 20,
    center: {
      size: 8,
      borderColor: 'black'
    },
    tick: {
      visible: false
    },
    item: {
      'visible': false,
    },
    ring: {
      size: 150,
      borderWidth: 5,
      borderColor: '#FFFFFF',
      rules: [{
          rule: '%v >= 0 && %v <= 20',
          backgroundColor: '#CF2020'
        },
        {
          rule: '%v >= 20 && %v <= 40',
          backgroundColor: '#F76420'
        },
        {
          rule: '%v >= 40 && %v <= 60',
          backgroundColor: '#FFBB10'
        },
        {
          rule: '%v >= 60 && %v <= 80',
          backgroundColor: '#CFDF28'
        },
        {
          rule: '%v >= 80 && %v <= 100',
          backgroundColor: '#42B74A'
        },
      ]
    }
  },
  series: [{
    values: [50],
    csize: '13%',
    size: '90%',
    backgroundColor: '#000000', //Needle Color
  }, ]
};
zingchart.render({
  id: 'myChart',
  data: chartConfig,
  height: '100%',
  width: '100%'
});

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

.zc-ref {
  display: none;
}

"speedometer" type chart 5/281 Radial tree / Circular dendrogram / Hyperbolic tree

A "Rating" type chart related to user feedback

Related Documentation: