ChartJS grouping date by day/month

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

строю график следующим скриптом:

<script>
    const config = {
        type: 'line',

        data: {
            labels: [{% for item in labels %} new Date('{{item}}'), {% endfor %}],
            datasets: [{
                label: 'Test String Dates',
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1,
                hoverBorderWidth: 3,
                hoverBorderColor: '#000',
                data: [{% for item in values%} {{item}}, {% endfor %}],
            }]
        },
        options: {
            title: {
                display: true,
                text: 'test string date time',
                fontSize: 25,
            },
            legend: {
                position: 'right',
                labels: {
                    fontColor: '#000'
                }
            },
            tooltips: {
            },
            scales: {
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'mg/m3',
                        fontColor: '#000',
                        fontWeight: 'bold',
                        fontSize: 25
                    }
                }],
                xAxes: [{
                    offset: true,
                    beginAtZero: true,
                    type: 'time',
                    time: {
                        parser: 'HH:mm:ss a',
                        unit: 'minutes',
                        displayFormats: {
                            quarter: 'MMM YYYY'
                        }
                    },
                    ticks: {
                        source: 'auto'
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Recording Time',
                        fontColor: '#000',
                        fontWeight: 'bold',
                        fontSize: 25
                    }
                }]
            },
            responsive: true,
            maintainAspectRatio: false,
            elements: {
                point: {
                    radius: 0
                },
                line: {
                    tension: 0
                }
            },
        }

    };

    const ctx = document.getElementById('cnt').getContext('2d');
    new Chart(ctx, config);
</script>

Просьба, подсказать, как корректно группировать данные чтобы на выходе получилось что-то подобное,

введите сюда описание изображения


Ответы (0 шт):