mubix
Posts: 32
Joined: Wed May 25, 2022 12:32 pm

Re: Highcharts gap between two adjacent series

Hey Kamil

Your stack total label solution is working.... Thank you so much
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Highcharts gap between two adjacent series

Hi there,

That's so good to hear that! I'm really glad that I could help you.

Feel free to contact us anytime!
Have a good day
Kamil Musiałowski
Highcharts Developer
mubix
Posts: 32
Joined: Wed May 25, 2022 12:32 pm

Re: Highcharts gap between two adjacent series

Hey Kamil

Sorry for Inconvenience but there is another issue .. which i am not sure related to above one ...
i was using pointPadding to show delta Bars little smaller than other bars but .. pointPadding is being ignored when there is 4 or less bar
in fiddle it works fine but on my system it doesn't .. is it because my plot area it too big???
i can see that when code goes throgh renderSeries function .. it calculates the barW .. and its same for all the bar including deltabar even though pointPadding
i was going wrap function and change that but not sure how because in drawPoints function it gets only one series and deltaBar series is first in series object
so i don't have access to other series's barW .. i was going to calculate based on that ...
so how do i go about solving this issue

Image
Image: https://ibb.co/prMdR9B
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Highcharts gap between two adjacent series

Hi mubix,

Correct me if I'm wrong, but you are having some issues with the delta bar width - right?
In that case, maybe the series.pointWidth will help you?
Take a look at the API Reference for it: https://api.highcharts.com/highcharts/s ... pointWidth

Regards!
Kamil Musiałowski
Highcharts Developer
mubix
Posts: 32
Joined: Wed May 25, 2022 12:32 pm

Re: Highcharts gap between two adjacent series

Hey kamil,

I don't understand how do i use pointWidth for deltabar with respect to other bar...
like i want delta bar to be 20% smaller respect to bar it is on.... so how do i set it that way
that's why i was using pointPadding

Demo: https://jsfiddle.net/g0vin_d_Vitara/z352xs9c/34/
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Highcharts gap between two adjacent series

Hi there,

Sorry, I had no idea that you wanted to set it as i.e 80% of the normal bar width. Unfortunately, we don't have an API option for setting a responsive pointWidth value, but I have prepared a small workaround for you.

I have removed the pointWidth option, added a normalPoints variable in line 24, and created a custom logic to set your bars at 80% width (or any value you want) in lines 42-53.

Let me know if that is what you wanted to achieve,
Have a great day!
Kamil Musiałowski
Highcharts Developer
mubix
Posts: 32
Joined: Wed May 25, 2022 12:32 pm

Re: Highcharts gap between two adjacent series

Hey there

I think you forgot to share the demo link bro
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Highcharts gap between two adjacent series

Hi there,

I am so sorry for that!

Here is the demo for you: https://jsfiddle.net/BlackLabel/w1s52fqa/

Best regards!
Kamil Musiałowski
Highcharts Developer
mubix
Posts: 32
Joined: Wed May 25, 2022 12:32 pm

Re: Highcharts gap between two adjacent series

Hi Kamil Thanks a lot.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Highcharts gap between two adjacent series

Hi there,

No worries, feel free to contact us anytime!

Have a good day!
Kamil Musiałowski
Highcharts Developer
mubix
Posts: 32
Joined: Wed May 25, 2022 12:32 pm

Re: Highcharts gap between two adjacent series

Hey, Kamil ..

In the following example you gave ... https://jsfiddle.net/BlackLabel/w1s52fqa/
can we not call update method on series with new options since we now know the width of other series ...
based on that we can send appropriate pointWidth for delta series
Because right now we are going through each point and setting its width and x value ...... that's why i was looking for update method
mubix
Posts: 32
Joined: Wed May 25, 2022 12:32 pm

Re: Highcharts gap between two adjacent series

https://jsfiddle.net/g0vin_d_Vitara/mo7ds3yw/72/
i tried this way ... is it a proper approch plus why is cost series's deltaBar not working?
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Highcharts gap between two adjacent series

Hi mubix,

If you are sure that all of your bars/columns will have the same width, you can grab just one bar's width and use it to set the deltaBars width. I have offered you a bit more "general" solution, but yours is fine too.

To make your bars responsive to chart width changes, you have to set up your functionality in the chart.render method, since chart.load gets fired only once at the initial website load. If you resize your window, your calculations won't be made again.
The problem with the render method is, that you cannot use update method in it (because that would cause an infinite loop since the update() also triggers a render method).
I have modified your code a bit, and now it is responsive and works properly.
DEMO: https://jsfiddle.net/BlackLabel/ud805nbr/

I hope that you will find it useful,
Best regards!
Kamil Musiałowski
Highcharts Developer
mubix
Posts: 32
Joined: Wed May 25, 2022 12:32 pm

Re: Highcharts gap between two adjacent series

Thanks for you solution but solution we have is bit long traversal .... we hv to change each point

so is there anywhere else we can use update method ???
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Highcharts gap between two adjacent series

You can use it pretty much everywhere in your code, but not in functions that are triggered after the update.

To make it simple:

After the update method, several events are triggered to make the changes visible on the chart. One of them is the previously mentioned redraw event.
So you can't use the update inside the redraw, because that would trigger the update again, then the redraw, then update, etc. You would end up with an infinite loop.

But if you call the update method from other places in your code, then you are good to go.
Take a look at the demo below, where you can see the usage of the update method outside the chart object.
DEMO: https://jsfiddle.net/BlackLabel/fxh48ka2/
Also, you may find this article about events useful.
Blog: highcharts.com/blog/tutorials/introduction-to-highcharts-events/

Is there a reason why you want to use the update instead of the point.graphic.attr method?

Feel free to ask any further questions! We are here to help you :)
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”