Линейный график Chartjs разбирается, когда значение x совпадает с меткой

Question

Я использую react-chartjs-2, чтобы нарисовать линейный график, но когда я использую следующий код

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',
        },
    ],
};

, моя последняя точка отображается дважды.

Когда я изменяю свои метки на 0, 10, 20 и т. Д., Это становится еще более безумным, и я получаю следующий результат.

Answer 1

Я исправил это, установив линейный тип в xAxes:

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