CODEWITHSUNDEEP
javascriptjquerychart.js
raz
raz

Reputation: 409

Chartjs - show elements in all datasets on hover using bar chart

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.

enter image description here

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.

Upvotes: 8

Views: 8574

Answers (3)

Lukas
Lukas

Reputation: 51

For Chart.js 3.7.1 this is what worked for me

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

Documented under ChartJs Interactions Documentation

Upvotes: 4

discover
discover

Reputation: 559

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',
  }
}

Upvotes: 3

tektiv
tektiv

Reputation: 14187

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 :

enter image description here

Upvotes: 14

Related Questions