Как нарисовать график Chart.js, чтобы по оси X стояли только часы, но данные отображались поминутно?

Question

[Иван Карманов]

Имеется API, которое возвращает количество пользователей онлайн в таком формате:

const data = [
    ['2022-05-07 13:45:00', 14],
    ['2022-05-07 13:47:00', 13],
    ['2022-05-07 13:49:00', 12],
    ['2022-05-07 13:51:00', 10],
    ['2022-05-07 13:53:00', 8],
    ['2022-05-07 13:54:00', 18],
    ['2022-05-07 16:34:00', 9],
    ['2022-05-07 17:15:00', 18]
];

Хочу отобразить на графике статистику, но мне не надо на оси X писать каждую минуту, хочется чтобы только часы отображались, но при этом сам график отображал изменения не только по часам, но и промежуточные значения. Попробовал следующий код:

var chartData = [];
data.forEach(item => {
    var date = new Date(item[0])
    chartData.push({
        x: date,
        y: item[1]
    })
})
var ctx = document.getElementById('myChart');
const chart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            data: chartData
        }]
    },
    options: {
        scales: {
            x: {
                type: 'time',
                time: {
                    unit: 'hour',
                    displayFormats: {
                        hour: 'hh'
                    }
                }
            }
        }
    }
});

Но при таком коде график растягивается сильно и не влезает на экран, явно что-то не так. Подскажите, как реализовать такой график? Или может использовать вообще другую библиотеку для этого?

Comments

[rPman]

Выложи рабочий пример на jsfiddle посмотрим что не так

Answer 1

[Максим К]

Я бы взял ваши даные, закинул в excel, посмотрел бы как могут выглядеть графики потом подгонял, может ваши данные надо сократить и потом только отображать

Comments

[Иван Карманов]

Данные в sqlite сейчас. Сокращать ничего не надо, нужна подробная статистика