[Chartjs]-Hide labels on x-axis ChartJS

by

8👍

I think that’s something you can do it with options setting in the latest versions of chartjs:

options: {
    scales: {
        xAxes: [
            {
                ticks: {
                    display: false
                }
            }
        ];
    }
}

4👍

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/

0👍

I was able to hide labels on the x-axis, while keeping the title in the tooltip by doing the following:

  • In chart data: labels: [""]
  • In chart options, add object.label = "ToolTipTitle"; before the line specifying the values that should be returned

Leave a comment