Chart.js how to rewrite x for webAPP

by

0👍

✅

You could extend the chart to remove the points that you don’t need from the x-axis, like so (adapted from https://stackoverflow.com/a/31606933/360067)

Chart.types.Line.extend({
    name: "LineAlt",
    initialize: function (data) {
        Chart.types.Line.prototype.initialize.apply(this, arguments);

        if (this.options.every) {
            var every = this.options.every;
            var xLabels = this.scale.xLabels
            xLabels.forEach(function (label, i) {
                if (i % every !== 0)
                    xLabels[i] = '';
            })
        }
    }
});

and you call it like so

var ctx = document.getElementById("chart").getContext("2d");
var myLineChart = new Chart(ctx).LineAlt(data, {
    every: 3
});

Adjust every to 2, 3,… to show one in every 2, every 3,… points.

Fiddle – http://jsfiddle.net/3p2ekjyn/

Leave a comment