Chartjs-Hide x-axis labels but show tooltips in chart.js

by

2👍

✅

You can extend the line chart to do this. Adapted from Hide labels on x-axis ChartJS (which was for bar charts) with some unneeded code removed.

What we do is pretty simple, we first set the labels array to blanks, allow the initialization to happen and finally loop through the points for the (first) dataset and set the labels to the original labels.

Chart.types.Line.extend({
  name: "LineAlt",
  initialize: function(data){
    var originalLabels = data.labels;
    data.labels = data.labels.map(function() { return '' });

    Chart.types.Line.prototype.initialize.apply(this, arguments);
    this.datasets[0].points.forEach(function(bar, i) {
      bar.label = originalLabels[i];
    });
  }
});

It’s enough that you set the labels for the first dataset even if you have multiple datasets – when building a multiTooltip, the label is picked from the first dataset.

Fiddle – http://jsfiddle.net/xjchy2dn/

Leave a comment