Pre loader

SciChart surface grid squares

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


I need help to make the SciChart surface grid to always look like squares instead of rectangles(like in the screenshot attached).
Does anyone have solved this yet ?

3.2.481 npm
  • You must to post comments

This is indeed a tricky one, as there are multiple factors that contribute to the tick positions. In going for a fixed aspect ratio, there will inevitably be tradeoffs between which of the factors you fix, and which you vary.

Essentially you want the major tick spacing for each axis (call it Sx and Sy) to be the same, or in some ratio R. Sx is the pixel length of the axis (Lx) divided by the number of ticks (Nx). In SciChart you cannot set the number of ticks directly (maxAutoTicks is just a maximum), unless you write your own tickProvider, but it depends on the visible range (Vx) divided by the majorDelta (Dx). So, we end up with this relationship:
R = Sx / Sy = Lx * Ny / Ly * Nx = Lx * Vy * Dx / Ly * Vx * Dy

You then have to pick which of these will be fixed and which will vary. If your chart has a fixed aspect ratio, (ie Lx and Ly are fixed) then you can vary the visible ranges. If you need to keep the aspect ratio while zooming, then you will need to adjust the deltas. In the codepen below I show one approach which updates the majorDelta on the y axis when any other factor varies. The tradeoff here is that now the tick values on the y axis are not nice round numbers.

Regardless of how you fix the values, the codepen shows the key places where you can update the axes as things change, ie the visibleRangeChanged event on the axis, and the changeViewportSize method on SciChartSurface. An alternative is to subscribe to sciChartSurface.preRender and fix up the axes as you need before the start of every frame. Be aware that some axis values may not be set until the chart has rendered at least once.

I hope this makes sense. Let me know if you need help adapting this for your particular case.


  • David Burleigh
    Having thought about this some more, I’m going to share my first solution to this, which just fixes the aspect ratio of the visibleRanges. This means that a square plotted on the chart will remain square as you zoom/pan, but the gridlines may not. In the example above – the gridlines remain square but the data does not. I’m now thinking that a custom tickProvider might be the best solution to this, again depending on exactly what you want.
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.