Home Chart.js Tooltip not showing all values of x-axis datasets in a specific point in line chart, issue with mode: 'index'

Questions

Chart.js Tooltip not showing all values of x-axis datasets in a specific point in line chart, issue with mode: 'index'

byMR

July 20, 2022

I used to use below configuration in Chart.js@2.9.4 in SvelteKit and it was showing all values of the dataset in a specific point of line chart. [REPL LINK]

options: {
    tooltips: {
        mode: 'index',
        intersect: false
    },
    hover: {
        mode: 'nearest',
        intersect: true
    },
    responsive: true
}

The output was:

After upgrading chart to chart.js@3.8.0 it isn’t showing all datasets at one point as above configuration.

This is the output in chart.js@3:

I am expecting it to show all datasets at one point.

Thank you in advance!

>Solution :

This is because you are updating to a new major version which has multiple major breaking changes, so is the tooltip config moved from the options.tooltips namespace to the options.plugins.tooltip namespace, if you change this it works as expected. I suggest you read the migration guide first since there are more things changed that will break if you only update the version number.

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'pink'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'orange'
      }
    ]
  },
  options: {
    plugins: {
      tooltip: {
        mode: 'index',
        intersect: false
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script>
</body>