CODEWITHSUNDEEP
javascript
sridhar
sridhar

Reputation: 1389

display dataset label in Chart.js line

I am able to generate the line graph using Charts.js tool. There are two datasets, for the years 2014 and 2015. The tool tip displays only the monthly value, but not the dataset value. How to enable it? Neither tooltipTemplate not multiTooltipTemplate solves it. I need to display the years too. Here is the javascript code.

<script>
var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ],
    datasets: [
        {
            label: "2015",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [3, 7, 2, 0, 1, 0, 1, 3, 8, 0, 1, 0]
        },
        {
            label: "2014",
            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: [3, 2, 3, 4, 0, 3, 2, 3, 0, 1, 1, 5]
        }
    ]
};
window.onload = function(){
    document.getElementById("myChart").width = window.innerWidth;
    var ctx = document.getElementById("myChart").getContext("2d");
    var myLineChart = new Chart(ctx).Line(data);
    }
</script>

Here is the html code

<canvas id="myChart" width="400" height="400" ></canvas>

enter image description here

Upvotes: 2

Views: 7193

Answers (2)

Lukasz Wiktor
Lukasz Wiktor

Reputation: 20422

Use datasetLabel in the tooltip template:

var options = {
    multiTooltipTemplate: "<%= datasetLabel %>: <%= value %>"
}
var myLineChart = new Chart(ctx).Line(data, options);

Here is a working jsfiddle.

Upvotes: 2

Sinto
Sinto

Reputation: 3997

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.

Upvotes: 0

Related Questions