Whalensdad
Posts: 56
Joined: Tue Jun 01, 2021 4:14 pm

Stacked Column Chart with Dynamic Series

I am trying to create a Stacked Bar chart with the series being dynamic (unlike your example with hard coded series. I have done the following but it does not create the stacked columns for the different series

Highcharts.chart(this.chartElement.nativeElement, {
chart: {
type: 'column'
},
title: '',

xAxis: {
type: 'datetime',
categories: this.rptng_months
},
yAxis: {
title: '',
min: 0,
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold'
}
}
},
credits: {
enabled: false
},
legend: {
enabled: true,
align: 'center',
verticalAlign: 'bottom',
x: 0,
y: 0
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: 'black',
style: {
textOutline: 0
},
}
}
},
series: this.data.map(x=>x.Scheduled_Open),
});

I've also tried the Series section like this:
series: [
{
name: this.data.map(n=>n.Container),
data:this.data.map(x=>x.Scheduled_Open),
type: 'column',
cursor: 'pointer'
},


This is what my dataset looks like:
Container RPTNG_Months Scheduled_Open
Container 1 1/1/2021 40
Container 1 2/1/2021 40
Container 1 3/1/2021 40
Container 1 4/1/2021 40
Container 2 1/1/2021 117
Container 2 2/1/2021 119
Container 2 3/1/2021 119
Container 2 4/1/2021 119
Container 3 1/1/2021 359
Container 3 2/1/2021 359
Container 3 3/1/2021 358
Container 3 4/1/2021 357
Container 4 1/1/2021 237
Container 4 2/1/2021 237
Container 4 3/1/2021 238
Container 4 4/1/2021 238


In the dataset above there are 4 different containers. However there could be any number of containers. Note that I sanitized the names for this example. The names are actually meaningful.

How can I create a stacked column with dynamic series.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Stacked Column Chart with Dynamic Series

Hello Whalensdad,

Thanks for contacting us with your question.

I've created a chart based on your provided config and sample data. That's my interpretation of your data because you didn't specify how the values should stack, so please tell me if that's fine. You've also mentioned that you want your series to be dynamic. I don't know what exactly do you mean by that, but in the demo you can find simple function which adds new series on click. This should give you general idea how you can update your series.
Demo:https://jsfiddle.net/BlackLabel/btrvLdj9/
API reference: https://api.highcharts.com/class-refere ... #addSeries

Let me know what would you like to change.
Best regards!
Mateusz Bernacik
Highcharts Developer
Whalensdad
Posts: 56
Joined: Tue Jun 01, 2021 4:14 pm

Re: Stacked Column Chart with Dynamic Series

I appreciate the demo. What I meant by dynamic was that I don't know what the names or the number of series. You hard coded 4 (and added 1 dynamically at a button press). In my case there won't be ANY hard coded series. I need to pass in an array where the container name is dynamic. This has to be iterated over to identify whether there is only 1 series or 20 series. What I included as data, was an array with 16 rows.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Stacked Column Chart with Dynamic Series

Hi Whalensdad,

Even without any hardcoded series the idea is the same - you need to update a chart with new series.
Demo: https://jsfiddle.net/BlackLabel/hLv6erwt/

When it comes to your data, parsing it goes beyond my scope of duty and you need to do it on your own. Make sure that the parsed data is compatible with format specified in API (https://api.highcharts.com/highcharts/s ... olumn.data) and everything should work correctly.

Please let me know if you managed to do it and if not feel free to contact me again, just remember to provide me with JSFiddle with your current progress and sample data.

Best regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”