var options = {
  series: [83],
  chart: {
    height: 300,
    type: 'gauge',
  },
  plotOptions: {
    radialBar: {
      startAngle: -90,
      endAngle: 90,
      track: {
        background: '#e7e7e7',
        strokeWidth: '97%',
        margin: 5,
      },
      dataLabels: {
        name: { show: false },
        value: {
          offsetY: -2,
          fontSize: '32px',
          formatter: function (val) {
            return val + '%'
          },
        },
      },
    },
  },
  fill: {
    type: 'gradient',
    gradient: {
      shade: 'light',
      shadeIntensity: 0.4,
      inverseColors: false,
      opacityFrom: 1,
      opacityTo: 1,
      stops: [0, 50, 53, 91],
    },
  },
  labels: ['Score'],
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()
Semi-Circle Gauge - JavaScript Gauge Charts | ApexCharts.js | ApexCharts.js