I'm currently facing a challenge while trying to create a line graph using ChartJs to plot numerous points. The graph works perfectly fine when I have 600000000 values or less (6E8), but it fails to display anything beyond that threshold. My goal is to plot at least 50E8 values, but so far I haven't been able to find a solution in the ChartJs documentation regarding this issue. Below is the code I am working with:
<div id="canvas-holder">
<canvas id="myChart" width="800" height="300"></canvas>
</div>
<script>
var options = {
type: 'line',
data: {
labels: {{ labels | safe }},
datasets: [{
label: 'Value',
data: {{ values | safe }},
backgroundColor: 'white',
borderWidth: 1,
order: 2
},
{
label: 'Peak value',
data: [{
x: {{ labels2[0] | safe }},
y: {{ values2[0] | safe }}
}, {
x: {{ labels2[1] | safe }},
y: {{ values2[1] | safe }}
}, {
x: {{ labels2[2] | safe }},
y: {{ values2[2] | safe }}
}],
backgroundColor: 'black',
borderWidth: 5,
pointRadius: 5,
showLine: false,
order: 1
}
]
},
options: {
responsive: true,
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
};
var ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, options);