i have some data as given below i want to show it as stack bar chart like

i have some data as given below i want to show it as stack bar chart like https://www.highcharts/demo/highcharts/column-stacked-and-grouped

current chart options that i am using are

{
chartOptions :{
chart:{
    type:'column'
},
data:{
    csv:<table_data>
},
plotOptions:{
 column:{
    stacking:'normal'
 }
}
...
}
}

is their any option for me for configure Highchart to group data and show stack chart.

I have tried seriesMapping but it is not working for me. The last way is to manually grouping data and generating configuration but it will create to much complexity to my already existing application also it can cause bugs for other charts that i am generating.

If their is any other way than above please let me know

• angular
• highcharts

• You cannot directly use a CSV table data within the data property of a Highcharts series. You have to get the CSV string, parse it using a JavaScript library like Papa Parse and then transform that JavaScript array into the format that Highcharts expects for its data property. – Lewis Commented Feb 16 at 4:15

2 Answers 2

Please mind that Highcharts itself, in principle, expects that your data format is consistent and prepared upfront. At the same time there are some options with the data module. With the data module enabled, you can directly get the data from the table as described in the documentation here: https://www.highcharts/docs/working-with-data/data-module#loading-data-from-a-table

And then, for stacked and grouped column chart you need to use plotOptions.column.stacking combined with series.column.stack

I hope this helps.

I was unable to auto populate stack chart with csv data. I went with manually processing it and providing it in format that Highchart like which looks like below:

chartOptions = {
  chart:{
    type:"column"
  },
  categories:['A', 'B'], // I was passing list of group
  plotOptions: {
    column: {
      stacking:"normal"
    }
  },
  series: [{name:'a', data:[2,null]}, {name:'b', data:[3,0]...] 
}

This is the only solution as for now.