[Chartjs]-Chart.js and right side free space

by

3👍

✅

The space is there because the last x axis label (April). Chart.js leaves enough space so that the label does not get clipped off. This also ensures that the tooltip for the last point shows without clipping off.

You could set the last (or all) labels to an empty string to get rid of the space. However, you won’t see any labels in the tooltips. If you want to see the labels in the tooltips you need to extend the chart to remove the x axis labels like so

Chart.types.Line.extend({
    name: "LineAlt",
    initialize: function (data) {
        var labels = data.labels;
        data.labels = data.labels.map(function () { return '' });
        Chart.types.Line.prototype.initialize.apply(this, arguments);
        this.datasets[0].points.forEach(function (point, i) {
            point.label = labels[i]
        })
    }
});

Note that you need to use LineAlt instead of Line.

Fiddle – http://jsfiddle.net/0u2c7tez/

However this will still clip off the tooltip for the last point. If you are going to enable tooltips and don’t want them to be clipped off, then you need to use custom tooltips so that the tooltip is rendered in an external element (instead of the canvas) and not clipped off (see https://github.com/nnnick/Chart.js/blob/master/samples/line-customTooltips.html)

Leave a comment