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",
},
];

Answer

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,

Advertisement

Answer