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

回答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 

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 

---

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

回答2:

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

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

回答3:

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

文章来源: Hide labels on x-axis ChartJS