Chartjs-How do I hide values past the x-axis in chartjs 2.0?

3👍

✅

You can achieve this using Chart.js plugins. They let you handle events occuring while creating, updating or drawing the chart.

Here, you’ll need to affect before the chart is initialised :

// We first create the plugin
var cleanOutPlugin = {

    // We affect the `beforeInit` event
    beforeInit: function(chart) {

        // Replace `ticks.min` by `time.min` if it is a time-type chart
        var min = chart.config.options.scales.xAxes[0].ticks.min;
        // Same here with `ticks.max`
        var max = chart.config.options.scales.xAxes[0].ticks.max;

        var ticks = chart.config.data.labels;
        var idxMin = ticks.indexOf(min);
        var idxMax = ticks.indexOf(max);

        // If one of the indexes doesn't exist, it is going to bug
        // So we better stop the program until it goes further
        if (idxMin == -1 || idxMax == -1)
            return;

        var data = chart.config.data.datasets[0].data;

        // We remove the data and the labels that shouldn't be on the graph
        data.splice(idxMax + 1, ticks.length - idxMax);
        data.splice(0, idxMin);
        ticks.splice(idxMax + 1, ticks.length - idxMax);
        ticks.splice(0, idxMin);
    }
};

// We now register the plugin to the chart's plugin service to activate it
Chart.pluginService.register(cleanOutPlugin);

The plugin is basically a loop through the data to remove the values that shouldn’t be displayed.

You can see this plugin working in a live example on jsFiddle.

For instance, the following chat with a min set to 2 and a max to 6 …