I have two line graphs, the first is working fine and the second is just 3 points that lies on top of the first one to signify the main peak point, the peak to the left, and the peak to the right. I am passing in a value and labels array for the original line graph, and that works fine. I am also passing in a values2 and a labels2 array for the peak points. These values are correct. Both are float values and both look something like this below, with different values each time obviously
values2 = [-76.334, -90.648, -89.625]
labels2 = [1.83, 1.93546, 1.76815]
this is my chartjs code from my html file
<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);
If I'm understanding chartjs correctly, I believe that this should be working. Each value is mapped to it's corresponding x and y values, I'm not sure what's wrong with this. I would appreciate any help.