Chartjs - how to change the notation of doughnut chart

Question

I have created a doughnut chart using the bellow code

   var randomScalingFactor = function() {
        return Math.round(Math.random() * 100);
    };

    var config = {
        type: 'doughnut',
        data: {
            datasets: [{
                data: [
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                ],
                backgroundColor: [
                    window.chartColors.red,
                    window.chartColors.orange,
                    window.chartColors.yellow,
                    window.chartColors.green,
                    window.chartColors.blue,
                ],
                label: 'Dataset 1'
            }],
            labels: [
                "Red",
                "Orange",
                "Yellow",
                "Green",
                "Blue"
            ]
        },
        options: {
            responsive: true
        }
    };

    window.onload = function() {
        var ctx = document.getElementById("chart-area").getContext("2d");
        window.myPie = new Chart(ctx, config);
    };

<script src="http://www.chartjs.org/samples/latest/utils.js"></script>
<script src="http://www.chartjs.org/dist/2.7.0/Chart.bundle.js"></script>
    <div id="canvas-holder" style="width:40%">
        <canvas id="chart-area" />
    </div>

And will show a graph like bellow,

Is there any option is there to change the graph notation like the bellow image? I was try to check the documentation,and i don't find anything to change this.

Answer 1

I guess you need to make use of the onAnimationComplete method to loop through each datasets and metadata to reconstruct the tooltip values to make them as values.

Here is a demo,

https://jsfiddle.net/c8Lk2381/246/

HTML

<canvas id="chart" height="450" width="640"></canvas>

Javascript

tooltip.transition(Chart.helpers.easingEffects.linear).draw();
            }, self);
        }, self);
    }
},
    data: {
        datasets: [{
            data: [
                2,
                4,
                7,
                1,
                6,
            ],
            backgroundColor: [
                "Red",
                "Green",
                "Yellow",
                "Grey",
                "Purple",
            ],
        }],
        labels: [
            "Red",
            "Green",
            "Yellow",
            "Grey",
            "Purple"
        ]
    },
};

var ctx = document.getElementById("chart").getContext("2d");
var doughnutchart = new Chart(ctx, doughnutChartConfig);

Hope this helps!