Chart.js sum y values depending on time unit

Question

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/[email protected]/build/global/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-adapter-luxon.min.js"></script>
<div>
  <canvas id="tests-chart"></canvas>
</div>

Answer 1

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/[email protected]/build/global/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-adapter-luxon.min.js"></script>

<div>
  <canvas id="tests-chart"></canvas>
</div>