question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Doughnut tooltips displayColors problem

See original GitHub issue

After 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:closed
  • Created 6 years ago
  • Reactions:2
  • Comments:11 (6 by maintainers)

github_iconTop GitHub Comments

2reactions
etimbergcommented, Sep 29, 2017

@EmilMoe #4766 has a fix for this

1reaction
simonbrunelcommented, Sep 11, 2017
Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found