'how to create area highchart for large amount of data based date?

I am creating highchart in react in which I have thousand of data. I have to map that data based on date and completion status(on that particular date how many status got completed).I am not able to create area chart for that and how to map whole data(total 522) in highchart for different dates. Please suggest any help would be highly appreciated. Thank you.

I am using below data

var data1 = [{
    Completion_Status: "Completed",
    End_Date: "12/16/2019",
    ID: 10002,
    Availability: "No",
    Received: "12-09-2019",
    Manufacture: "7-21-2013",
}, {
    Completion_Status: "in progress",
    End_Date: "11/15/2018",
    ID: 10002,
    Availability: "No",
    Received: "12-09-2019",
    Manufacture: "7-21-2013",
}, {
    Completion_Status: "not started",
   End_Date: "01/02/2021",
    ID: 10002,
    Availability: "No",
    Received: "12-09-2019",
    Manufacture: "7-21-2013",
},
{
Completion_Status: "Completed",
    End_Date: "12/16/2019",
    ID: 10002,
    Availability: "No",
    Received: "12-09-2019",
    Manufacture: "7-21-2013",
},
{
    Completion_Status: "Completed",
    End_Date: "08/19/2019",
    ID: 10002,
    Availability: "No",
    Received: "12-09-2019",
    Manufacture: "7-21-2013",
}, {
    Completion_Status: "in progress",
    End_Date: "07/19/2020",
    ID: 10002,
    Availability: "No",
    Received: "12-09-2019",
    Manufacture: "7-21-2013",
},
{
    Completion_Status: "Completed",
    End_Date: "08/19/2019",
    ID: 10002,
    Availability: "No",
    Received: "12-09-2019",
    Manufacture: "7-21-2013",
},{
    Completion_Status: "not started",
    End_Date: "03/14/1990",
    ID: 10002,
    Availability: "No",
    Received: "12-09-2019",
    Manufacture: "7-21-2013",
},
{
Completion_Status: "Completed",
    End_Date: "12/16/2019",
    ID: 10002,
    Availability: "No",
    Received: "12-09-2019",
    Manufacture: "7-21-2013",
},
{
    Completion_Status: "Completed",
   End_Date: "05/16/2020",
    ID: 10002,
    Availability: "No",
    Received: "12-09-2019",
    Manufacture: "7-21-2013",
},
{
    Completion_Status: "Completed",
   End_Date: "05/16/2020",
    ID: 10002,
    Availability: "No",
    Received: "12-09-2019",
    Manufacture: "7-21-2013",
},{
    Completion_Status: "in progress",
   End_Date: "01/06/1900",
    ID: 10002,
    Availability: "No",
    Received: "12-09-2019",
    Manufacture: "7-21-2013",
}, {
    Completion_Status: "not started",
    End_Date: "05/31/2020",
    ID: 10002,
    Availability: "No",
    Received: "12-09-2019",
    Manufacture: "7-21-2013",
},
{
    Completion_Status: "Completed",
   End_Date: "05/16/2020",
    ID: 10002,
    Availability: "No",
    Received: "12-09-2019",
    Manufacture: "7-21-2013",
},
{
    Completion_Status: "Completed",
   End_Date: "05/16/2020",
    ID: 10002,
    Availability: "No",
    Received: "12-09-2019",
    Manufacture: "7-21-2013",
},
];

Solution 1:^[1]

Set the boost.seriesThreshold to boost series, below example how to add boost in area chart.

let data1 = [],
  data2 = []

for (let i = 0; i < 10000; i++) {
  data1.push(Math.ceil(Math.random() * 10))
  data2.push(Math.ceil(Math.random() * 10))

}
Highcharts.chart('container', {
  chart: {
    type: 'area',
    zoomType: 'x'
  },
  boost: {
    seriesThreshold: 10
  },

  plotOptions: {
    area: {
      stacking: 'normal'
    }
  },
  series: [{
    data: data1
  }, {
    data: data2
  }]
});

Article How to add boost module with description how it works: boost-module#series-boosting-versus-chart-boosting

Demo: https://jsfiddle.net/BlackLabel/jb96ye58/1/

API references: https://api.highcharts.com/highcharts/boost, https://api.highcharts.com/highcharts/boost.seriesThreshold,

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Sebastian Hajdus

'how to create area highchart for large amount of data based date?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]