CODEWITHSUNDEEP
javascriptchart.js
tsh
tsh

Reputation: 4738

Increase point radius when tootip shown for certain data on Charts.js

I'm using Chart.js. I want make the point hidden by default, but when a tooltip shown for certain data, highlight the data by increase the radius of its point.

Following codes is what I had tried. But it only increase the radius of point if mouse hover on it. I want the radius increased as long as the tooltip is shown.

Thanks for any helps.

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',
    },
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="chart" />

Upvotes: 2

Views: 2069

Answers (1)

IronGeek
IronGeek

Reputation: 4883

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" />

Upvotes: 7

Related Questions