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

user_9441080 0
Viewed 167

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:

enter image description here

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:

enter image description here

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

Thank you in advance!

sveltekit chart.js svelte javascript
1 Answers

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>

user_86829830
Related