Glow
Posts: 5
Joined: Wed Oct 05, 2022 11:51 pm

Stacked Percent Bar Chart Cut off on the right side

Hi,

I ran into an issue where the stacked percent bar chart is cut off on the right side when it should be staying within area the chart provided. If you take a look at the attached image, the bar extends past the chart because it is too long.
image (4).png
image (4).png (34.42 KiB) Viewed 425 times
I have an example with this fiddle here: https://jsfiddle.net/rk1jtzdh/. Would someone be able to fix this bug?

Thank you!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Stacked Percent Bar Chart Cut off on the right side

Hi Glow!
Welcome to our forum and thanks for contacting us with your question!

This is related to you width of the chart, which is set as a static value, which is higher than the container (parent div) actual width. You have set chart.width property to 1024 and container width was 800, that's why the chart was cut off.

Demo: https://jsfiddle.net/BlackLabel/feanwyqx/

Let me know if you have any further questions.
Regards!
Hubert Kozik
Highcharts Developer
Glow
Posts: 5
Joined: Wed Oct 05, 2022 11:51 pm

Re: Stacked Percent Bar Chart Cut off on the right side

Hi Hubert,

I think my jsfiddle example didn't accurately depict the issue I am seeing. I am not able to reproduce it but I have attached several screenshots. I am on highstock version 2.1.9.


The width attribute of 750 px is not accurately shown for the highcharts-series-group. It somehow says that the width is actually 2497px, which is incorrect. (pic1.png)
highstock.png
not-working.png
In the case that is not working, the y value is a negative number. I am thinking if it is reacting negatively with some highstock code such as the translate function (highstock.png) which is causing the width to be so large. (not-working.png)
working-pic.png
In the case that works, the y value is a positive number and there is no problems. (working-pic.png)
Do you know if there has been any fixes for this issue? Thank you!
Glow
Posts: 5
Joined: Wed Oct 05, 2022 11:51 pm

Re: Stacked Percent Bar Chart Cut off on the right side

working-pic.png
working-pic.png (2.17 KiB) Viewed 407 times
not-working.png
not-working.png (6.26 KiB) Viewed 407 times
highstock.png
highstock.png (19.28 KiB) Viewed 407 times
Glow
Posts: 5
Joined: Wed Oct 05, 2022 11:51 pm

Re: Stacked Percent Bar Chart Cut off on the right side

pic1.png
pic1.png (13.32 KiB) Viewed 407 times
Glow
Posts: 5
Joined: Wed Oct 05, 2022 11:51 pm

Re: Stacked Percent Bar Chart Cut off on the right side

I updated the styling of the jsFiddle here but was unable to reproduce the issue with the negative y values still. https://jsfiddle.net/e35j1ryv/3/
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Stacked Percent Bar Chart Cut off on the right side

Glow,
Well, it is hard to say what is not working. You are using Highcharts Stock v.2.1.9 (https://www.highcharts.com/blog/changel ... rts-v2.1.9) which was released in 2011, it is almost 12 years. It is an abyss in web technology, everything was working different in that years, so I suggest you upgrade your version to the newest release, which is Highcharts v.10.2.1.

Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”