[Chartjs]-Hover mode on Chart.js

by

20👍

Yes, you can use chart.js to configure tooltips to get a similiar behavior to the chart that you referenced.

For more information, check out the mode tooltip config option and hover config options for your needs. Here is an example.

options: {
  responsive: true,
  title:{
    display:true,
    text:'Chart.js Line Chart'
  },
  tooltips: {
    mode: 'index',
    intersect: false,
  },
 hover: {
    mode: 'nearest',
    intersect: true
  },
  scales: {
    xAxes: [{
      display: true,
      scaleLabel: {
        display: true,
        labelString: 'Month'
      }
    }],
    yAxes: [{
      display: true,
      scaleLabel: {
        display: true,
      },
    }]
  }
}

Here is a codepen example demonstrating the behavior that matches your example.

14👍

For chart version > 3 rename the object tooltips to tooltip and place it inside the plugin object.

options: {
      plugins: {
                 legend: {
                 display: false
                 },
                 tooltip: {
                 mode: 'index',
                 intersect: false
                 }
      },
      hover: {
             mode: 'nearest',
             intersect: false
             }


}

9👍

tooltips: {
  mode: 'x-axis'
},

^^ That will bring up the tooltip when you hover over any y-axis position. If you only want it to show up when you hover over a point on a line, use this:

tooltips: {
  mode: 'label'
},

Leave a comment