(Please note: There are lots of answers for v2, this is for v3)
I’m trying to setup tooltips label
and title
for a doughnut chart.
Code:
//Create the donut chart donut = new Chart('questions_positivity_donut', { type: 'doughnut', data: { labels: ["Positive", "Other"], datasets: [{ label: 'Sentiment', data: [user_context.state.avg_joy, (1-user_context.state.avg_joy)], backgroundColor: ['#a9a9a9','#f2f2f2'] }] }, options: { cutout: "70%", plugins: { legend: { display: false }, maintainAspectRatio: false, responsive: true, tooltip: { callbacks: { label: function(context) { let label = new Intl.NumberFormat('en-US', {style: 'percent', minimumFractionDigits: 0, maximumFractionDigits: 0}).format(context.formattedValue); return label; }, title: function(context) { let title = context.parsed.x; return title; } }, displayColors: false } } } });
The label
now works, and displays the value of the data, but the title
is returning blank, instead of returning the label of the data (“Positive” or “Other”).
How can I return the correct title in the tooltip.callback
?
Example: “Positive 35%” and “Other 65%”
Advertisement
Answer
If you log the context you could see its an array containing objects, with the default interaction mode you are using it only contains a single item so you can select that one and then access the label
attribute on it like so:
var options = { type: 'doughnut', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"] }] }, options: { plugins: { tooltip: { callbacks: { label: function(context) { let label = new Intl.NumberFormat('en-US', { style: 'percent', minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(context.formattedValue); return label; }, title: function(context) { let title = context[0].label; return title; } }, } } } } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options);
<body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script> </body>