[Chartjs]-Increase point radius when tootip shown for certain data on Charts.js

by

7👍

✅

Try setting the mode and intersect options for hover with the same value used for tooltips. 

...
hover: {
  mode: 'index',
  intersect: false
}
...

This way the hover event will be triggered the same way the tooltips is triggered.

var myChart = new Chart('chart', {
  type: 'line',
  data: {
    datasets: [
      {
        label: "l1",
        borderColor: `hsla(150, 60%, 33%, 1)`,
        backgroundColor: `hsla(150, 60%, 33%, 0.8)`,
        fill: false,
        data: [{ x: 1, y: 2 }, { x: 2, y: 3 }],
      },{
        label: "l2",
        borderColor: `hsla(210, 60%, 33%, 1)`,
        backgroundColor: `hsla(210, 60%, 33%, 0.8)`,
        fill: false,
        data: [{ x: 1, y: 2 }, { x: 2, y: 1 }],
      }
    ]
  },
  options: {
    elements: {
      point: {
        radius: 1,
        hoverRadius: 4,
      },
    },
    tooltips: {
      mode: 'index',
      intersect: false,
      position: 'nearest',
    },
    hover: {
      mode: 'index',
      intersect: false          
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="chart" />

Leave a comment