Search code examples
javascriptchart.jssveltesveltekit

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

I used to use below configuration in [email protected] 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 [email protected] 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!

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>