Chartjs-Edit tooltips in ChartJS

by

1👍

✅

1.to remove colored squares?;

2.to change fontColor of numbers, so on blue line numbers will have blue font, and on red line numbers will be red?;

4.to remove Titles from tooltips? (everything what is works for me right now is to set title: ”, on line 49. Line 48 doesn’t work);

5.to add ° symbol right after number? (I tried to make like this -> tooltipTemplate: “<%= value + ‘°’%>”, but it doesn’t work…)

All of these can be done by just switching from the MultiTooltip constructor to a (single series) Tooltip constructor (the single series tooltip doesn’t have a colored square or a title) and adjusting the options textColor and text like so

new Chart.Tooltip({
    x: point.x,
    y: dataset.points[index].y,
    xPadding: self.options.tooltipXPadding,
    yPadding: self.options.tooltipYPadding,
    fillColor: self.options.tooltipFillColor,
    textColor: dataset.strokeColor,
    fontFamily: self.options.tooltipFontFamily,
    fontStyle: self.options.tooltipFontStyle,
    fontSize: self.options.tooltipFontSize,
    caretHeight: self.options.tooltipCaretSize,
    cornerRadius: self.options.tooltipCornerRadius,
    cornerRadius: self.options.tooltipCornerRadius,
    text: dataset.points[index].value + '°',
    chart: self.chart,
    custom: self.options.customTooltips
}).draw()

3.to move numbers higher on Y-axis? (i’d tried to add/change lines 30,78,79 in my Fiddle, but nothing works);

I assume you mean the x axis labels that are on the top (I couldn’t see lines 78 and 79 on your fiddle, and 30 seemed unrelated).

If it’s a slight change you could do it easily by adjusting the y parameter in the line that writes out the label.

self.chart.ctx.fillText(point.label, point.x, self.scale.startPoint - 2);

However, if you want to move it up a lot further, you need to make some space on the top of the chart or the top of your labels will be clipped off. You can do this by extending the chart and overriding scale.startPoint in the draw function.

So

Chart.types.Line.extend({
    name: "LineAlt",
    draw: function (data) {
        this.scale.startPoint = 25;
        Chart.types.Line.prototype.draw.apply(this, arguments);
    }
});

and then using LineAlt instead of Line

window.weeksChart = new Chart(ctx).LineAlt(dataWeeks, {

will allow you to do 

self.chart.ctx.fillText(point.label, point.x, self.scale.startPoint - 12);

without clipping off the label

Fiddle – http://jsfiddle.net/kphmkL0e/

Leave a comment