Search code examples
chart.jsreact-chartjs-2

How to have two consecutive points in a line chart be in the same category?


I'm trying to create a line chart that can have up to two points in one category in chartjs. In the example, the labels and data are each passed as arrays, so each label can only have one point. I would like to have up to two points.

I tried to put extra entries in the data, but the extra entry did not do anything.

    data: {
        datasets: [{
            data: [10, 20, 30, 40, 50, 60, 70] // Only the first 6 entries are shown.
        }],
        labels: ['January', 'February', 'March', 'April', 'May', 'June']
    },

Solution

  • I ended up figuring the problem out with the following, using the parsing option:

        data: {
            datasets: [{
                data: [
                    {number: 10, month: 'January'},
                    {number: 20, month: 'February'}
                ]
            }]
        },
    

    and in the options

        parsing: {
          xAxisKey: "number",
          yAxisKey: "month"
        }