How to show tooltips in Chart.js?

Question

Following the tutorial this code draws the line chart, but no tooltips. Am I missing some configuration option here? In the tutorial there are tooltips showing up.

var chartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};

var ctx = document.getElementById("chart").getContext("2d");
var myNewChart = new Chart(ctx).Line(chartData, {
    showTooltip: true,
    tooltipTemplate: "<%= value %>"
});

score 11 · Accepted Answer · answered Aug 08 '14 at 16:40

11

What version of chart.js are you using?

I can confirm that tooltips work using v1.0.1-beta2

<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1-beta.2/Chart.min.js"></script>

but do not work using v0.2.0.

Version 1.0.1-beta2 is available from cdnjs.

answered Aug 08 '14 at 16:40

cooncesean

1,294
2
18
26

Confirmed, v0.2.0 is the version currently available on NuGet (26/09/14), typical... – Sam Jones Sep 26 '14 at 09:08
Yeah I grabbed it with bower. My code worked after loaded Chart.js from CDN – Connor Leech Oct 14 '14 at 06:14
I got it via Nuget and had the same problem. I had to get the latest version from https://github.com/nnnick/Chart.js. – Mike the Tike Oct 23 '14 at 07:54
it was because i used the version from bower package and it had a much lower version stable by that time – VuesomeDev Oct 31 '14 at 14:18

score 1 · Answer 2 · answered Jul 17 '14 at 15:06

It works and shows tooltips properly.. Do you get any error in the console?

Here's how I used your code:

var chartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};

window.onload = function(){
    var ctx = document.getElementById("chart").getContext("2d");
    window.myNewChart = new Chart(ctx).Line(chartData, {
        showTooltip: true,
        tooltipTemplate: "<%= value %>"
    });
};

score 0 · Answer 3 · answered Jun 18 '17 at 12:21

0

You just need to put backgroundColor with a single value instead a array:

datasets: [{
    label: "# of beauty womens",
    data: [12, 5, 3],
    backgroundColor: "#FC940B",
    fill: false,
    borderColor: "#FC940B"
}]

Hugs...

answered Jun 18 '17 at 12:21

Assis Runny

1

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. Please read this [how-to-answer](http://stackoverflow.com/help/how-to-answer) for providing quality answer. – thewaywewere Jun 18 '17 at 13:04

How to show tooltips in Chart.js?

3 Answers3

Linked