Center XAxis on the 0 of YAxis on a RadCartesianChart

[Justin]

Hello,

I'm currently using a RadCartesianChart. I want to centre my HorizontalAxis which is a LinearAxis on my VerticalAxis.
I want to know if it's possible and how to do it? I've searched for a long time on this forum, but I didn't find any solution. I see an old subject with a conclusion that is impossible.

 

Thanks for your help. Tell me if you need some code or anything else.
Justin

[Martin Ivanov]

Hello Justin,

There is no mechanism that allows this but we have an internal feature request to implement such behavior. I've made it public and you can find it in the feedback portal. I also updated your Telerik points because you brought this to our attention.

In the meantime, you can take a look at the following SDK sample which shows how to hide the chart axis and create custom visuals that mimic an axis. The custom visuals can be positioned at a specific point on the axis.

https://github.com/telerik/xaml-sdk/tree/master/ChartView/WPF/AxisLikeAnnotations

Regards,
Martin Ivanov
Progress Telerik

[Justin]

You are using Categories but I have a LinearAxis, is it hard to adapt it ?

[Martin Ivanov]

Can you elaborate more on this? The SDK project contains two examples - one with a LinearAxis and another with CategoricalAxis. Can you tell me what exactly the SDK project misses?

[Justin]

Here's my chart view:

