SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and now iOS Charting & Android Chart Components

Welcome to the SciChart Community Forums!

Please use the forums below to ask questions about SciChart. Take a moment to read our Question asking guidelines on how to ask a good question and our support policy

We also have a tag=SciChart on Stackoverflow.com where you can earn rep for your questions!

1
0

I need axes as described below. I can either modify your existing axis control or add my own in a canvas next to the SciChartSurface. So far I have been unable to modify your existing axis to fit my needs. A Y axis should look like this typical logarithmic axis (range 2 to 2000):

|-----------------  Resistivity ------------------|
2                                                2000

The specifications are
1.) Tick marks only at the end
2.) Title straddles the axis
3.) One axis per curve on the chart
4.) Axis uses same color as curve
5.) Axis uses same dash pattern as curve
6.) The edge of the chart is not an axis

This is basically a combination of a legend with multiple axes. I have not been able to get this effect with existing controls, so I have started to make my own in a canvas. To do this I need to line up my two tick marks with the edges of the chart. How can I obtain the location of the edges?

  • You must to post comments
1
0

Hi there,

Thanks for your inquiry. Actually I have some ideas for you to try, maybe you don’t need to write a custom control. So first of all, you should hide the axis labels and ticks setting DrawLabels and DrawMinor/MajorTicks to False. Then, it’s possible to modify the axis title setting the TitleStyle property, as it is demonstrated in the Xaml Styling example. You could set HorizontalAlignment to Stretch on it, and put 2 Lines and a TextBlock inside, binding/setting StrokeDashArray of the lines. Also setting the Margin to a negative value will allow to shift the title upper(to overlay the axis).

To get two large ticks at the edges, you should configure the BorderThickness property so the side lines appears, like it is done in this example:

<s:NumericAxis BorderThickness="2,0,2,0" BorderBrush="..." ... />

And, finally, to get two labels at the edges, you could set up two TextBlocks and bind them to VisibleRange.Min/Max correspondingly.

Also it is possible to override the TickProvider in the way that it would generate only 2 ticks.

Please let us know if this approach is convenient for you. Feel free to comment if you have any questions,

Best regards,
Yuriy

  • You must to post comments
1
0

Thank for the tips. I have almost everything working, except for binding the StrokeDashArray of the line to the StrokeDashArray of the series.

My axis style is:

    <Style x:Key="YAxisTitleStyle" TargetType="s:AxisTitle">
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="Margin" Value="0,0,0,-5"/>
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition></RowDefinition>
                            <RowDefinition></RowDefinition>
                        </Grid.RowDefinitions>
                        <Line X2="{Binding ActualWidth, RelativeSource={RelativeSource Self}}"
                              Stroke="{Binding Path=BorderBrush, RelativeSource={RelativeSource AncestorType={x:Type s:LogarithmicNumericAxis}}}"
                              StrokeThickness="2"
                              StrokeDashArray=""
                              HorizontalAlignment="Stretch" VerticalAlignment="Center"></Line>
                        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding}" Background="White" Padding="5"
                                   Foreground="{Binding Path=BorderBrush, RelativeSource={RelativeSource AncestorType={x:Type s:NumericAxis}}}"
                                   Grid.Row="0"/>
                        <TextBlock HorizontalAlignment="Left" VerticalAlignment="Bottom" Background="White" Padding="2,0,0,0"
                                   Text="{Binding Path=VisibleRange.Min, RelativeSource={RelativeSource AncestorType={x:Type s:NumericAxis}}}"
                                   Foreground="{Binding Path=BorderBrush, RelativeSource={RelativeSource AncestorType={x:Type s:NumericAxis}}}"
                                   Grid.Row="1"/>
                        <TextBlock HorizontalAlignment="Right" VerticalAlignment="Bottom" Background="White" Padding="0,0,2,0"
                                   Text="{Binding Path=VisibleRange.Max, RelativeSource={RelativeSource AncestorType={x:Type s:NumericAxis}}}"
                                   Foreground="{Binding Path=BorderBrush, RelativeSource={RelativeSource AncestorType={x:Type s:NumericAxis}}}"
                                   Grid.Row="1"/>
                    </Grid>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

The axes are:

            <s:SciChartSurface.YAxes>
            <s:LogarithmicNumericAxis x:Name="RhAxis" AxisAlignment="Top" VisibleRange="0.2,2000" FlipCoordinates="True" 
                                      DrawMajorTicks="False" DrawMinorTicks="False" DrawLabels="False" Id="RhAxis"
                                      AxisTitle="Rh" TitleStyle="{StaticResource YAxisTitleStyle}"
                                      BorderThickness="2,0,2,0"
                                      BorderBrush="{Binding ElementName=HResitivitySeries, Path=SeriesColor, Converter={StaticResource ColorToBrushConverter}}"/>
            <s:LogarithmicNumericAxis x:Name="RvAxis" AxisAlignment="Top" VisibleRange="0.2,2000" FlipCoordinates="True" 
                                      DrawMajorTicks="False" DrawMinorTicks="False" DrawLabels="False" Id="RvAxis"
                                      AxisTitle="Rv" TitleStyle="{StaticResource YAxisTitleStyle}"
                                      BorderThickness="2,0,2,0"
                                      BorderBrush="{Binding ElementName=VResitivitySeries, Path=SeriesColor, Converter={StaticResource ColorToBrushConverter}}"/>
        </s:SciChartSurface.YAxes>

The results look very good. I have attached an image.

Images
  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.