skip data point on x-axis and group by based on data in highcharts-CodePudding

I am working on highcharts to map data on x axis and y axis based on labels(i.e. kiwi, apple, banana) and count(i.e. 7, 3, 486) and put dates on x-axis based on data. can anyone please help me on how to group by data based on date and labels to display count(y-axis). Any help would be highly appreciated. Thank you!!

Below data I am using: enter image description here

CodePudding user response：

It can be achieved in many ways, below is my interpretation:

const data = [
  ['2018-03-05', 'kiwi', 7],
  ['2018-03-05', 'apple', 486],
  ['2018-03-05', 'grapes', 3],
  ['2018-03-07', 'banana', 33],
  ['2018-03-07', 'kiwi', 64],
  ['2018-03-07', 'person', 433],
  ['2018-03-07', 'grapes', 137],
  ['2022-01-20', 'kiwi', 113],
  ['2022-01-20', 'person', 444],
  ['2022-01-21', 'banana', 50],
  ['2022-01-21', 'kiwi', 59],
  ['2022-01-21', 'person', 600],
  ['2022-01-21', 'grapes', 51],
  ['2022-01-22', 'banana', 52],
  ['2022-01-22', 'kiwi', 74],
];

const seriesNames = [...new Set(data.map(d => d[1]))];

const series = seriesNames.map(seriesName => {
  return {
    name: seriesName,
    data: data.filter(d => d.includes(seriesName)).map(d => [d[0], d[2]])
  }
})

Highcharts.chart('container', {

  series: series
});

Demo: https://jsfiddle.net/BlackLabel/0s1z3aey/