var options = {
  series: [64],
  chart: {
    height: 360,
    type: 'gauge',
  },
  plotOptions: {
    radialBar: {
      startAngle: -135,
      endAngle: 135,
      ticks: {
        show: true,
        major: {
          count: 11,
          length: 12,
          width: 2,
          color: '#475569',
          placement: 'outside',
        },
        minor: {
          count: 3,
          length: 6,
          width: 1,
          color: '#94A3B8',
          placement: 'outside',
        },
        labels: {
          show: true,
          offset: 8,
          fontSize: '11px',
          color: '#475569',
          formatter: function (v) {
            return Math.round(v)
          },
        },
      },
      hollow: {
        margin: 30,
        size: '50%',
      },
      track: {
        strokeWidth: '60%',
        background: '#E2E8F0',
      },
      dataLabels: {
        name: { show: false },
        value: {
          offsetY: 8,
          fontSize: '28px',
          fontWeight: 600,
          formatter: function (val) {
            return val + '%'
          },
        },
      },
    },
  },
  labels: ['Progress'],
}

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