var options = {
  series: [58],
  chart: {
    height: 350,
    type: 'gauge',
  },
  plotOptions: {
    radialBar: {
      hollow: {
        margin: 15,
        size: '70%',
      },
      dataLabels: {
        name: {
          show: true,
          offsetY: -20,
          fontSize: '16px',
          color: '#999',
        },
        value: {
          show: true,
          fontSize: '40px',
          fontWeight: 700,
          offsetY: 6,
          formatter: function (val) {
            return val + '%'
          },
        },
      },
    },
  },
  fill: {
    type: 'gradient',
    gradient: {
      shade: 'dark',
      type: 'horizontal',
      shadeIntensity: 0.5,
      gradientToColors: ['#ABE5A1'],
      inverseColors: true,
      opacityFrom: 1,
      opacityTo: 1,
      stops: [0, 100],
    },
  },
  stroke: {
    lineCap: 'round',
  },
  labels: ['CPU Usage'],
}

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