Chartjs - Fill dates between given labels - chart.js

Question

I've been experimenting with Chartjs for several hours now and I'm not sure if this is possible. I have some data that is sorted date wise but not all dates are included. For example:
const salesChart = new Chart(document.getElementById('graph-sales'),
{
type: 'line',
data: {
labels: ['Aug 23','Aug 26','Aug 31','Sep 02'],
datasets: [{
label: 'Sales',
borderColor: '#ccc',
data: [2750.00,1100.00,3080.00,4320.00],
}]
}
}
);
Chartjs plots this data as 4 datapoints and joins them with a line like so
This is fine, but I want intermediate days to be added on the chart with datapoint value being 0. So essentially it would be like passing this data:
labels: ['Aug 23','Aug 24','Aug 25','Aug 26','Aug 27','Aug 28','Aug 29','Aug 30','Aug 31','Sep 01','Sep 02'],
datasets: [{
label: 'Sales',
borderColor: '#ccc',
data: [2750.00,0,0,1100.00,0,0,0,0,3080.00,0,4320.00],
}]
I've looked into timescales but can't get them to work. The docs says I need a time adapter but there's no example of it in use so I'm not sure what that means.

Answer 1

It would probably be easier to do this on the backend serving up the data; but this code works if you want to do it in JavaScript on the frontend.
My method was to use a defined self-executing function which returns an array containing two arrays.
The first array is called finalLabels and contains all date strings between, and including, the dates provided in the original labels.
Which gives us ['Aug 23', 'Aug 24', 'Aug 25', 'Aug 26', 'Aug 27', 'Aug 28', 'Aug 29', 'Aug 30', 'Aug 31', 'Sep 01', 'Sep 02']
The second returned array is called finalDatas and contains all of the original data values at the same index of the original label; and a value of zero where the value wasn't previously defined.
Which gives us: [2750, 0, 0, 1100, 0, 0, 0, 0, 3080, 0, 4320]
Working Codepen: https://codepen.io/vpolston/pen/NWMgwOw
My account doesn't have ability to embed pictures, but this is what you end up with: image of final chart created.
JS
const labels = ['Aug 23','Aug 26','Aug 31','Sep 02'];
const data = [2750.00,1100.00,3080.00,4320.00];
const datasets = (function () {
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul","Aug", "Sep", "Oct", "Nov", "Dec"];
/* define start and end date from labels and create date objects */
const startDateString = labels[0];
const endDateString = labels[labels.length - 1];
const startDateObj = new Date(startDateString);
const endDateObj = new Date(endDateString);
/* create empty dates array to hold dates within range */
let dates = [];
/*
create currentDateObj var to increment in while loop
loop through, add currentDateObj to array, increment until false
*/
let currentDateObj = new Date(startDateString);
while( currentDateObj <= endDateObj ){
/* format date to match the provided label and push to dates array */
let dateString = currentDateObj.toDateString();
let month = months[currentDateObj.getMonth()];
let day = currentDateObj.getDate();
if( day < 10 ){
day = '0' + day
};
let date = month + ' ' + day;
dates.push(date);
/* increment CurrentDateObj */
currentDateObj.setDate(currentDateObj.getDate() + 1);
};
/*
use counter to loop through original datas
*/
let valueExistsCounter = 0;
let finalLabels = [];
let finalDatas = [];
for( const [index, date] of dates.entries() ){
if( labels.includes(date) ){
/* if date was provided in labels get the data value */
finalLabels.push(date);
finalDatas.push(data[valueExistsCounter]);
valueExistsCounter += 1
} else {
/* set date value to 0 */
finalLabels.push(date);
finalDatas.push(0);
}
};
return [finalLabels, finalDatas]
}());
const finalLabels = datasets[0];
const finalDatas = datasets[1];
/* now we can build the chart */
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: finalLabels,
datasets: [{
label: 'Sales',
'fill': true,
borderColor: '#ccc',
backgroundColor: 'rgba(204,204,204,0.5)',
tension: 0.2,
data: finalDatas
}]
},
options: {
scales: {
x: {
grid: {
color: 'rgba(204,204,204,0.1)'
}
},
y: {
grid: {
color: 'rgba(204,204,204,0.1)'
}
}
}
}
});
HTML
<!-- Canvas -->
<div class="chartContainer">
<canvas id="myChart"></canvas>
</div>
<!-- include Chart.js 3.9.1 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.js" integrity="sha512-d6nObkPJgV791iTGuBoVC9Aa2iecqzJRE0Jiqvk85BhLHAPhWqkuBiQb1xz2jvuHNqHLYoN3ymPfpiB1o+Zgpw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
CSS
body {
background-color: #0d1117;
}
.chartContainer {
width: 800px;
height: 400px;
}
I think that covers it? If that was helpful please mark answered.