Search code examples
javascriptchart.jsreact-chartjs

Chartjs line chart gets all scrambled up when an x value coincides with a label

I'm using react-chartjs-2 to draw a line chart but when I use the following code

const data = {
    labels: [0, 11, 21, 31, 41, 50],
    datasets: [
        {
            label: 'Radiant',
            data: [1, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50].map((e) => ({
                x: e,
                y: Math.round(50 + Math.random() * 30),
            })),
            fill: false,
            borderColor: 'green',
            backgroundColor: 'green',
        },
        {
            label: 'Dire',
            data: [1, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50].map((e) => ({
                x: e,
                y: Math.round(50 + Math.random() * 30),
            })),
            fill: false,
            borderColor: 'red',
            backgroundColor: 'red',
        },
    ],
};

my last point gets shown twice.

enter image description here

When I modify my labels to be 0, 10, 20, etc. it gets even crazier and I get the following result.

enter image description here

Solution

  • I fixed it by setting the type to be linear in xAxes:

        scales: {
        xAxes: [
            {
                type: 'linear',
            },
        ],
    },