vue-chartjs Doughnut chart percentage display

Question

I'm trying to display the percentage of these storages as displayed in the below image.

I tried the following code, but the percentage is not showing.

Code:

fillDoughnutData(i) {
        this.doughnutChartData.chartData = {
            datasets: [
                {
                    data: this.pieChart(i),
                    backgroundColor: ['#C4C4C4', '#F9BC0A']
                }
            ],
            labels: ['Volume used', 'Volume left'],
            tooltips: {
                callbacks: {
                    label(tooltipItem, data) {
                        return `${data.labels[tooltipItem.index]}: ${data.datasets[0].data[tooltipItem.index]}%`;
                    }
                }
            }
        };
    }

Expected output:

Any help please?

Answer 1

You can get it done without the labels inside the donut. Using Vue ChartKick & Chart JS Just format your data to be of this form [['Blueberry', 40], ['Strawberry', 60]] and for the colors also you pass it as an array or your donut will get random color

<pie-chart :donut="true" :data="[['Blueberry', 40], ['Strawberry', 60]]"></pie-chart>

Then within the script tags

import Vue from 'vue'
import Chartkick from 'vue-chartkick'
import Chart from 'chart.js'

Vue.use(Chartkick.use(Chart))

Chartkick.options = {
  colors: ['#A52A2A', '#D3D3D3']
}

Click here to view the donut generated from the code above

Answer 2

If you want to show percentages in tooltips, it is possible. It seems you put tooltips object inside chartdata object, whereas it should be inside options object. Like this:

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        // DO NOT PUT tooltips HERE
    },
    options: {
        // PUT tooltips HERE
    }
})