Pre loader

How to draw axis label for every column in column chart

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

Two questions. First how do I draw an axis label for every column in a column chart. See attached pic. Also the first axis label is correctly positioned under the column chart but subsequent ones are off to the left quite a bit. Not sure how to fix either. Here is xaml to rotate the axis lablel

<Style x:Key="SessionBreakDownByHourColumnGraphXAxisLabelStyle" TargetType="sc:DefaultTickLabel">
    <Setter Property="LayoutTransform">
        <Setter.Value>
            <RotateTransform Angle="45" />
        </Setter.Value>
    </Setter>
</Style>

UPDATE: Setting autoticks to false shows all axis labels but still off center. Adding new photo.
UPDATE: So changing xaml to below and adding a few to visible range on xaxis seems to solve the issue. Still unsure why i have to modify the visible range slightly.

<Style x:Key="SessionBreakDownByHourColumnGraphXAxisLabelStyle" TargetType="sc:DefaultTickLabel">
    <Setter Property="LayoutTransform">
        <Setter.Value>
            <RotateTransform Angle="45"/>
        </Setter.Value>
    </Setter>
    <Setter Property="HorizontalAnchorPoint" Value="Left"/>
    <Setter Property="VerticalAnchorPoint" Value="Bottom"/>
</Style>

Final Xaml that solved for me

<Style x:Key="SessionBreakDownByHourColumnGraphXAxisLabelStyle" TargetType="sc:DefaultTickLabel">
    <Setter Property="LayoutTransform">
        <Setter.Value>
            <RotateTransform Angle="45"/>
        </Setter.Value>
    </Setter>
    <Setter Property="HorizontalAnchorPoint" Value="Left"/>
    <Setter Property="VerticalAnchorPoint" Value="Bottom"/>
    <Setter Property="FontSize" Value="9"/>
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="Margin" Value="-5,0,0,0"></Setter>
    <Setter Property="Foreground" Value="{DynamicResource AccentBaseColorBrush}"/>
</Style>
Version
5.4
Images
  • John
    Ok setting autoticks to false gives me a label under each but the labels are still not centered correctly on column
  • You must to post comments
0
0

Hi John,

There’s a few things you need to do here.

  1. Set AutoTicks = false, and set MajorDelta to 1 (or whatever your X-increment between values is). This will place labels and tick marks at each data-points. Alternatively, you can use the TickProvider feature to output exact tick positions.

  2. Set Axis.IsLabelCullingEnabled = false. Without this, overlapping labels will be removed from the screen

regarding the rotated label being slightly off centre, since you are templating the label anyway to achieve the rotation, try to set a Margin on it and see if that helps.

Best regards,
Andrew

  • John
    Thanks that all worked. Still had to make x axis visible range slightly longer than values for last one to show properly
  • Andrew Burnett-Thompson
    Great! Glad to be of help!
  • 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