Pre loader

Is it possible to stack the Y Axes in SciChart.JS

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

1
0

I am working on a proof of concept for our company to move some of our desktop apps to the web. We use SciChart WPF in our desktop apps so we are going with SciChart.JS for the web apps. Is it possible to stack the FastLineRenderableSeries in SciChart.JS like we do in WPF?

Edit: Found the answer just after I posted this question.

sciChartSurface.layoutManager.leftOuterAxesLayoutStrategy = new LeftAlignedOuterVerticallyStackedAxisLayoutStrategy();

Screenshot of WPF Chart

Version
2.1.2290
  • You must to post comments
2
0

Hi Dan,

We just released Scichart.js v3.2.509 which includes a clipToYRange property on renderableSeries. Set this true if you have vertically stacked axes and want to clip to the visible range of the axis.

Full changelog at https://www.scichart.com/cbxchangelog/scichart-js-changelog/

Regards
David

  • You must to post comments
1
0

Hi Tim

Yes it is, I’m glad you found the answer in our JS Chart Documentation.

The Vertically Stacked Axis exists in SciChart.js

enter image description here

So does Horizontally Stacked Axis

There are actually more configuration options for scichart.js than for WPF for axis alignment.

Let us know if you have further questions

Best regards
Andrew

  • You must to post comments
1
0

I know this is an old one, but because it’s a relevant follow-up on this feature in scichart-js — I loved how easy it was to to using stacked axes like this. However, my client would strongly prefer that plot lines not “bleed” between stacked axes (in my use case,I’ve just taken a typically right-aligned Y2 and left-aligned it with your layout manager).

I’m guessing having pseduo-separated plots using the layout manager like this isn’t easily achievable and I should really think about separate plots?

  • You must to post comments
1
0

Hi Dan

Having two charts, two X/Y Axis stacked one above each other, but sharing zooming, panning and cursors is a feature which has been in SciChart.js from day #1

See the tutorial here on ‘Synchronising Multiple Charts

enter image description here

How this works:
– Create two SciChartSurfaces using SciChartSurface.create() into two separate <div> which are located one above another
– Use the SciChartVerticalGroup feature to synchronise axis sizes
– Use the ChartModifier modifierGroup feature to synchronise mouse events
– Use axis.visibleRange callbacks to synchronise zooming, panning

The tutorial above explains all.

For a concrete demonstration, this one in SciChart.js demo – Multi Pane Stock Charts – uses this technique

We are in the process of creating more demos to highlight this feature as it seems not many are aware of it!

Best regards
Andrew

  • You must to post comments
1
0

Thanks for the additional info Andrew; I was hoping to avoid a second chart as it will complicate some things in already-messy javascript, but the synchronization feature is nice. I remember that from the WPF charts from long ago

  • Andrew Burnett-Thompson
    Hi Dan, we don’t have the ability to clip series to their respective axis ranges in Vertically Stacked Axis scenario (in fact: not clipping is a feature not a bug), however we may be able to add this in future. Thanks for the suggestion
  • Dan Santimore
    Really appreciate the quick addition of this option Andrew and David!
  • You must to post comments
Showing 5 results
Your Answer

Please first to submit.