Chart.js - Hover labels to display data for all data points on x-axis

For Chart.js 3.3.2, you can use @baburao's approach with a few changes. You can check the documentation. Put tooltip in plugins. Example:

...
options: {
    plugins: {
        tooltip: {
            mode: 'nearest',
            intersect: false
        }
    }
}
...

Is there a simple way to accomplish this?

YES !! There is a quite straightforward way to accomplish this. If you would have read the documentation, you could have found that pretty easily.

Anyway, basically you need to set the tooltips mode to index in your chart options, in order to accomplish the behavior you want.

...
options: {
   tooltips: {
      mode: 'index'
   }
}
...

Additionally, you probably want to set the following:

...
options: {
   tooltips: {
      mode: 'index',
      intersect: false
   },
   hover: {
      mode: 'index',
      intersect: false
   }
}
...

This will make it so all of the expected hover/label interactions will occur when hovering anywhere on the graph at the nearest x-value.

From the Documentation :

# index
Finds item at the same index. If the intersect setting is true, the first intersecting item is used to determine the index in the data. If intersect false the nearest item, in the x direction, is used to determine the index.

Here is a working example :

var ctx = document.getElementById('canvas').getContext('2d');
var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ['Jan 01', 'Jan 02', 'Jan 03'],
      datasets: [{
         label: 'Apples Sold',
         data: [3, 5, 1],
         borderColor: 'rgba(255, 99, 132, 0.8)',
         fill: false
      }, {
         label: 'Oranges Sold',
         data: [0, 10, 2],
         borderColor: 'rgba(255, 206, 86, 0.8)',
         fill: false
      }, {
         label: 'Gallons of Milk Sold',
         data: [5, 7, 4],
         borderColor: 'rgba(54, 162, 235, 0.8)',
         fill: false
      }]
   },
   options: {
      tooltips: {
         mode: 'index',
         intersect: false
      },
      hover: {
         mode: 'index',
         intersect: false
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="canvas"></canvas>

I know this is an old post, but in a time I needed to divide a bar on multiple datasets, but the labels to be keeped as original values:

eg:

dataset 1: Totals: 10 15 10 
dataset 2: Red: 4 5 9 
dataset 3: Blue: 4 2 1

In my chart I want to show the "Totals" bar and to collor a part of it in red/blue or "the rest" (which is Totals color). I'll don't write the code to modify the datasets, but I'll complete @busterroni answer for chartjs v3+

plugins: {
   tooltip: {
     mode: 'index',
     intersect: false,
     callbacks: {
       label: (item) => item.dataset.label + ': ' + 
          this.originalValues[item.datasetIndex].data[item.dataIndex]
     }
   }
}