pan
Posts: 4
Joined: Tue Feb 20, 2024 9:10 am

stacked column chart with area chart

Hi,

I have a complex use case and wasnt sure how to title this topic.
here is a use case example: https://jsfiddle.net/n7hku13e/2/
I need the following done (and for each, ill explain how i solved it but its buggy):

1. waterfall area chart:
I need the area chart to have a start point from first column top right point till second column top left point.
closest i got was the jsfiddle above.

2. full stacked column border:
i need on column hover to show a border around the full stacked column bar (not the sub series but the 2 combined).
real life example i got it to work fine (as i get attributes on each stacked bar that are missing from the working example). you can see the messy code i created to get this to work. i calculate the location on the graph of the stacked items, their heights and create a transparent item that is slightly bigger. then in css, if the item is hovered, i give the stroke a color.
the issue i have is when adding scrolling of the graph. i need to redraw it after each scroll and thats when things get messy...

3. in between bars label:
between bars i need a label. my "working" example fails due to the previous step.
I need to locate the label between the columns and about half way lower than the left (taller) column. for that i tried to locate the x axis grids (which are between the columns) and the left side column wrapper border i created in the previous step (so i can make it half of that ones height).
again, when adding scrolling i get a very buggy situation

4. top of column label:
using the area value is actually the sum of the 2 stacked bar. the problem is when one or both are negative numbers... whats the best way to have it always on top?
also, how to keep it in the middle of the column?

5. scrolling:
in the example it fails, but it works on my real life use case.
the problem is that my scrolling isnt affecting the scroller unless i click and drag the scroller...
also, how do i style this element?
pan
Posts: 4
Joined: Tue Feb 20, 2024 9:10 am

Re: stacked column chart with area chart

heres happy result UI in case my explanation wasnt clear:
https://pasteboard.co/LoOry1wtomdF.png
jakub.s
Posts: 1229
Joined: Fri Dec 16, 2022 11:45 am

Re: stacked column chart with area chart

Hi,

Welcome to our forum & thanks for the question!

1. What do you mean by "waterfall area chart"? Here we have a demo for our waterfall series: https://jsfiddle.net/BlackLabel/e6fc2m8r/

Also, you could manipulate x or column.pointWidth properties to achieve the desired result: https://jsfiddle.net/BlackLabel/69k1j4rd/

2. There is no API option in Highcharts which would allow you to achieve that without writing any custom code. You would need to implement a custom solution for that, I've prepared a simple demo which may guide you and give you a hint: https://jsfiddle.net/BlackLabel/q62cvfsu/

3. You could use the Highcharts.SVGRenderer to render custom SVG elements on the chart. Then, the .attr method allows you to manipulate the DOM attributes and thus position the element where you wish.

API:
- https://api.highcharts.com/class-refere ... VGRenderer
- https://api.highcharts.com/class-refere ... SVGElement

4. I'm sorry, but I'm not sure if I fully understand. Could you please elaborate on that and create a simplified JSFiddle example for it? What exactly would you like to achieve?

5. "how do i style this element" - which element would you like to style? If you'd like to style the scrollbar, you can style it just as you would style a standard CSS scrollbar of a div container.

Best regards!
Jakub
Highcharts Developer
pan
Posts: 4
Joined: Tue Feb 20, 2024 9:10 am

Re: stacked column chart with area chart

Hi Jakub,

thank you for the kind welcome and your effort in helping me out.

1. waterfall area chart:
currently when using an area chart with a column chart, the area uses the points in the category.
so first category sets the x location of the point and the value sets the y location. this will translate to the middle of the column if looking at x location.
this point can be moved to between columns and shifted right or left to its original location. the width of the point which impact the line creation is also static. so if looking at the end result, we will see area from mid of first column to mid of the second column.
like here: https://pasteboard.co/7M3xVnvBaEQd.png
but what i want, is area not cutting the column. I want area point that starts at top right of first column, gets to top left of second column than continues straight through column width. liked here: https://pasteboard.co/LoOry1wtomdF.png
so not a traditional highcharts waterfall..

2. full stacked column border:
I have looked at your example and will try to create an on hover border... will see how i can catch all the stacked bars in the column :)

3. in between bars label:
I have actually used this. drawing onto the dom and using transform translate for correct placement.
the issue is when adding scrolling to the mix... its transform translate values are not correct and i need to redraw the labels as its scrolling, no?

4. top of column label:
this is the best i got so far: https://pasteboard.co/OfoKk2NQRX76.png
my aim is to have the numbers always above the middle of the column. currently im using the area point definition for that

5. scrolling:
its both an issue of the triggering the scroll which currently works only by click and drag of scroller + the styling which i hoped theres an api for it.
currently, looks like i cant use scroll as drawing onto the dom (point 3) breaks when using the scroller so i put it on hold to see if i can solve it

again, thank you for your time an effort.
hope this time im a bit clearer in my questions
jakub.s
Posts: 1229
Joined: Fri Dec 16, 2022 11:45 am

Re: stacked column chart with area chart

Thanks for clarifying!

1. Highcharts does not have that built-in, but you can achieve that via manipulation of the x, pointWidth properties or with the .attr method inside the chart.events.render function.

I've prepared a sample: https://jsfiddle.net/BlackLabel/yejva60p/ where I'm positioning the columns to be explicitly in the middle of the line. Also, you could increase their width with .attr({ width: ... }) if you'd like.

2. Great! Let me know how it goes.

3. Yes, that's right. You might need to adjust some parameters if the scrolling has been added. You could pin into the scroll event of the scrolled container: https://developer.mozilla.org/en-US/doc ... roll_event

4. Always above the middle of the column? Could you please elaborate on that/show a mockup design? If you'd like to position the labels in custom positions, you could do it in the similar fashion to (1) as each label is an SVGElement whose position can be changed with the .attr method. So, you could check if the label is in the desired position and if no, you could translate it so that its new position matches your mockup designs.

5. It would be helpful if you could create a minimal reproducible example of your scrolling problem so I could take a look and potentially investigate this further.

Best regards!
Jakub
Highcharts Developer
pan
Posts: 4
Joined: Tue Feb 20, 2024 9:10 am

Re: stacked column chart with area chart

thank you for your patience on this issue!

I looked at what you wrote and i have an update to some issues but its still not going to plan I fear...

1. waterfall area chart:
using your example for point 1, I started playing with it to see how i can force the first area point and its drawing to start from first column. I gave it the x value but after render it... moves?!
see example: https://jsfiddle.net/3eux16j7/

2. full stacked column border:
still WIP, will update on that

3. in between bars label:
I had a thought... this item can be seen as a new series on its on that is mostly hidden except for its point labels. in the example above i added a new series that ill need to manipulate to show only the labels of points/flags. so WIP and will update

4. top of column label:
each stacked column needs to have a total value of its children... so ill need to figure out how to draw it...
based on your suggestion for point 1 to manipulate the area points and make more of them so i can draw each point and than select that points label/flag and manipulate it as needed. should work... ill update.

5. scrolling:
ill try to see how to create an example... its hard to reproduce in jsfiddle

thanks again!
jakub.s
Posts: 1229
Joined: Fri Dec 16, 2022 11:45 am

Re: stacked column chart with area chart

1. You seem to be on the right track. But, what do you mean that "after render it... moves?!"? The point moves because you added .attr({ x: newX }) to your custom chart.events.render function.

I'll be waiting for the updates.

Best regards!
Jakub
Highcharts Developer

Return to “Highcharts Usage”