[Chartjs]-How to set color for each item in tooltip with ChartJS

by

3👍

✅

If you want to have the tooltip of the same color as your legend, you need to modify the pointColoroptions.

Find my Fiddle ;).

var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var lineChartData = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
        {
            label: "My First dataset",
            fillColor : "rgba(255, 0, 0, 0.0)",//"rgba(220,220,220,0.2)",
            strokeColor : "red",//"rgba(220,220,220,1)",
            pointColor : "red",//"rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(220,220,220,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        },
        {
            label: "My Second dataset",
            fillColor : "rgba(0, 0, 255, 0.0)",//"rgba(151,187,205,0.2)",
            strokeColor : "blue",//"rgba(151,187,205,1)",
            pointColor : "blue",//"rgba(151,187,205,1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(151,187,205,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        },
        {
            label: "My Third dataset",
            fillColor : "rgba(0, 255, 0, 0.0)",//"rgba(100,100,205,0.2)",
            strokeColor : "green",//"rgba(151,187,205,1)",
            pointColor : "green",//"rgba(151,187,205,1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(151,187,205,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        }
    ]
}

var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
    legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
    bezierCurve: false,
    multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>",
});

var legend = myLine.generateLegend();
document.getElementById("legend").innerHTML = legend;

Leave a comment