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

by

2👍

✅

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>

Leave a comment