New to Chart.js, I was wondering if there is a built in method to sum y values depending on time unit.
Asking here after a lot of search in the docs.
For now, the bar for March shows 20 and the bar for June shows 10.
I want to have 25 for March and 15 for June, so to sum y for the same month.
const ctx = document.getElementById("tests-chart")
const testsChart = new Chart(ctx, {
type: "bar",
data: {
datasets: [
{
label: 'Dataset 1',
data: [
{ x: "24/03/2022", y: 20 },
{ x: "25/03/2022", y: 5 },
{ x: "24/06/2022", y: 10 },
{ x: "25/06/2022", y: 5 },
],
backgroundColor: 'rgb(255, 99, 132)',
},
],
},
options: {
scales: {
x: {
type: "time",
time: {
parser: "dd/MM/yyyy",
unit: "month",
// Luxon format string
tooltipFormat: "MM",
round: 'month'
},
},
},
},
})<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@2.3.1/build/global/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.1.0/dist/chartjs-adapter-luxon.min.js"></script>
<div>
<canvas id="tests-chart"></canvas>
</div>You can manipulate your dataset as mentioned below and achieve your expected output.
const ctx = document.getElementById("tests-chart");
const data =[
{ x: "24/03/2022", y: 20 },
{ x: "25/03/2022", y: 5 },
{ x: "24/06/2022", y: 10 },
{ x: "25/06/2022", y: 5 }
];
let updatedData =[];
let tempDateCollection =[];
data.map((yData , index)=> {
const formatedDate = moment(yData.x, "DD/MM/YYYY").format('MMM/YYYY');
if(tempDateCollection.includes(formatedDate)){
const index = tempDateCollection.indexOf(formatedDate);
const element = updatedData[index];
updatedData[index] = {...element, y: element.y + yData.y}
} else{
tempDateCollection.push(formatedDate);
updatedData.push(yData);
}
})
const testsChart = new Chart(ctx, {
type: "bar",
data: {
datasets: [
{
label: 'Dataset 1',
data:updatedData,
backgroundColor: 'rgb(255, 99, 132)',
},
],
},
options: {
scales: {
x: {
type: "time",
time: {
parser: "dd/MM/yyyy",
unit: "month",
// Luxon format string
tooltipFormat: "MM",
round: 'month'
},
},
},
},
})<script type = "text/JavaScript" src = " https://MomentJS.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@2.3.1/build/global/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.1.0/dist/chartjs-adapter-luxon.min.js"></script>
<div>
<canvas id="tests-chart"></canvas>
</div>