[Chartjs]-Is it possible to combine two Y axes into a single tooltip with ChartJS 2?

10👍

References:

Chartjs Docs: Tooltip Configuration – Interaction Modes

mode : index – Finds item at the same index. If the intersect setting is true,
the first intersecting item is used to determine the index in the
data. If intersect false the nearest item is used to determine the
index.

Update the chart options to include the tooltips configurations. Set the mode to index

tooltips : {
    mode : 'index'
},

The updated options would look like this.

const CHART_OPTIONS = {
  tooltips : {
    mode : 'index'
  },
  scales:
  {
    xAxes: [{
      ticks: {
        display: false,
      },
    }],
    yAxes: [
      {
        type: 'linear',
        id: 'y-axis-0',
        display: false,
        position: 'left',
      },
      {
        type: 'linear',
        id: 'y-axis-1',
        display: false,
        position: 'right',
      },
    ],
  },
};

Check updated sample which include tooltips mode set to index

1👍

If tooltip options doesn’t worked for you as mentioned in Nkosi answer.

Try using the below option.

interaction: {
   mode: 'index'
},

In my case interaction worked so, I shared.

Leave a comment