Howto template/style Axis to remove elements

[Adam Petaccia]

I'm trying to create an effect where sometimes elements of a RadChart are hidden, but I'm having problems on the Axes (X and Y). I would like to hide everything BUT the title on the Y Axis, and hide only the title on the X axis.

My problem is that this seems impossible to do through XAML, and the examples seem convinced that I'm using Expression and codebehind. I'm not, and I'm not, because charts may not be instantiated when this effect occurs, and will miss the event.  I'm bewildered by the various properties and classes for supporting an Axis. What is the difference between AxisYStyle, AxisY.Styles, and AxisYItemLabelStyle? The RadCharts' Axes seem to ignore whatever style I place on them, and the only way I'm seeing to achieve my effect is to hardcode it into the XAML, which is not what I want because this effect is supposed to be conditional.

[Sia]

Hi Adam Petaccia,

I am not sure I understand your point correctly. Do you want to hide this elements in XAML or in code-behind? 

To hide them in XAML please use the following approach:

<telerik:RadChart Name="Chart" >
    <telerik:RadChart.DefaultView>
        <telerik:ChartDefaultView>
            <telerik:ChartDefaultView.ChartLegend>
                        <telerik:ChartLegend x:Name="ChartLegend" />
            </telerik:ChartDefaultView.ChartLegend>
            <telerik:ChartDefaultView.ChartArea>
                <telerik:ChartArea Name="ChartArea" LegendName="ChartLegend" ClipToBounds="False" >
                    <telerik:ChartArea.DataSeries>
                        <telerik:DataSeries>
                            <telerik:DataSeries.Definition>
                                <telerik:BarSeriesDefinition />
                            </telerik:DataSeries.Definition>
                            <telerik:DataPoint YValue="10" />
                            <telerik:DataPoint YValue="10" />
                            <telerik:DataPoint YValue="10" />
                        </telerik:DataSeries>
                    </telerik:ChartArea.DataSeries>
                            <telerik:ChartArea.AxisX>
                                <telerik:AxisX />
                            </telerik:ChartArea.AxisX>
                            <telerik:ChartArea.AxisY>
                                <telerik:AxisY Title="AxisY" MinorTicksVisibility="Collapsed" MajorTicksVisibility="Collapsed" AxisLabelsVisibility="Collapsed" />
                            </telerik:ChartArea.AxisY>
                        </telerik:ChartArea>
            </telerik:ChartDefaultView.ChartArea>
        </telerik:ChartDefaultView>
    </telerik:RadChart.DefaultView>
</telerik:RadChart>

To hide them using code-behind:

Chart.DefaultView.ChartArea.AxisY.AxisLabelsVisibility = Visibility.Collapsed;
Chart.DefaultView.ChartArea.AxisY.MinorTicksVisibility = Visibility.Collapsed;
Chart.DefaultView.ChartArea.AxisY.MajorTicksVisibility = Visibility.Collapsed;

Please excuse me if there is some misunderstanding.

All the best,
Sia
the Telerik team

[Adam Petaccia]

I would like to hide them via some type of style or template that could be applied and cleared, as these elements are to be hidden depending on other states of the UI.

[Sia]

Hi Adam Petaccia,

You need to have these resources:

<Window.Resources>
    <Style x:Key="MinorTicksStyle" TargetType="Line">
        <Setter Property="Visibility" Value="Collapsed" />
    </Style>
    <Style x:Key="TicksStyle" TargetType="Line">
        <Setter Property="Visibility" Value="Collapsed" />
    </Style>
    <Style x:Key="LabelsStyle" TargetType="TextBlock">
        <Setter Property="Visibility" Value="Collapsed" />
    </Style>
</Window.Resources>

And apply them to the X axis for example: 

<telerikChart:RadChart Name="Chart" >
    <telerikChart:RadChart.DefaultView>
        <telerikCharting:ChartDefaultView>
            <telerikCharting:ChartDefaultView.ChartLegend>
                <telerikCharting:ChartLegend x:Name="ChartLegend" />
            </telerikCharting:ChartDefaultView.ChartLegend>
            <telerikCharting:ChartDefaultView.ChartArea>
                <telerikCharting:ChartArea Name="ChartArea" LegendName="ChartLegend" ClipToBounds="False" >
                    <telerikCharting:ChartArea.DataSeries>
                        <telerikCharting:DataSeries>
                            <telerikCharting:DataSeries.Definition>
                                <telerikCharting:BarSeriesDefinition />
                            </telerikCharting:DataSeries.Definition>
                            <telerikCharting:DataPoint YValue="10" />
                            <telerikCharting:DataPoint YValue="10" />
                            <telerikCharting:DataPoint YValue="10" />
                        </telerikCharting:DataSeries>
                    </telerikCharting:ChartArea.DataSeries>
                    <telerikCharting:ChartArea.AxisX>
                        <telerikCharting:AxisX >
                            <telerikCharting:AxisX.AxisStyles>
                                <telerikCharting:AxisStyles MinorTickLineStyle="{StaticResource MinorTicksStyle}" TickLineStyle="{StaticResource TicksStyle}"  ItemLabelStyle="{StaticResource LabelsStyle}" />
                            </telerikCharting:AxisX.AxisStyles>
                        </telerikCharting:AxisX>
                    </telerikCharting:ChartArea.AxisX>
                </telerikCharting:ChartArea>
            </telerikCharting:ChartDefaultView.ChartArea>
            </telerikCharting:ChartDefaultView>
    </telerikChart:RadChart.DefaultView>
</telerikChart:RadChart>

where the name spaces mappings are:

• xmlns:telerikControls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
• xmlns:telerikChart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"
• xmlns:telerikCharting="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting"

Please try this and let me know if somethings else occurs.

Kind regards,
Sia
the Telerik team

[Adam Petaccia]

Mostly good at this point; I'm applying the setters in a Triggers section, and it would appear that just applying a style removes the XAxis tick lines, which is not desired;

[Sia]

Hi Adam Petaccia,

The only thing which comes to my mind is that you are styling your ticks on the X axis and the Y axis with the same style. If this is true, please use different styles for the minor and the major ticks (for every axis respectively).

All the best,
Sia
the Telerik team

[Adam Petaccia]

Almost almost there; I'm still seeing one issue where the zero line no longer displays for Horizontal bar charts.

[Sia]

Hello Adam Petaccia,

Unfortunately I am not sure what causes such behavior. Can you please give us more information about this problem? A sample project will be highly appreciated.

Thank you in advance,
Sia
the Telerik team