<UserControl x:Class="MyProject.GraphView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:MyProject"
             xmlns:precisio="clr-namespace:MyProject;assembly=Project"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             xmlns:wpf="<External Project>"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <!-- for the label format I used this link to have correct values: https://docs.telerik.com/devtools/wpf/controls/radchart/features/format-expressions -->
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/ConceptStyles/Telerik/Telerik.Windows.Controls.Chart.xaml" />
                <ResourceDictionary>
                    <local:GraphLineToLegendSettingsConverter x:Key="GraphLineToLegendSettingsConverterForAxisY1" Axis="AxisY1" />
                    <local:GraphLineToLegendSettingsConverter x:Key="GraphLineToLegendSettingsConverterForAxisY2" Axis="AxisY2" />
                    <telerik:LinearAxis ElementBrush="{DynamicResource TextForeground}"
                                        Title="{Binding Y1AxisLabel}" FontFamily="{DynamicResource FontFamilyText}"
                                        RangeExtendDirection="None"
                                        Minimum="{Binding Y1Min}" Maximum="{Binding Y1Max}"
                                        Visibility="{Binding Y1Visibility}"
                                        LabelFormat="#,##0.0"
                                        DesiredTickCount="{Binding GraphInformation.Configuration.TickCount}" x:Key="Y1LinearAxis"
                                        TickOrigin="0">
                    </telerik:LinearAxis>
                    <telerik:LogarithmicAxis ElementBrush="{DynamicResource TextForeground}"
                                        Title="{Binding Y1AxisLabel}" FontFamily="{DynamicResource FontFamilyText}"
                                        RangeExtendDirection="None"
                                        Minimum="{Binding Y1Min}" Maximum="{Binding Y1Max}"
                                        Visibility="{Binding Y1Visibility}"
                                        LabelFormat="G2"
                                        DesiredTickCount="{Binding GraphInformation.Configuration.TickCount}" x:Key="Y1LogarithmicAxis" />
                    <telerik:LinearAxis ElementBrush="{DynamicResource TextForeground}"
                                        Title="{Binding Y2AxisLabel}" FontFamily="{DynamicResource FontFamilyText}"
                                        HorizontalLocation="Right"
                                        RangeExtendDirection="None"
                                        LineDashArray="10,2"
                                        Minimum="{Binding Y2Min}" Maximum="{Binding Y2Max}"
                                        Visibility="{Binding Y2Visibility}"
                                        LabelFormat="#,##0.0"
                                        DesiredTickCount="{Binding GraphInformation.Configuration.TickCount}" x:Key="Y2LinearAxis"
                                        TickOrigin="0" />
                    <telerik:LogarithmicAxis ElementBrush="{DynamicResource TextForeground}"
                                             HorizontalLocation="Right"
                                        Title="{Binding Y2AxisLabel}" FontFamily="{DynamicResource FontFamilyText}"
                                        RangeExtendDirection="None"
                                        Minimum="{Binding Y2Min}" Maximum="{Binding Y2Max}"
                                        Visibility="{Binding Y2Visibility}"
                                        LabelFormat="G2"
                                        DesiredTickCount="{Binding GraphInformation.Configuration.TickCount}" x:Key="Y2LogarithmicAxis" />
                    <telerik:ChartPalette x:Key="customPalette">
                        <telerik:ChartPalette.GlobalEntries>
                            <telerik:PaletteEntry Fill="Transparent" Stroke="#ff0000" />
                            <telerik:PaletteEntry Fill="Transparent" Stroke="#f0ff00" />
                            <telerik:PaletteEntry Fill="Transparent" Stroke="#22ff00" />
                            <telerik:PaletteEntry Fill="Transparent" Stroke="#91bfff" />
                            <telerik:PaletteEntry Fill="Transparent" Stroke="LightGray" />
                            <telerik:PaletteEntry Fill="Transparent" Stroke="Orange" />
                            <telerik:PaletteEntry Fill="Transparent" Stroke="#f442df" />
                            <telerik:PaletteEntry Fill="Transparent" Stroke="#2bdcef" />
                            <telerik:PaletteEntry Fill="Transparent" Stroke="#cbef75" />
                            <telerik:PaletteEntry Fill="Transparent" Stroke="#7D0305" />
                            <telerik:PaletteEntry Fill="Transparent" Stroke="#A20393" />
                            <telerik:PaletteEntry Fill="Transparent" Stroke="#1A03A0" />
                            <telerik:PaletteEntry Fill="Transparent" Stroke="#048284" />
                            <telerik:PaletteEntry Fill="Transparent" Stroke="#007C04" />
                            <telerik:PaletteEntry Fill="Transparent" Stroke="#8D9206" />
                            <telerik:PaletteEntry Fill="Transparent" Stroke="#E8BF9B" />
                            <telerik:PaletteEntry Fill="Transparent" Stroke="#EC8C89" />
                            <telerik:PaletteEntry Fill="Transparent" Stroke="#F66B65" />
                        </telerik:ChartPalette.GlobalEntries>
                    </telerik:ChartPalette>
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
    <DockPanel>
        <Grid DockPanel.Dock="Right" Margin="10,0,10,0">
            <telerik:RadCartesianChart Palette="{StaticResource customPalette}" 
                                       Background="{Binding GraphBackground}" Margin="0" x:Name="chart" MinHeight="300"
                                       KeyboardNavigation.TabNavigation="None" Panel.ZIndex="10" DockPanel.Dock="Bottom">
                <telerik:RadCartesianChart.HorizontalAxis >
                    <telerik:LinearAxis ElementBrush="{DynamicResource TextForeground}"
                                        x:Name="XAxis"
                                        SmartLabelsMode="SmartStep"
                                        Title="{Binding XAxisLabel}" FontFamily="{DynamicResource FontFamilyText}"
                                        RangeExtendDirection="None"
                                        Minimum="{Binding XMin}" Maximum="{Binding XMax}"
                                        LabelFormat="#,##0"
                                        DesiredTickCount="{Binding GraphInformation.Configuration.TickCount}"
                                        TickOrigin="0" />
                </telerik:RadCartesianChart.HorizontalAxis>
                <telerik:RadCartesianChart.VerticalAxis>
                    <Binding Path="GraphInformation.Configuration.IsY1AxisLinear" Converter="{local:BoolToTelerikAxisConverter AxisWhenTrue={StaticResource Y1LinearAxis}, AxisWhenFalse={StaticResource Y1LogarithmicAxis}}" />
                </telerik:RadCartesianChart.VerticalAxis>
                <telerik:RadCartesianChart.Grid>
                    <telerik:CartesianChartGrid MajorLinesVisibility="Y" Opacity="0.4" MajorYLineDashArray="1" Visibility="{Binding GraphInformation.Configuration.ShowGrid, Converter={wpf:BoolToVisibilityConverter}}">
                    </telerik:CartesianChartGrid>
                </telerik:RadCartesianChart.Grid>
                <telerik:RadCartesianChart.SeriesProvider>
                    <telerik:ChartSeriesProvider x:Name="chartSeriesProvider" Source="{Binding GraphLines}">
                        <telerik:ChartSeriesProvider.SeriesDescriptors>
                            <telerik:ScatterSeriesDescriptor ItemsSourcePath="Data"
                                                             XValuePath="X1"
                                                             YValuePath="Y1">
                                <telerik:ScatterSeriesDescriptor.Style>
                                    <Style TargetType="telerik:ScatterLineSeries" BasedOn="{StaticResource ScatterLineSeriesStyle}">
                                        <Setter Property="StrokeThickness" Value="{DynamicResource LineStrokeThickness}" />
                                        <Setter Property="LegendSettings" Value="{Binding Converter={StaticResource GraphLineToLegendSettingsConverterForAxisY1}}" />
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding Highlighted}" Value="True">
                                                <Setter Property="StrokeThickness" Value="4" />
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </telerik:ScatterSeriesDescriptor.Style>
                            </telerik:ScatterSeriesDescriptor>
                            <telerik:ScatterSeriesDescriptor ItemsSourcePath="Data"
                                                             XValuePath="X2"
                                                             YValuePath="Y2">
                                <telerik:ScatterSeriesDescriptor.Style>
                                    <Style TargetType="telerik:ScatterLineSeries" BasedOn="{StaticResource ScatterLineSeriesStyle}">
                                        <Setter Property="StrokeThickness" Value="{DynamicResource LineStrokeThickness}" />
                                        <!--<Setter Property="Stroke" Value="{Binding Stroke}" />-->
                                        <Setter Property="DashArray" Value="10,2" />
                                        <Setter Property="LegendSettings" Value="{Binding Converter={StaticResource GraphLineToLegendSettingsConverterForAxisY2}}" />
                                        <!--<Setter Property="VerticalAxis" Value="{Binding Y2VerticalAxis}" />-->
                                        <Setter Property="VerticalAxis">
                                            <!-- Value="{Binding IsY2AxisLinear, Converter={local:BoolToTelerikAxisConverter AxisWhenTrue={StaticResource Y2LinearAxis},AxisWhenFalse={StaticResource Y2LogarithmicAxis}}}" -->
                                            <Setter.Value>
                                                <StaticResource ResourceKey="Y2LinearAxis" />
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </telerik:ScatterSeriesDescriptor.Style>
                            </telerik:ScatterSeriesDescriptor>
                        </telerik:ChartSeriesProvider.SeriesDescriptors>
                    </telerik:ChartSeriesProvider>
                </telerik:RadCartesianChart.SeriesProvider>
            </telerik:RadCartesianChart>
            <telerik:RadLegend Items="{Binding LegendItems, ElementName=chart}"
                               x:Name="Legend"
                               Visibility="{Binding GraphConfiguration.ShowLegend, Converter={wpf:BoolToVisibilityConverter VisibilityWhenDisable=Hidden}}"
                               BorderBrush="LightGray" BorderThickness="1"
                               Background="{DynamicResource BackgroundZone2}" Panel.ZIndex="100"
                               HorizontalAlignment="Right" Margin="0,10,70,0"
                               VerticalAlignment="Top" />
        </Grid>
    </DockPanel>
</UserControl>

This need to be generic. The possibility to use the Logarithmc and Linear axis. To start with your class I have some issues. The graph was not showing anymore..... I implement the class NumericAxisExample. I think is that we can't find Y axis from behind ?

[Martin Ivanov]

I've adjusted the example to work with 2 numeric axes and to position a horizontal axis in the middle of the vertical range. Can you try the attached project and see if it helps?