show label in tooltip but not in x axis for chartjs line chart

Question

I currently am using a line chart with chart.js, and have a label set that looks like this [\"January 2015\", \"February 2015\", \"March 2015\", \"April 2015\", \"May

Answer 1

This was one of the trickiest things that I deal with while using ChartJs.

I'm going to share my solution: I just played with the chart options. First I will define some properties for my xAxe. Note that I'm formatting the label using the callback:

scales: {
    xAxes: [{
       id: "x-", stacked: false, ticks: { 
       autoSkip: false, callback: (label) => { return label + "TEST" } }
       }
    ]}

To format the tooltip title I'm going to use callbacks options for the tooltips:

    tooltips: {
        callbacks: {
            title : (tooltipItems, data) => {
               var labelIndex = tooltipItems[0].index;
               var realLabel = data.labels[labelIndex];
               return realLabel + "TOOLTIP";
      }
    }
  }

Using the chart options like that, I'm able to show different content for the x-axis labels and the corresponding tooltip titles:

enter image description here

You can find the full sample here.

Hope this helps.