var options = {
  series: [78],
  chart: {
    height: 350,
    type: 'gauge',
  },
  plotOptions: {
    radialBar: {
      startAngle: -135,
      endAngle: 135,
      bands: [
        { from: 0, to: 30, color: '#FF4560' },
        { from: 30, to: 70, color: '#FEB019' },
        { from: 70, to: 100, color: '#00E396' },
      ],
      bandsStyle: {
        strokeWidth: '60%',
        gap: 2,
      },
      hollow: {
        margin: 0,
        size: '60%',
      },
      dataLabels: {
        name: { show: false },
        value: {
          offsetY: 8,
          fontSize: '32px',
          fontWeight: 700,
          formatter: function (val) {
            return val + '%'
          },
        },
      },
    },
  },
  fill: { opacity: 0.8 },
  labels: ['System Health'],
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()