Chart.js how to rewrite x for webAPP

Question

I use chart.js for a webApp, but it is not I want.

How to rewrite this x axle or I should change other js to draw chart，demo:

Answer 1

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/