Hide labels on x-axis ChartJS

Question

I want to hide labels on x-axis as i have a solution to set

$scope.labels = [\'\', \'\', \'\', \'\', \'\', \'\', \'\'];

but in that case labels

Answer 1

You can extend the chart to do this, like so

Chart.types.Bar.extend({
    name: "BarAlt",
    initialize: function(data){
        Chart.types.Bar.prototype.initialize.apply(this, arguments);
        var xLabels = this.scale.xLabels;
        for (var i = 0; i < xLabels.length; i++)
            xLabels[i] = '';
    }
});

and call it like so

var myBarChart = new Chart(ctx).BarAlt(data);

---

Fiddle - http://jsfiddle.net/kq3utvnu/

---

Thanks @Samuele for pointing this out! For really long labels, you'll need to set the labels to something shorter and then set it back to the original ones (in the chart elements) so that no space is taken up below the x axis for the labels.

Chart.types.Bar.extend({
    name: "BarAlt",
    initialize: function(data){
        var originalLabels = data.labels;
        data.labels = data.labels.map(function() { return '' });

        Chart.types.Bar.prototype.initialize.apply(this, arguments);
        this.datasets[0].bars.forEach(function(bar, i) {
            bar.label = originalLabels[i];
        });
        var xLabels = this.scale.xLabels;
        for (var i = 0; i < xLabels.length; i++)
        xLabels[i] = '';
    }
});

---

Fiddle - http://jsfiddle.net/nkbevuoe/