Group data by weekdays in Highchart

I’m plotting a graph that needs to combine data of a selected date range to weekdays i mean if i selected a date range from ex: 2021-05-01 to 2021-05-31 in that consider 2021-05-01,2021-05-08,2021-05-15 these days are Friday so i need to combine datas of these dates and show as one data with label friday. With the current options that i used the chart is plotting like this. Is there any ways to display it correctly.

Demo Fiddle

This is the way that i currently getting the result

enter image description here

This is the result that i’m expecting

enter image description here

These are the current configd that i’m using in the highchart.

Highcharts.chart("multistackedbarchart-II", {
    chart: {
        type: "column",
    },
    title: {
        text: "Sent/Received Comparison",
    },
    xAxis: {
        title: {
            text: "Day",
        },
        categories: [labels],
    },
    yAxis: {
        min: 0,
        title: {
            text: "",
        },
        stackLabels: {
            enabled: false,
            style: {
                fontWeight: "bold",
                color:
                    // theme
                    (Highcharts.defaultOptions.title.style && Highcharts.defaultOptions.title.style.color) ||
                    "gray",
            },
        },
    },
    legend: {
        align: "center",
        verticalAlign: "bottom",
        x: 0,
        y: 0,
    },
    tooltip: {
        headerFormat: "<b>{point.x}</b><br/>",
        pointFormat: "{series.name}: {point.y}",
    },
    plotOptions: {
        column: {
            stacking: "normal",
            dataGrouping: {
                forced: true,
                units: [['day', [1]]]
            }
        },
    },
    series: chartdata.multistackedbarchart,
    credits: {
        enabled: false,
    },
});
Highcharts.setOptions({ lang: { noData: "No Data Available" } });

Answer

You can make a special function to do this sorting by using Array.map() and Array.filter() methods:

const categories = [
            "2021-08-04",
            "2021-08-05",
            "2021-08-06",
            "2021-08-07",
            "2021-08-08",
            "2021-08-09",
            "2021-08-10",
            "2021-08-11",
            "2021-08-12",
            "2021-08-13",
            "2021-08-14",
            "2021-08-15",
            "2021-08-16",
            "2021-08-17",
            "2021-08-18",
            "2021-08-19",
            "2021-08-20",
            "2021-08-21",
            "2021-08-22",
            "2021-08-23",
            "2021-08-24",
            "2021-08-25",
            "2021-08-26",
            "2021-08-27",
            "2021-08-28",
            "2021-08-29",
            "2021-08-30",
            "2021-08-31",
            "2021-09-01",
            "2021-09-02",
            "2021-09-03",
            "2021-09-04",
            "2021-09-05",
            "2021-09-06",
            "2021-09-07",
            "2021-09-08",
            "2021-09-09",
            "2021-09-10",
            "2021-09-11",
            "2021-09-12",
            "2021-09-13",
            "2021-09-14",
            "2021-09-15",
            "2021-09-16",
            "2021-09-17",
            "2021-09-18",
            "2021-09-19",
            "2021-09-20",
            "2021-09-21",
            "2021-09-22",
            "2021-09-23",
            "2021-09-24",
            "2021-09-25",
            "2021-09-26",
            "2021-09-27",
            "2021-09-28",
            "2021-09-29",
            "2021-09-30",
            "2021-10-01",
            "2021-10-02",
            "2021-10-03",
            "2021-10-04",
            "2021-10-05",
            "2021-10-06",
            "2021-10-07",
            "2021-10-08",
            "2021-10-09",
            "2021-10-10",
            "2021-10-11",
            "2021-10-12"]
 const messagesSent = [ 32,
            60,
            71,
            3,
            1,
            25,
            16,
            23,
            28,
            25,
            2,
            1,
            43,
            49,
            32,
            35,
            26,
            2,
            1,
            8,
            36,
            47,
            15,
            20,
            2,
            1,
            2,
            18,
            20,
            30,
            43,
            4,
            4,
            15,
            14,
            48,
            39,
            3,
            2,
            0,
            48,
            34,
            15,
            9,
            1,
            3,
            1,
            85,
            27,
            72,
            11,
            4,
            2,
            0,
            29,
            13,
            21,
            15,
            32,
            2,
            0,
            58,
            37,
            37,
            24,
            5,
            1,
            0,
            0,
            0]
            
            
const messagesReceived = [29,
            79,
            80,
            7,
            2,
            24,
            32,
            23,
            44,
            42,
            3,
            1,
            65,
            69,
            46,
            47,
            23,
            3,
            1,
            28,
            35,
            65,
            22,
            19,
            4,
            1,
            7,
            10,
            32,
            31,
            13,
            8,
            2,
            4,
            48,
            53,
            46,
            7,
            4,
            0,
            48,
            40,
            23,
            18,
            2,
            6,
            2,
            79,
            25,
            86,
            9,
            8,
            5,
            0,
            25,
            18,
            18,
            14,
            37,
            2,
            0,
            52,
            70,
            27,
            25,
            17,
            1,
            0,
            0,
            0]
            
const organizeData = (days, sent, received) => {
  const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
  
  // get name of weekday
  const getDayOfWeek = date => {
    const dayOfWeek = new Date(date).getDay();    
    
    return isNaN(dayOfWeek) ? null : dayNames[dayOfWeek];
  }
  
  
  return dayNames.map((dayName) => {
    let correspondingMessagesSent = []
    let correspondingMessagesReceived = []
    
    const matchedDays = days.filter((day, index) => {
      if(dayName === getDayOfWeek(day)) {
        correspondingMessagesSent.push(sent[index])
        correspondingMessagesReceived.push(received[index])
        return day
      }
    })
    
    return { [dayName]: { dates: matchedDays, 
                          sent: correspondingMessagesSent,
                          received: correspondingMessagesReceived} }
  })
}



console.log(organizeData(categories, messagesSent, messagesReceived))
/* This is not a part of answer. It is just to give the output fill height. So IGNORE IT */
.as-console-wrapper { max-height: 100% !important; top: 0; }