Geek Answers Handbook

Hide labels on the x axis ChartJS

I want to hide labels on the x axis since I have a solution to set

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

but in this case, the labels are also hidden in the tooltip. I want to show shortcuts on the panel, but I do not want to show these labels on the x axis. Because it also interferes with my UX since the width of the chart is too low.

I spent too much time on this, but could not find a solution to get rid of the x-axis labels. Please help me here ....

+6
source share
3 answers

You can expand the chart to do this, for example

 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 name it like that

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

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

Thanks @Samuele for this! For really long labels, you need to set the labels to something shorter, and then return them back to the original ones (in the chart elements) so that the space is not placed 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/

+4
source

I think you can do this with parameter settings in the latest versions of chartjs:

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

I managed to hide the labels on the x axis, retaining the title in a tooltip by doing the following:

  • In the chart data: labels: [""]
  • In the chart parameters add object.label = "ToolTipTitle"; before the line specifying the values ​​to be returned.
0
source

More articles:


All Articles