Pre loader

Custom xAxes layout stackedAxisLength issue

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


Hi, I have an issue where I am trying to create multiple xAxes where one is normal and the rest are horizontally stacked. Then I calculate the stacked length of each stacked axes, but the issue comes when I change the width of the chart or inspect element, which would alter the width of the chart somehow, I got error saying the total width of the stacked axes is bigger than available size.

I have a codesanbox example of it:

I am using percentage for the stacked xAxes length and then I added them up to be 100% total, but somehow it is saying that it is more than available size.

So, my question is, how can I listen or get the width/size changes event of the chart/xAxis, so that I can calculate accordingly?

  • Andrew Burnett-Thompson
    Hi Nung, looking at this today
  • Nung Khual
    I see the answer that Jim give, but not sure how I can use that to get the total size, I have check the bottom and the size doesn’t seem to be in pixel, it give me 316, not sure what that is suppose to be.
  • Jim Risen
    Hello Nung, I’ve updated the answer. See if that helps
  • Nung Khual
    Awesome, that works, but is it possible to access those limit or value without having to save it somewhere using state etc. Ex. sciChartSurface.layoutAxis.right ?
  • You must to post comments

The available size can be calculated from the parameters of the CustomAxisLayoutStrategy.layout method

public layoutAxes(
  left: number,
  top: number,
  right: number,
  bottom: number,
  axes: AxisBase2D[]
): void

left, top, right, bottom – define an area where the current group of axes with the same alignment will be placed. Where each of the params is an appropriate offset value (in canvas coordinates) from the canvas viewport rectangle.

To get a horizontal space available for the bottom axes calculate right – left

Try checking those limits and applying a proper axisLength rounding.

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.