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

by

3👍

✅

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>

Leave a comment