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....

Answers:

Answer

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

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

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/

Answer

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.