Garo
Posts: 9
Joined: Mon Sep 12, 2022 6:38 am

add background color to highcharts stacked Bar Chart

How i can add background color to highcharts stacked Bar Chart column like in picture.
https://i.stack.imgur.com/o1JZ4.png
i cant finde.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: add background color to highcharts stacked Bar Chart

Hello,

Welcome to our forum and thank you for contacting us with your question!

To add a background to your stacked bar, the easiest way would be to add a fake series, with grouping and stacking disabled. Then, set a low zIndex, disable mouse tracking, set showInLegend to false - and it's ready!

Take a look at the demo example to get a better understanding.
DEMO: https://jsfiddle.net/BlackLabel/oy6e0157/

In case of any other questions, feel free to contact us again,
Best regards!
Kamil Musiałowski
Highcharts Developer
Garo
Posts: 9
Joined: Mon Sep 12, 2022 6:38 am

Re: add background color to highcharts stacked Bar Chart

Thank you for answering , how i can remove this empty space
https://drive.google.com/file/d/1LnjbdC ... sp=sharing
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: add background color to highcharts stacked Bar Chart

Hi there,

To remove the empty space that you have pointed out, simply set the xAxis.max to the same value that is used in the fake series. In that case, that would be the xAxis.max: 50.

DEMO: https://jsfiddle.net/BlackLabel/m831oang/

In case of any other questions feel free to contact us!
Best regards!
Kamil Musiałowski
Highcharts Developer
Garo
Posts: 9
Joined: Mon Sep 12, 2022 6:38 am

Re: add background color to highcharts stacked Bar Chart

Hi Kamil Musiałowski.
Thanks for all answers.
Can you prompt how i can dynamically get the latest or pre latest number of yAxis to limit max correctly
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: add background color to highcharts stacked Bar Chart

Hi there,

You're welcome!

I'm not sure if I understood you correctly, but you want to get the highest data value from all of your datasets and set the yAxis.max to that value?

If that's the case, then it's super simple to achieve it. We get the dataMax value from yAxis and set it as a new max on load event. And that's it!

DEMO: https://jsfiddle.net/BlackLabel/r7qd60x1/

Let me know if that's what you needed,
Best regards!
Kamil Musiałowski
Highcharts Developer
Garo
Posts: 9
Joined: Mon Sep 12, 2022 6:38 am

Re: add background color to highcharts stacked Bar Chart

Thank you .
Now i will try to explain correctly.
When i'm getting tada i counting biggest line.
https://drive.google.com/file/d/1n61yVP ... sp=sharing
Then i'm adding 10% to it and creating fake data for background lines
https://drive.google.com/file/d/14iHh0c ... sp=sharing
When i'm limiting by that number (yAxis.max:232232) i'm getting this result because the number is not rounded
https://drive.google.com/file/d/1wxf9Ft ... sp=sharing
I want to read dynamically pre last number to limit by that (because i dont know what data will come
22 or 365410214578)
https://drive.google.com/file/d/1PaqHHf ... sp=sharing
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: add background color to highcharts stacked Bar Chart

I'm not entirely sure about what you need to achieve, but please note that the yAxis.ticks ale plotted dynamically depending on chart size, series visible etc.

If you would like to get the value of the tick one before last, you always have an access to all of the yAxis.ticks in yAxis.tickPositions array.

Take a look at the console logged value, from line 12 here: https://jsfiddle.net/BlackLabel/4r7016nj/
Kamil Musiałowski
Highcharts Developer
Garo
Posts: 9
Joined: Mon Sep 12, 2022 6:38 am

Re: add background color to highcharts stacked Bar Chart

Thank you so much.
1. Is this a asynchronous function ? because for me its returns empty array , when i call in timeout then i got correct information.
If you have any solution please help me .
2. Besides that i want to show percent symbol after numbers when my bar.stacking is percent.
https://drive.google.com/file/d/15o0IZB ... sp=sharing
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: add background color to highcharts stacked Bar Chart

You're welcome!

1. It is not an asynchronous function, so I'd need to see how you implemented this in your code. Could you reproduce it please?
2. For this one, I'd suggest using xAxis.labels.format - https://api.highcharts.com/highcharts/x ... els.format

Regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”