Vue.js Doughnut Chart in Dark Theme

Download Vue.js Chart Samples

Example shows Vuejs doughnut chart in dark theme where background is set to darker colors & the text to lighter ones.

/* App.vue */
<script>
export default {
  data() {
    return {
      chart: null,
      options: {
        animationEnabled: true,
        exportEnabled: true,
        theme: "dark2",
        title:{
          text: "Logicstics Delivery Report"
        },
        data: [{
          type: "doughnut",
          innerRadius: "95%",
          showInLegend: true,
          legendText: "{name}: {y}",          
          yValueFormatString: "#,###'%'",
          dataPoints: [
            { name: "Scheduled", y: 27, color: "#cbf3f5" },
            { name: "Delivered", y: 55, color: "#25ced9" },
            { name: "Cancelled", y: 18, color: "#f72564" }
          ]
        }]
      }
    }
  }
}
</script>

<template>
    <CanvasJSChart :options="options"/>
</template>                              
/*main.js*/
import { createApp } from 'vue'
import App from './App.vue'

import CanvasJSChart from '@canvasjs/vue-charts';

const app = createApp(App);
app.use(CanvasJSChart); // install the CanvasJS Vuejs Chart Plugin
app.mount('#app');

Chart Customizations

Chart can be set to lighter or darker theme using theme property. Index labels can be placed either outside or inside the slice by setting indexLabelPlacement property. Some other common customizations in pie chart includes startAngle, radius, etc.

Note   For step by step instructions, follow our Vuejs Integration Tutorial