Doughnut tooltips displayColors problem
See original GitHub issueAfter the upgrade to 2.7 I found a bug. When the option displayColors: false is set the text color of tooltips are black. I tryed to set the bodyFontColor: ‘#ffffff’, etc but the color text on the tooltips are always black.
this is my code:
var myChart = new Chart(ctx, {
type: 'doughnut',
data: data<?php echo $grafico_key; ?>,
options: {
responsive: true,
maintainAspectRatio: false,
animation: {
duration: 2000,
},
legend: {
display: false
},
tooltips: {
mode: 'label',
position: 'nearest',
xPadding: 10,
yPadding: 10,
bodyFontSize: 15,
bodySpacing: 8,
caretSize: 10, //freccetta
displayColors: false,
bodyFontColor: '#fff',
callbacks: {
label: function(tooltipItem, data) {
var valore = aggiungiPercento(data.datasets[0].data[tooltipItem.index].toString().trim());
return (data.labels[tooltipItem.index] + ": " + valore);
},
labelTextColor: function(tooltipItem, chart) {
return '#ffffff';
}
}
}
}
});
Edit (SB): code formatting
Issue Analytics
- State:
- Created 6 years ago
- Reactions:2
- Comments:11 (6 by maintainers)
Top Results From Across the Web
How to fix the tooltip position issue in double doughnut graph ...
I am using chart JS to plot the graph.. In this example, we create a double doughnut for a 2 dataset and render...
Read more >Pie and Donut Chart Tooltips Not Working | Infragistics Forums
I'm adding a Pie Chart to my application and unable to get the tooltip to display. I've tested using both a Pie and...
Read more >How to Color the Tooltip Based on the Line Color in Chart.js
With chart js you can make line chart, bar chart, pie chart, doughnut chart, scatter chart, polar area chart, radar chart, gauge chart...
Read more >Tooltip - Chart.js
Color to draw behind the colored boxes when multiple items are in the tooltip. displayColors, boolean, true, If true, color boxes are shown...
Read more >Sizing and centering donut chart - Material Design for Bootstrap
*_Expected behavior_*Hi I am using the donut chart and facing 2 problems. ... legend: { display: false }, tooltips: { displayColors: false } ......
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@EmilMoe #4766 has a fix for this
You need to use https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.js for the fiddle to work.