Chartjs is graphing my values at positions 0,1,2 rather than their values along the x axis

Viewed 35

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.

1 Answers

For anybody in the future, I found that switching to an older version of chartjs made this work. I don't know if there's a new way to plot two graphs or what but I switched to version 2.9.X and it worked

Related