Vue ApexCharts Dashboard

Vue + ApexCharts

by Alen Subasic

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>
<div class="container mx-auto" id="app">
  <h1>A dashboard</h1>
  <p>These charts are 🔥</p>
  <div>
	<radial-chart :chart-data="chartData.assessments"></radial-chart>
	<radial-chart :chart-data="chartData.externalAssessments"></radial-chart>
  </div>
</div>

CSS

.apexcharts-canvas {
  margin: 0 auto;
}

.dashboard-card {
  border: solid 1px #CCCCCC;
  margin: 0 auto;
  padding: 15px;
  box-shadow: 3px 3px 5px 3px rgba(0, 0, 0, 0.15);
}

Vue

const chartColors = ['#8dc63f', '#00529b', '#ff9d42'];
const radialBarAngleDefaults = {
	chart: {
		type: 'radialBar'
	},
	colors: chartColors,
	labels: ['KCIA', 'KSCA', 'SWVI'],
	plotOptions: {
		radialBar: {
			offsetY: -10,
			startAngle: 0,
			endAngle: 270,
			hollow: {
				margin: 50,
				size: "20%"
			},
			dataLabels: {
				name: {fontSize: '16px'},
				value: {fontSize: '18px'},
				total: {
					show: true,
					label: '# of Students',
					formatter: function(w) {
						//console.log(w);
						return 150; //radialBar is always percentages so this is always 100%
					}
				}
			}
		}
	},
	legend: {
		show: true,
		floating: true,
		fontSize: '22px',
		position: 'left',
		offsetX: 20,
		offsetY: 25,
		formatter: function(seriesName, data) {
			const total = '';
			return seriesName + ": " + data.w.globals.series[data.seriesIndex]
		}
	}
}

// This is always required
Vue.component('apexchart', VueApexCharts)

// This is our custom chart
Vue.component('radial-chart', {
	template: `
  <div class="dashboard-card">
		<h2 class="h3">Assessment</h2>
    <apexchart height="400" width="400" :options="chartOptions" :series="formattedData"/>
  </div>
	`,
	props: {
		chartData: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {};
	},
	computed: {
		chartOptions() {
			return radialBarAngleDefaults
		},
		formattedData() {
			// return array of TaskCompleted counts
			let array = [];
			for (var i = 0; i < this.chartData.length; i++) {
				//let percentComplete = (this.chartData[i].TaskCompleted * 100) / this.chartData[i].TotalTasks;
				array.push(this.chartData[i].TaskCompleted)
				//array.push(percentComplete)
			}
			return array;
		}
	}
})

var app = new Vue({
	el: '#app',
	data: {
		chartData:...