Example shows Vuejs doughnut / donut chart with indexlabels & custom colors.
/* App.vue */ <script> export default { data() { return { options: { theme: "light2", animationEnabled: true, title: { text: "World Silicon Production" }, subtitles: [{ text: "in tonnes" }], data: [{ type: "doughnut", startAngle: 90, indexLabel: "{label} {y}(#percent%)", yValueFormatString: "#,##0K", toolTipContent: "<span style='\"'color: {color};'\"'>{label}</span>, {y} tonnes", dataPoints: [ { label: "China", y: 4500, color: "#DE2910" }, { label: "Russia", y: 600, color: "#0039A6" }, { label: "India", y: 370, color: "#F79432" }, { label: "United States Of America", y: 320, color: "#37366B" }, { label: "Brazil", y: 210, color: "#F5D900" }, { label: "Malaysia", y: 150, color: "#F7C600" }, { label: "Others", y: 876, color: "#7a7677" } ] }] }, styleOptions: { width: "100%", height: "360px" } } } } </script> <template> <CanvasJSChart :options="options" :styles="styleOptions"/> </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');
You can customize the outer and inner radius of the doughnut chart using radius and innerRadius properties. Some other commonly used customization options include color, indexLabel, startAngle, etc.