Menu
I have worked with chart.js 1.0 and had my doughnut chart tooltips displaying percentages based on data divided by dataset, but I'm unable to replicate this with chart 2.0.
I have searched high and low and have not found a working solution. I know that it will go under options but everything I've tried has made the pie dysfunctional at best.
<html> <head> <title>Doughnut Chart</title> <script src="../dist/Chart.bundle.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <style> canvas { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } </style> </head> <body> <div id="canvas-holder" style="width:75%"> <canvas id="chart-area" /> </div> <script> var randomScalingFactor = function() { return Math.round(Math.random() * 100); }; var randomColorFactor = function() { return Math.round(Math.random() * 255); }; var randomColor = function(opacity) { return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')'; }; var config = { type: 'doughnut', data: { datasets: [{ data: [ 486.5, 501.5, 139.3, 162, 263.7, ], backgroundColor: [ "#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360", ], label: 'Expenditures' }], labels: [ "Hospitals: $486.5 billion", "Physicians & Professional Services: $501.5 billion", "Long Term Care: $139.3 billion", "Prescription Drugs: $162 billion", "Other Expenditures: $263.7 billion" ] }, options: { responsive: true, legend: { position: 'bottom', }, title: { display: false, text: 'Chart.js Doughnut Chart' }, animation: { animateScale: true, animateRotate: true } } }; window.onload = function() { var ctx = document.getElementById("chart-area").getContext("2d"); window.myDoughnut = new Chart(ctx, config);{ } }; </script> </body> </html> 
777
Update: The below answer shows a percentage based on total data but @William Surya Permana has an excellent answer that updates based on the shown data https://stackoverflow.com/a/49717859/2737978
In options you can pass in a tooltips object (more can be read at the chartjs docs)
A field of tooltips, to get the result you want, is a callbacks object with a label field. label will be a function that takes in the tooltip item which you have hovered over and the data which makes up your graph. Just return a string, that you want to go in the tooltip, from this function.
Here is an example of what this can look like
tooltips: { callbacks: { label: function(tooltipItem, data) { //get the concerned dataset var dataset = data.datasets[tooltipItem.datasetIndex]; //calculate the total of this data set var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) { return previousValue + currentValue; }); //get the current items value var currentValue = dataset.data[tooltipItem.index]; //calculate the precentage based on the total and current item, also this does a rough rounding to give a whole number var percentage = Math.floor(((currentValue/total) * 100)+0.5); return percentage + "%"; } } } and a full example with the data you provided
fiddle
var randomScalingFactor = function() { return Math.round(Math.random() * 100); }; var randomColorFactor = function() { return Math.round(Math.random() * 255); }; var randomColor = function(opacity) { return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')'; }; var config = { type: 'doughnut', data: { datasets: [{ data: [ 486.5, 501.5, 139.3, 162, 263.7, ], backgroundColor: [ "#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360", ], label: 'Expenditures' }], labels: [ "Hospitals: $486.5 billion", "Physicians & Professional Services: $501.5 billion", "Long Term Care: $139.3 billion", "Prescription Drugs: $162 billion", "Other Expenditures: $263.7 billion" ] }, options: { responsive: true, legend: { position: 'bottom', }, title: { display: false, text: 'Chart.js Doughnut Chart' }, animation: { animateScale: true, animateRotate: true }, tooltips: { callbacks: { label: function(tooltipItem, data) { var dataset = data.datasets[tooltipItem.datasetIndex]; var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) { return previousValue + currentValue; }); var currentValue = dataset.data[tooltipItem.index]; var percentage = Math.floor(((currentValue/total) * 100)+0.5); return percentage + "%"; } } } } }; var ctx = document.getElementById("chart-area").getContext("2d"); window.myDoughnut = new Chart(ctx, config); { }<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="canvas-holder" style="width:75%"> <canvas id="chart-area" /> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
