CODEWITHSUNDEEP
javascriptbar-chartchart.js
Zaid Iqbal
Zaid Iqbal

Reputation: 1692

Hide labels on x-axis ChartJS

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

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

but in that case labels are also getting hidden on tooltip. What i want is to show labels on bars hover but i don't want to show those labels on x-axis. As it also disturbs my UX as well because charts width is too low.

I did spend too much time on this but couldn't find a solution to get rid of x-axis labels. Please help me here....

Upvotes: 7

Views: 10898

Answers (3)

Marcin Wasilewski
Marcin Wasilewski

Reputation: 735

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

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

Upvotes: 9

potatopeelings
potatopeelings

Reputation: 41075

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/

Upvotes: 4

A. Lee
A. Lee

Reputation: 1

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

Upvotes: 0

Related Questions