CODEWITHSUNDEEP
javascripthtmlchartschart.js
Surcouf
Surcouf

Reputation: 91

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

Upvotes: 1

Views: 74

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31431

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.

Upvotes: 1

Related Questions