dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

Render N number of panes with multiple series per pane.

Hi,
i am converting some code to render via highcharts. In python, I have a chart pojo:
-it can contain a list of 1 or more Pane object
-each pane can contain a list 1 or more Series object.
-each series object in a pane can also be drawn either on a left or right axis (y1 or y2).
-when rendered, panes stack on the page and dont overlap, but can be sized vertically

using these pojos to describe what my chart should look like has worked well. I use this object to render charts via matplotlib and plotly fine.
I am trying to figure out what the best way of rendering this in HighCharts is. I can render everything fine, but the concept of a pane does really seem to exist. it seems like we plot series and use y-axis along with height, top and offset to separate out the series into different rendered panes. Problem is i am having a difficult time doing this - in figuring out a way to programmatically set height, top and offset to accomplish this

To summarize, here is what i would like to do as a start
-assuming the chart is 100% of the page (or 100% of a canvas area on a page)
-render each pane and all it's series to a height of: 100%/(# panes)
-panes should be stacked on the page and sizeable.
-all should share the same example

Are there any examples or suggestions on how to best accomplish this?

Thanks,
Mike
dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

Re: Render N number of panes with multiple series per pane.

somethings seem counter intuitive. for example if i have two series drawn- and i set the height of one to 25%, why would it draw the chart at an offset to the bottom of the chart? https://jsfiddle.net/7q9mvdbc/

and to get this to draw the way i'd expect - you have to add a top value which is basically the overall height minu the height you specify for the 2nd series. seems confusing. or should i be thinking of this differently?
dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

Re: Render N number of panes with multiple series per pane.

I think i may have figured this out..looking to understand if this is the best way to do this. My pane and series objects both have a height property. for now im ignoring the pane height and assume all pane would be equal height to reduce the complication until i get a better understanding of the highcharts api and models.

Let's say i have 3 panes i want to display. i divide them equally:

Code: Select all

var pane_height = parseInt(100 / chart_data.panes.length);
now i loop through the panes, and then series.
for each series i have the following:

Code: Select all

                   y_axis.push({
                        labels: {
                            align: 'left', x: -3
                        },
                        height: ((pane_height < s_height) ? pane_height : s_height) + '%',
                        top: ((pane_height < s_height) ? top : pane_height - s_height) + "%",
                        opposite: !(s.y2_axis),
                        resize: {
                            enabled: true
                        },
                    })
this seems to work for N number of panes and multiple series within a pane with different heights. Only issue is they all have resizing on..would prefer if resizing was at the series level, but rather the 'pane' level.
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Render N number of panes with multiple series per pane.

Hello,

It's nice that you managed to solve most of the problems.

You can use chart.events.render() callback function to update height and top properties after resizing.

Demo: https://jsfiddle.net/BlackLabel/phc01bnt/
API: https://api.highcharts.com/highcharts/c ... nts.render

Let me know if that was what you were looking for!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

Re: Render N number of panes with multiple series per pane.

michal.f wrote: Wed Aug 03, 2022 10:27 am Hello,

It's nice that you managed to solve most of the problems.

You can use chart.events.render() callback function to update height and top properties after resizing.

Demo: https://jsfiddle.net/BlackLabel/phc01bnt/
API: https://api.highcharts.com/highcharts/c ... nts.render

Let me know if that was what you were looking for!
Best regards!
Thank you. There doesnt seem to be a need to if i set the axis as resizable and set the proper height and top correctly. i was having a hard time thinking about height and top. if i understand correctly
-height is the height of each series as a percentage of the entire chart area/container
-but top is relative to the very top of the chart. It seems like rendering starts at value offset specified by top and goes down 'height' percent.

so for example in the chart below, the height and top for each series is:

Code: Select all

series	                      height	                                top
^GSPC(1d)'	              33.333333333333336%'                      0%'
Volume'	                      20%'                                      13.333333333333336%'
bb_spread'	              33.333333333333336%'                      33.333333333333336%'
bb_spread_10ma'               33.333333333333336%'                      66.66666666666667%'
chart1.png
chart1.png (108.74 KiB) Viewed 468 times
Is my understanding correct?
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Render N number of panes with multiple series per pane.

Hi,

I have prepared a simplified demo to help you understand it better.

The series is drawn in the plot area (this area with a white background), so they do not occupy the entire height of the graph (blue background), but a significant part of it. Elements such as the title, navigator and legend have their own space in the chart. Setting the axis to 50% of its height will take up half of the plot area, not the entire chart. Likewise, the top property applies to the top of the plot area as the documentation says

Demo: https://jsfiddle.net/BlackLabel/mbe20v73/
API: https://api.highcharts.com/highcharts/yAxis.top
https://api.highcharts.com/highcharts/yAxis.height

Feel free to ask any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Stock”