'Cursor selects multiple points instead of just one - chart.js

When rendering a chart with Chart.js library, cursor selects multiple points instead of just one. When chart is small enough (ca. 12 records) it works as intended - only one point and measurement is selected with cursor. However when there are more records (ca. 96) it becomes very unreadable. I would like the chart to be able to hold between 4 to 96 records and still look readable.

Are there any settings I could use to eliminate this problem?

base html template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>{{ title }}</title>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script>
</head>

<body>
<div style="text-align:center">
<h1>{{ title }}</h1>

 <div>Last reading: {{ last_temperature }} ℃ </div>

<canvas id="chart" width="1200" height="800"></canvas>
<script>

      // bar chart data
      var barData = {
        labels : [
          {% for item in labels %}
            "{{ item }}",
          {% endfor %}
        ],

        datasets : [{
          bezierCurve : false,
          data : [
        {% for item in values %}
              {{ item }},
            {% endfor %}]
          }
    ]
      }

      Chart.defaults.global.tooltipYPadding = 16;
      Chart.defaults.global.tooltipCornerRadius = 0;
      Chart.defaults.global.responsive = false;

      // get bar chart canvas
      var mychart = document.getElementById("chart").getContext("2d");

      // draw bar chart
      var LineChartDemo = new Chart(mychart).Line(barData, {
        scaleStartValue: 0,
        scaleShowLabels: true,
        bezierCurve: false,
      });

</script>
</div>
</body>
</html>

How it looks: enter image description here

javascripthtmlchartschart.js


Solution 1:[1]

You are using a version of chart.js that is 7 years old. If you update to the latest version of chart.js (3.7.1) you dont have this problem.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 LeeLenalee

Related Questions