Displaying custom dataset properties in tooltip in chart.js

问题

What would be the easiest way possible to display custom properties in the pie chart tooltip?

var pieData = [
    {
        value: 40,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Label 1",
        description: "This is a description for label 1"
    },
    {
        value: 60,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Label 2",
        description: "This is a description for label 2"
    }
];

var options = {
    tooltipTemplate: "<%= label %> - <%= description %>"
};

window.onload = function(){
    var ctx = document.getElementById("chart-area").getContext("2d");
    window.myPie = new Chart(ctx).Doughnut(pieData, options);
};

I tried simply adding a "decription" property and then printing it, but without any luck. It just gives me an error saying description is not defined. I saw that there is a custom tooltip functionality, but that seemed like a lot of work for something trivial. Is there an easier way?

回答1:

Charts doesn't support this feature officially. But you can customize tooltip with your data like this in case of LineChart.

first, make chart with datasets and options

var chart = new Chart(ctx).Line(dataset, opt);

and, add properties what you want show in tooltip

var points = chart.datasets[0].points;
for (var i = 0; i < points.length; i++) {
    // Add properties in here like this
    // points[i].time = '2015-04-23 13:06:24'; 
}

then, you can use these properties like this.

tooltipTemplate: "<%=time%> : <%=value%>"

I hope this is helpful to someone. :D

回答2:

You should go:

  var options = {
       tooltipTemplate: "<%= label + '-' + %> <%= description %>"
    };

回答3:

It's not a solution really, but I solved it by adding just the description inside the label...

label: "Label 2 - Description",

来源：https://stackoverflow.com/questions/29176778/displaying-custom-dataset-properties-in-tooltip-in-chart-js

标签

tooltip

chart.js