Custom angle radialBar chart using ApexCharts

Vue + ApexCharts

by Alen Subasic

HTML

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>
<div id="app">

</div>
<div>
  <button @click="toggleChart">Toggle chart!</button>
</div>

<template>
  <div>
    <apexchart width="400" :options="options" :series="series" />
  </div>
</template>

Vue

new Vue({
  el: '#app',
  components: {
    apexchart: VueApexCharts,
  },
  data: {
		//type: 'radialBar',
    series: [44, 55, 67],
    chartOptions: {
			colors: ['#8dc63f', '#00529b', '#ff9d42'],
      labels: ['KCIA', 'KSCA', 'SWVI'],
      plotOptions: {
        radialBar: {
					offsetY: -10,
          startAngle: 0,
          endAngle: 270,
					hollow: {
						margin: 15,
						size: "35%"
					},
          dataLabels: {
            name: {fontSize: '16px'},
            value: {fontSize: '18px'},
            total: {
              show: true,
              label: '# of Students',
              formatter: function (w) {
                // By default this function returns the average of all series.
                return 100
              }
            }
          }
        }
      },
			legend: {
				show: true,
				floating: true,
				fontSize: '18px',
				position: 'left',
				offsetX: 180,
				offsetY: 15,
				formatter: function(seriesName, data) {
					return seriesName + ": " + data.w.globals.series[data.seriesIndex]
				}
			}
    }
  },
	methods: {
		toggleChart() {
			this.chartOptions.type = 'line';
		}
	}
})