Chartjs-Add border to Chart.js tooltips

1👍

You can call the stroke function to draw the border. All the path coordinates are available in the tooltip object.

...
var strokeStyle = "red"
self.chart.ctx.lineWidth = 3;
Chart.helpers.each(self.datasets[0].points, function (point, index) {
    Chart.helpers.each(self.datasets, function (dataset) {
        self.chart.ctx.strokeStyle = strokeStyle;
        var tooltip = 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
        })
        tooltip.draw()
        self.chart.ctx.stroke();

        var direction = 1;
        if (tooltip.yAlign === "above")
            direction = -1;            

        // erase out the rounded border near where the caret appears
        self.chart.ctx.strokeStyle = self.options.tooltipFillColor;
        self.chart.ctx.beginPath();
        self.chart.ctx.moveTo(tooltip.x - tooltip.caretHeight, tooltip.y + direction * (tooltip.caretPadding + tooltip.caretHeight));
        self.chart.ctx.lineTo(tooltip.x + tooltip.caretHeight, tooltip.y + direction * (tooltip.caretPadding + tooltip.caretHeight));
        self.chart.ctx.stroke();

        // draw the caret angle
        self.chart.ctx.strokeStyle = strokeStyle;
        self.chart.ctx.beginPath();
        self.chart.ctx.moveTo(tooltip.x + tooltip.caretHeight, tooltip.y + direction * (tooltip.caretPadding + tooltip.caretHeight));
        self.chart.ctx.lineTo(tooltip.x, tooltip.y + direction * tooltip.caretPadding);
        self.chart.ctx.lineTo(tooltip.x - tooltip.caretHeight, tooltip.y + direction * (tooltip.caretPadding + tooltip.caretHeight));
        self.chart.ctx.stroke();
    });
...

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


enter image description here

Leave a comment