Vertical Charts on surface

Hello!
To clarify, the SciChartVerticalGroup is a feature that allows synchronizing the layout alignment of multiple surfaces. It can be used both with separate surfaces and subsurfaces.

The difference between approaches:
– separate surfaces rerender independently (if one surface needs to be redrawn it won’t affect others)
– updating something on a subsurface will cause the redraw of the main surface and all of the subsurfaces attached to it

• separate charts could draw sequentially in different frames

• subsurface render logic is executed in bulk so all of the charts are guaranteed to be drawn simultaneously

• sub-charts are drawn on a single canvas (however the approaches could be combined)

• also sub-charts allow to add and dynamically position some HTML content around them (the SubChart Wrappers feature)

With that, depending on your use case consider the following:
– are your charts updating simultaneously?
– do you have a complex HTML layout for the chart?
– Do you have an intensive update rate for chart properties/data?

I would suggest implementing your chart setup in such a way that you could easily switch between those approaches. Because when performance is in question, the important thing is to measure and monitor some metrics to compare the solutions.

configureSurface(sciChartSurface) {
  // add axes, series, annotations, modifiers, etc...
 }
 // ...you can use one approach
const {sciChartSurface} = await SciChartSurface.create(rootElement, options)
//  or another
// const sciChartSurface = mainSurface.addSubChart(options)

// Then do the setup
configureSurface(sciChartSurface)