0
231
ViewsCursor 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:
·
Juan Pablo Isaza
1 answers
Answer question0
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.
·
Juan Pablo Isaza
Report
Answer question