Pre loader

I want to write the label name of X axis vertically

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

0
0

I want to write the X axis vertically, as shown in the following image.
How should I do it?

Version
5.1.1.11473
Images
  • You must to post comments
1
0

Hi there,

It is possible to rotate the XAxis labels in SciChart using this technique:

Axis Styling – Templating Axis Labels Documentation

Axis labels can be rotated if you style them via the AxisCore.TickLabelStyle property.

<Grid>
   <Grid.Resources>
      <Style x:Key="RotatedTickLabelStyle" TargetType="s:DefaultTickLabel">
         <Setter Property="Foreground" Value="Orange"></Setter>
         <Setter Property="FontSize" Value="16"/>
         <Setter Property="FontFamily" Value="Segoe UI"/>
         <Setter Property="LayoutTransform">
            <Setter.Value>
               <RotateTransform Angle="90"/>
            </Setter.Value>
         </Setter>
       <!-- Optionally override ControlTemplate for the label -->
       <Setter Property="Template">
         <Setter.Value>
            <ControlTemplate TargetType="labelProviders:DefaultTickLabel">
               <ContentControl Content="{Binding}"
                  ContentTemplate="{TemplateBinding ContentTemplate}"
                  Foreground="{TemplateBinding Foreground}" IsTabStop="False" />
            </ControlTemplate>
         </Setter.Value>
       </Setter>
      </Style>
   </Grid.Resources>

   <!--  Create the chart surface  -->
   <!-- where xmlns:s="http://schemas.abtsoftware.co.uk/scichart" -->
   <s:SciChartSurface>

   <!--  Create XAxis  -->
   <s:SciChartSurface.XAxis>
      <s:NumericAxis AxisTitle="Styled XAxis" TextFormatting="0.000" TickLabelStyle="{StaticResource RotatedTickLabelStyle}"/>
   </s:SciChartSurface.XAxis>

   <!--  Create YAxis  -->
   <s:SciChartSurface.YAxes>
      <s:NumericAxis AxisTitle="Primary YAxis" AxisAlignment="Left"/>
      <s:NumericAxis Id="SecondaryYAxisId" AxisTitle="Secondary YAxis" AxisAlignment="Right" />
   </s:SciChartSurface.YAxes>

   </s:SciChartSurface>
</Grid>

This will result in rotated axis labels.

enter image description here

Best regards,
Andrew

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies