varnguyen
Posts: 22
Joined: Fri Jan 08, 2021 3:32 am

Highcharts Stacked bar cannot show sum

I want to make a Stacked bar like the picture, is it possible? If yes, please give me the solution. Thanks!
Picture: https://i.stack.imgur.com/pXRj8.png
Community-support could still be found at https://stackoverflow.com/questions/684 ... tal-volume
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Highcharts Stacked bar cannot show sum

Hi,

Thanks for contacting us with your question.

Of course it is possible to create a chart like this. Here is the demo I have just prepared for you: https://jsfiddle.net/BlackLabel/ezsxwd3L/

Let me know if that was what you were looking for!
Best regards!
Mateusz Bernacik
Highcharts Developer
varnguyen
Posts: 22
Joined: Fri Jan 08, 2021 3:32 am

Re: Highcharts Stacked bar cannot show sum

Hi mateusz.b!

Thank you so much. It's exactly what I was looking for.

Best regards!
varnguyen
Posts: 22
Joined: Fri Jan 08, 2021 3:32 am

Re: Highcharts Stacked bar cannot show sum

Hi mateusz.b!

I still have a few related issues.
1. I'm currently setting over-flow for the div that wraps the chart, so when I scroll, the legend is also hidden. Can I have a fixed legends?
2. My chart is displayed - in the xAxis column as shown in the picture. What can I do to hide it like in design?
3. I tried several options to fix yAxis like this demo https://jsfiddle.net/gh/get/library/pur ... -scrollbar but it doesn't work. With the current code, how can I do that?
Img: https://i.ibb.co/8PVFLSC/111111.jpg, https://i.ibb.co/VVdCW85/222222.jpg
Best regards!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Highcharts Stacked bar cannot show sum

Hi varnguyen!

1. Currently there is no such feature that allows you to make legend position fixed relative to chart parent div. Of course you can still create your custom legend, but then you have to give up on native legend features or implement them yourself.

2. There are few methods that allows you to hide xAxis line, for example setting lineWidth value to 0.
API reference: https://api.highcharts.com/highcharts/xAxis.lineWidth
Demo: https://jsfiddle.net/BlackLabel/Lht7dfuq/

3. When it comes to this question, I'm not quite sure what you want to fix. If you want to adjust format of yAxis.labels you should probably use format property. Please next time provide me with more specific informations including description of your expected results.
API reference: https://api.highcharts.com/highcharts/yAxis.labels
Demo: https://jsfiddle.net/BlackLabel/x8q6vw3j

In case of any further questions feel free to contact us again.
Best regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”