Title in front of PlotArea

6 posts, 1 answers
  1. Dominik
    Dominik avatar
    3 posts
    Member since:
    May 2011

    Posted 25 May 2011 Link to this post

    Hi,

    I'am trying to position the Chart Titles into the ChartPlotArea.
    That's all well and good, but if i'm setting the Background Color of the PlotArea differently than the Background of the ChartArea the PlotArea hides the ChartTitle.
    Setting a ZIndex for the PlotArea and the Title dosn't work.
    Picture without setting a special background color
    Picture with setting a special background color

    Here is my Code:
    <UserControl.Resources>
        <Style x:Key="XTitleStyle" TargetType="{x:Type telerik:AxisTitle}">
            <Setter Property="Margin" Value="0,-32,1,0"/>
            <Setter Property="HorizontalAlignment" Value="Right"/>
            <Setter Property="Panel.ZIndex" Value="10"/>
        </Style>
     
        <Style x:Key="Y1TitleStyle" TargetType="{x:Type telerik:AxisTitle}">
            <Setter Property="VerticalAlignment" Value="Top"/>
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <TransformGroup>
                        <TranslateTransform X="-5" Y="-80"/>
                        <RotateTransform Angle="90"/>
                    </TransformGroup>
                </Setter.Value>
            </Setter>
        </Style>
         
        <Style TargetType="{x:Type telerik:MarkedZone}">
            <Setter Property="Panel.ZIndex" Value="-1"/>
        </Style>
     
    </UserControl.Resources>
     
    <Grid Width="Auto" Height="Auto">
        <telerik:RadChart HorizontalAlignment="Stretch" Margin="10,5,10,5" Name="radChart1" VerticalAlignment="Stretch" BorderThickness="0" Background="{DynamicResource backgroundTabControl}">
     
            <telerik:RadChart.SeriesMappings>
     
                <telerik:SeriesMapping ItemsSource="{Binding Series1, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" >
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:LineSeriesDefinition ShowItemLabels="False" ShowPointMarks="False">
                            <telerik:LineSeriesDefinition.Appearance>
                                <telerik:SeriesAppearanceSettings StrokeThickness="1.5"/>
                            </telerik:LineSeriesDefinition.Appearance>
                        </telerik:LineSeriesDefinition>
                    </telerik:SeriesMapping.SeriesDefinition>
                    <telerik:SeriesMapping.ItemMappings>
                        <telerik:ItemMapping FieldName="Y" DataPointMember="YValue"/>
                    </telerik:SeriesMapping.ItemMappings>
                </telerik:SeriesMapping>
            </telerik:RadChart.SeriesMappings>
     
            <telerik:RadChart.DefaultView>
                <telerik:ChartDefaultView ChartLegend="{x:Null}">
                    <telerik:ChartDefaultView.ChartArea>
                         
                        <telerik:ChartArea EnableAnimations="False" EnableStripLinesAnimation="False" SnapsToDevicePixels="True">
                        <!-- Here I'm setting the Background with PlotAreaStyle-->
                            <telerik:ChartArea.PlotAreaStyle>
                                <Style TargetType="{x:Type telerik:ClipPanel}">
                                    <Setter Property="Background" Value="White"/>
                                    <Setter Property="Panel.ZIndex" Value="-1"/>
                                </Style>
                            </telerik:ChartArea.PlotAreaStyle>
                             
                            <!-- Here I'm setting the Background with a MarkedZone-->
                            <telerik:ChartArea.Annotations>
                                <telerik:MarkedZone Background="White"  />
                            </telerik:ChartArea.Annotations>
                             
                            <telerik:ChartArea.AxisX>
                                <telerik:AxisX AutoRange="False" MajorGridLinesVisibility="Visible" MajorTicksVisibility="Visible" Title="test">
                                    <telerik:AxisX.AxisStyles>
                                        <telerik:AxisStyles TitleStyle="{StaticResource XTitleStyle}" />
                                    </telerik:AxisX.AxisStyles>
                                </telerik:AxisX>
                            </telerik:ChartArea.AxisX>
                            <telerik:ChartArea.AxisY>
                                <telerik:AxisY AutoRange="False" MajorGridLinesVisibility="Visible" MinorGridLinesVisibility="Collapsed" Title="test" PlotAreaAxisVisibility="Visible" StripLinesVisibility="Collapsed">
                                    <telerik:AxisY.AxisStyles>
                                        <telerik:AxisStyles TitleStyle="{StaticResource Y1TitleStyle}"/>
                                    </telerik:AxisY.AxisStyles>
                                </telerik:AxisY>
                            </telerik:ChartArea.AxisY>
                        </telerik:ChartArea>
                    </telerik:ChartDefaultView.ChartArea>
                </telerik:ChartDefaultView>
            </telerik:RadChart.DefaultView>
        </telerik:RadChart>
    </Grid>

    I would like to display the AxisTitle above the PlotArea and above any MarkedZones. Is there any solution?

    Best regards
    Dominik
  2. Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 28 May 2011 Link to this post

    Hi Dominik,

    I reviewed your code snippet but I can't figure out why do you need to set the Background of the Chart via MarkedZone. Why don't you set the Background like this:

    radChart1.DefaultView.ChartArea.Background = new SolidColorBrush(Colors.Azure);

    As another suggestion - you can set the Titles (Labels) directly to the MarkedZone so that they will be visible all the time. This approach is shown in our help topic.

    Best wishes,
    Evgenia
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for WPF is Visual Studio 2017 Ready
  4. Dominik
    Dominik avatar
    3 posts
    Member since:
    May 2011

    Posted 30 May 2011 Link to this post

    Hi Evgenia,

    i just want to set the background of the PlotArea not the background of the ChartArea.
    I'am setting the background of the PlotArea like this:
    <telerik:ChartArea.PlotAreaStyle>
        <Style TargetType="{x:Type telerik:ClipPanel}">
            <Setter Property="Background" Value="White"/>
        </Style>
    </telerik:ChartArea.PlotAreaStyle>

    Setting the background works well, but i would position the axis titles into the PlotArea like in the first picture i posted.
    Then i setting the background of my PlotArea and this background is in front of the axis titles, but i would set the axis titles in foreground.

    Best wishes,
    Dominik
  5. Answer
    Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 02 Jun 2011 Link to this post

    Hello Dominik,

    To be able to have the AxisTitles visible even though you have provided Background for the PlotArea you should set Canvas.ZIndex property for each of them like this:

    <Style x:Key="CustomAxisX" TargetType="telerik:AxisX2D">
               <Setter Property="Canvas.ZIndex" Value="10" />
    </Style>
    <Style x:Key="CustomAxisY" TargetType="telerik:AxisY2D">
           <Setter Property="Canvas.ZIndex" Value="10" />
    </Style>

    Regards,
    Evgenia
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Dominik
    Dominik avatar
    3 posts
    Member since:
    May 2011

    Posted 06 Jun 2011 Link to this post

    Thanks, it works, but not on additional axis.

    regards
    Dominik
  7. Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 09 Jun 2011 Link to this post

    Hello Dominik,

    I'm glad this worked for you. To be able to make this work for the Additional Axes you should set the correct TargetType for their Style. For example:

    <Style x:Key="CustomAxisX" TargetType="telerik:AdditionalAxes2DContainer"
               <Setter Property="Canvas.ZIndex" Value="10" />
    </Style>

    Greetings,
    Evgenia
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top
UI for WPF is Visual Studio 2017 Ready