[Chartjs]-Customizing Chart.js troubleshoot

by

7👍

✅

Let’s start with the easiest one first

2) is it possible to hide left labels with first grey line?

I assume you meant the y axis labels. You can set the scaleShowLabels option to false in the chart options to hide the y axis labels

window.weeksChart = new Chart(ctx).Line(dataWeeks, {
    scaleShowLabels: false,
    ...

1) is it possible to move bottom labels on top of the chart?

I assume you mean the x axis labels. Chart.js doesn’t have a direct option to do this. However you can hide the actual x axis labels and draw the x axis labels at the top of the chart by yourself.

Again, Chart.js doesn’t have an option to hide x axis labels, but luckily there is an option to control the scale font color. Just set it to transparent and your original x axis labels are now hidden!

window.weeksChart = new Chart(ctx).Line(dataWeeks, {
    scaleFontColor: "transparent",
    ...

Now the drawing of the x axis labels at the top of the chart. To save us the trouble of extending the chart, we can add a post animation event handler and do this in that, like so

window.weeksChart = new Chart(ctx).Line(dataWeeks, {
     onAnimationComplete: function () {
          animationComplete.apply(this)
     }
     ...

with 

var animationComplete = function () {
    var self = this;

    Chart.helpers.each(self.datasets[0].points, function (point, index) {
        self.chart.ctx.font = Chart.helpers.fontString(self.fontSize, self.fontStyle, self.fontFamily)
        self.chart.ctx.textAlign = 'center';
        self.chart.ctx.textBaseline = "middle";
        self.chart.ctx.fillStyle = "#666";
        self.chart.ctx.fillText(point.label, point.x, self.scale.startPoint);
    });
};

We just loop through all points in one of the dataset and add the labels (scale.startPoint is the top edge of the chart area)

Note – why do we set the font, alignment, etc. every iteration? That’s for when we add the tooltips.

3) is it possible to set up permanent tooltips(to show temperature) on every point instead of hover tooltips?

The first step would be to actually show the tooltips. This is fairly simple, though a bit tedious. We loop through all the x axis point, build the label (by going through each dataset) and then construct a tooltip (fortunately, we can use Chart.MultiTooltip function for this.

We add it into the same loop we used to construct the new x axis labels. Since we need to color our tooltips, we need to get and store the set of colors in an array (which we pass on to the MultiTooltip function – we need to do this only once, so we take it out of the loop.

The modified animationComplete function is now this

var animationComplete = function () {
    var self = this;

    var tooltipColors = []
    Chart.helpers.each(self.datasets, function (dataset) {
        tooltipColors.push({
            fill: dataset.strokeColor,
            stroke: dataset.strokeColor
        })
    });

    Chart.helpers.each(self.datasets[0].points, function (point, index) {
        var labels = []
        var total = 0;
        Chart.helpers.each(self.datasets, function (dataset) {
            labels.push(dataset.points[index].value)
            total += Number(dataset.points[index].y);
        });

        new Chart.MultiTooltip({
            x: point.x,
            y: total / 2,
            xPadding: self.options.tooltipXPadding,
            yPadding: self.options.tooltipYPadding,
            xOffset: self.options.tooltipXOffset,
            fillColor: self.options.tooltipFillColor,
            textColor: self.options.tooltipFontColor,
            fontFamily: self.options.tooltipFontFamily,
            fontStyle: self.options.tooltipFontStyle,
            fontSize: self.options.tooltipFontSize,
            titleTextColor: self.options.tooltipTitleFontColor,
            titleFontFamily: self.options.tooltipTitleFontFamily,
            titleFontStyle: self.options.tooltipTitleFontStyle,
            titleFontSize: self.options.tooltipTitleFontSize,
            cornerRadius: self.options.tooltipCornerRadius,
            labels: labels,
            legendColors: tooltipColors,
            legendColorBackground: self.options.multiTooltipKeyBackground,
            title: point.label,
            chart: self.chart,
            ctx: self.chart.ctx,
            custom: self.options.customTooltips
        }).draw()

        self.chart.ctx.font = Chart.helpers.fontString(self.fontSize, self.fontStyle, self.fontFamily)
        self.chart.ctx.textAlign = 'center';
        self.chart.ctx.textBaseline = "middle";
        self.chart.ctx.fillStyle = "#666";
        self.chart.ctx.fillText(point.label, point.x, self.scale.startPoint);
    });
};

It looks complex, but all we are doing is passing a options that we copy from the chart instance options to the MultiTooltip function.

The tooltips all show up when the animation is complete. HOWEVER, once you move your mouse over the chart they all up and disappear! That’s because the chart instance listens for multiple events to decide whether to start checking if tooltips should be shown – one of these is mousemove (and that causes it to redraw the chart, wiping out all our hard drawn tooltips and, if we are lucky, it draws a tooltip based on the point our mouse is hovering over)

This is a configurable option. So, all we have to do is remove all such events.

window.weeksChart = new Chart(ctx).Line(dataWeeks, {
    tooltipEvents: []
    ...

Working fiddle – http://jsfiddle.net/fuodxsfv/

Unless your chart is wide enough, you will have tooltips (mostly the middle 2 ones) overlap (of course you could incorporate logic into the above loop to handle that), but anyhoo, those were actually meant to be tooltips!

Leave a comment