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>
Просьба, подсказать, как корректно группировать данные чтобы на выходе получилось что-то подобное,
