CODEWITHSUNDEEP
javascriptc3.js
AlwaysThinkingDifferently
AlwaysThinkingDifferently

Reputation: 105

C3.js Tooltips not Showing any text

I am using version 0.7.1 of C3.js and I have created a donut chart with the following code:


var chart = c3.generate({
        data: {
            columns: [
                ['Critical', 100],
                ['High', 200],
                ['Informational', 300],
                ['Medium', 400],
                ['Low', 500],
            ],
            type : 'donut',
        },
        donut: {
            title: "Finding Severities"
        },
        tooltip: {
            format: {
                value: function (value, ratio, id, index) { return value + " " + id + " Findings"; }
            }
        }

    });

Everything works perfectly fine except for the tooltips which show up with blank boxes instead of the values I am trying to print. Even if I remove my custom tooltip format, the default tooltip still will not show up.

I have not modified the css and js files for C3.js and when I run this same code on their website (https://c3js.org/samples/chart_donut.html), it works perfectly fine.

Here is what shows up when I try to view the tooltip on my site:

enter image description here

And here is what I want to show up (which is what is supposed to happen if you run this code on https://c3js.org/samples/chart_donut.html) :

enter image description here

Upvotes: 1

Views: 936

Answers (1)

mgraham
mgraham

Reputation: 6207

Not a full answer, but too big to fit in a comment:

Something, somewhere, is setting the css color style for your table cell elements to 'white' (or '#fff'). c3.css itself doesn't have a rule for this property, so this will be getting set in another css file you load in or it might be the default for whatever browser you are using.

The c3 demo page uses another css file, foundation.css, that sets it to '#222'. (And I can recreate your problem by changing that css file's value for that rule/property combo to 'white'). The jsfiddle linked above uses the browser default which for me in chrome is '#000'.

So add this css rule and I'm 90% sure the problem goes away: 

.c3-tooltip td {
    color: #222;
}

Upvotes: 4

Related Questions