CODEWITHSUNDEEP
javascriptchart.js
amarknadadmin
amarknadadmin

Reputation: 23

chartjs hover over data without hoveringing on line

When you hover over a specific data point on a chartjs linechart the point's value can be shown. But let's say you hover on the graph, not on a specific data point but over the "empty space". In that case there should be some function to show the values of the points vertically aligned with the pointer. Does any such solution exist?

Basically the reason I'm asking is to be able to make mobile-friendly graphs and it can be difficult/irritating for the user to try and hit the small data points with their fingers.

Upvotes: 0

Views: 1810

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31351

Yes, you can set intersect to false in the tooltip config:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'orange'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'pink'
      }
    ]
  },
  options: {
    plugins: {
      tooltip: {
        intersect: false
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>

Upvotes: 1

Related Questions