CODEWITHSUNDEEP
jquerychartshtml5-canvasbar-chartchart.js
ui-matt
ui-matt

Reputation: 394

Set custom colours for tooltip squares Chart.js

When using Chart.js is it possible to change the colour of the squares within the tooltip that is used to respresent each bar?

I've noticed that when you change the pointColor value it affects the colour of the squares but can you somehow use a different colour other than whats set for pointColor that will let you have each square set to another colour.

Look at the fiddle example below hover over one of the bars and the squares in the tooltip want changing to be solid red and solid grey in colour like the hover state of the bars.

JSFiddle:

https://jsfiddle.net/dyjr2812/

HTML:

<canvas id="bar" width="390" height="225"></canvas>

JavaScript:

//Bar chart with two bars
    var barData2 = {
        labels: ["John W", "Ben T", "Jenny H", "Samantha D", "Anothony P"],
        datasets: [
            {
                fillColor: "rgba(153, 153, 155, 0.4)",
                highlightFill: "#7C7C7C",
                strokeColor: "#7C7C7C",
                pointColor: "#7C7C7C",
                pointStrokeColor: "#7C7C7C",
                pointHighlightFill: "#fff",
                data: [25, 94, 68, 175, 66]
            },
            {
                fillColor: "rgba(236,166,166,0.4)",
                highlightFill: "#C3090A",
                strokeColor: "#f9090a",
                pointColor: "#fff",
                pointStrokeColor: "#C3090A",
                pointHighlightFill: "#f9090a",
                data: [134, 112, 92, 160, 52]
            }
        ]
    };
    options = {
        responsive: true,
        scaleFontSize: 11,
        bezierCurve: true
    };
    var ctx = $("#bar").get(0).getContext("2d");
    var myChart = new Chart(ctx).Bar(barData2, options);

Upvotes: 1

Views: 2141

Answers (1)

potatopeelings
potatopeelings

Reputation: 41065

You can wrap Chart.MultiTooltip to put in your colors and the call the actual tooltip draw.

var originalDraw = Chart.MultiTooltip.prototype.draw;
Chart.MultiTooltip.prototype.draw = function() {
    this.legendColors[0].fill = "green";
    this.legendColors[1].fill = "blue"
    originalDraw.call(this, arguments)
}

Fiddle - https://jsfiddle.net/fxts741r/

Upvotes: 2

Related Questions