Search code examples
scichart

SciChart - Accurate placement of rotated axis labels

Following up on my question from yesterday: SciChart - showing labels for all ticks

Thanks to the answer I was able to get the label density where I needed it. But I still have problems with label placement. As you can see in the screenshot, rotating the labels caused them to stick upwards into the graph. I need them below the axis. I've tried everything I could find in the API that I thought might help me:

  • a TranslateTransform - I tried moving both X and Y both ways. No result.
  • VerticalAnchorPoint and HorizontalAnchorPoint - setting VerticalAnchorPoint to Center actually moved the labels, but only by 3mm and in the wrong direction.
  • Horizontal/Vertical Alignment/ContentAlignment - didn't do anything.
  • I've even tried bloating the labels by appending a lot of spaces to the strings. A desperate attempt, I know.

Furthermore, the horizontal position of the labels is not correct either. In the screenshot you can see the first bump on the graph goes down on what looks like CF.02. But in reality it's set to CF.01. It would seem the labels are moved to the left of their corresponding tick. I need them to be displayed below the center of their respective tick, like the original solution.

[edit: image removed to prevent potential client IP issues]

Solution

  • In the SciChart's WPF Xaml Styling a Chart example there is a demonstration of how to rotate labels by changing the AxisBase.TickLabelStyle.

    This uses RenderTransform to rotate labels by 15 degrees. However, if you use 90 degrees, the labels overlap the surface.

    Changing the RenderTransform to LayoutTransform forces labels to be drawn in the correct place (below the axis).

    enter image description here

    You can read more about the difference between RenderTransform and LayoutTransform here.