Chartjs-Chartjs – don't show all x-axis data points, but show all in tooltips

by

1👍

✅

You should label your data correctly from 1 to 7 and filter the xAxis labels in the callback function.

scales: {
  xAxes: [{
    ticks: {
      beginAtZero: true,
      callback: function(value, index, values) {
        if (index === 0 || index === 1 || index === count - 1) { // count = yourNumberOfDataValues
          return value
        }
      }
    },
    gridLines: {
      display: false
    },
  }]
},

Per default the tooltip uses the xAxis label of a point which returns undefined when there’s no xAxis label. You have to get the right label from your label array.

tooltips: {
    callbacks: {
      title: function(tooltipItem, data) {
        return sData.label[tooltipItem[0].index] // sData.label is your array with all data labels
      }
    }
  }

Complete code and example in this JSBin.

Leave a comment