Is there a way to show the elements together when hovering on the same x-axis of a bar chart? Same with the image below.

I tried hover.mode ('single', 'label' and 'x-axis')

options: {
    hover: {
        // Overrides the global setting
        mode: 'label'
    }
}

Unfortunately it did not work for some reason. Is this not possible or did I miss something?

Code here: /

Thanks.

Is there a way to show the elements together when hovering on the same x-axis of a bar chart? Same with the image below.

I tried hover.mode ('single', 'label' and 'x-axis')

options: {
    hover: {
        // Overrides the global setting
        mode: 'label'
    }
}

Unfortunately it did not work for some reason. Is this not possible or did I miss something?

Code here: https://jsfiddle.net/jk4bg8a2/

Thanks.

• javascript
• jquery
• chart.js

3 Answers 3

The property is actually stored in tooltips like this :

options: {
    tooltips: {
        // Overrides the global setting
        mode: 'label'
    }
}

Check your updated fiddle to see it working, and here is its result :

For Chart.js 3.7.1 this is what worked for me

options: {
    interaction: {
        mode: 'index'
    }
}

Documented under ChartJs Interactions Documentation

For Chart.js 3, label mode is replaced by index and tooltips should be placed as tooltip in plugin object.

Below is working for chartjs 3.

plugins: {
  tooltip: {
    mode: 'index',
    position: 'average',
  }
}