How can I use an array of {x,y} objects to make a chart?

Question

I'm trying to use Chart.js (v3.4.1) to make a simple line chart. My data is an array of objects, where each one has both x and y properties, each of which is an integer. For example: [{x: 12, y: 122}]

My minimal proof of concept is as follows:

<!DOCTYPE html>
<html>
    <head>
        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.min.js"
            integrity="sha512-5vwN8yor2fFT9pgPS9p9R7AszYaNn0LkQElTXIsZFCL7ucT8zDCAqlQXDdaqgA1mZP47hdvztBMsIoFxq/FyyQ=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer">
        </script>
    </head>
    <body>
        <canvas id="myCanvas"></canvas>
    </body>
    <script type="text/javascript">
        new Chart('myCanvas', {
            type: 'line',
            data: {
                datasets: [{
                    data: [
                        {x: 1, y: 2},
                        {x: 5, y: 6}
                    ]
                }]
            }
        });
    </script>
</html>

Here is Chart.JS's own documentation on doing this: https://www.chartjs.org/docs/latest/general/data-structures.html#object

Alas, while the y values are respected, the x values appear to be completely ignored. When hovering over a point, "0" is displayed as the point's label.

Temporary Workaround

This leaves a sour taste in my mouth, but does work:

const myData = [
    {x: 1, y: 2},
    {x: 5, y: 6}
];

new Chart('myCanvas', {
    type: 'line',
    data: {
        labels: myData.map(row=>row.x),
        datasets: [{
            data: myData
        }]
    }
});

Can you explain how this chart is supposed to look like? Right now there's three axes: the array index, x and y. — user5734311
– user5734311, Commented Jul 20, 2021 at 19:38
Thanks for your comment @ChrisG. I'm expecting to see a diagonal line from the lower left to the upper right, in which the points are labeled (1,2) and (5,6). I'm letting ChartJS handle the scaling. In reality, I'm doing almost exactly this - the only differences being that there are more data points (~100) and I'm setting a color. — Navigatron
– Navigatron, Commented Jul 20, 2021 at 19:44
Looks like ChartJS isn't a suitable tool to visualize your dataset. — user5734311
– user5734311, Commented Jul 20, 2021 at 19:51

Navigatron · Accepted Answer · 2021-07-20 20:23:45Z

Credit goes to @Etimberg in this github issue for the answer.

ChartJS axis can be in multiple "modes". On line charts, the default mode of the X-axis is "category". By manually changing this to "linear", you can plot points in lines as you expect.

Evert's Codepen

<html>
    <head>
        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.min.js"
            integrity="sha512-5vwN8yor2fFT9pgPS9p9R7AszYaNn0LkQElTXIsZFCL7ucT8zDCAqlQXDdaqgA1mZP47hdvztBMsIoFxq/FyyQ=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer">
        </script>
    </head>
    <body>
        <canvas id="myCanvas"></canvas>
    </body>
    <script type="text/javascript">
        new Chart('myCanvas', {
            type: 'line',
            data: {
                datasets: [{
                    data: [
                        {x: 1, y: 2},
                        {x: 5, y: 6}
                    ]
                }]
            },
            options: {
              scales: {
                x: {
                  type: 'linear'
                }
              }
            }
        });
    </script>
</html>

Collectives™ on Stack Overflow

How can I use an array of {x,y} objects to make a chart?

Temporary Workaround

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Temporary Workaround

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related