Show chart title

4 posts, 1 answers
  1. Alberto
    Alberto avatar
    26 posts
    Member since:
    Nov 2012

    Posted 24 Sep 2013 Link to this post

    Hi, I am able to show a title in the RadChart, something like this:

    Chart.DefaultView.ChartTitle.Content = "Title";

    or

    <telerik:RadChart.DefaultView>
                    <telerik:ChartDefaultView>
                        <telerik:ChartDefaultView.ChartTitle>
                            <telerik:ChartTitle Content="Title" HorizontalAlignment="Center">

    Is it possible to show a title in a RadPolarChart, RadRadialGauge and RadCartesianChart?

    I would like to add a title for those kind of charts if possible.

    Thanks,

    Alberto
  2. Answer
    Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 27 Sep 2013 Link to this post

    Hi Alberto,

    Although RadChartView (RadCartesianChart, RadPolarChart, RadPieChart) and RadGauge do not have built-in titles, you can easily create one, using WPF's built-in controls:
    <Border BorderBrush="Black" BorderThickness="1">
        <Grid Margin="10">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
     
            <TextBlock Grid.Row="0" Text="Chart Title"
                   HorizontalAlignment="Center"/>
     
            <telerik:RadCartesianChart Grid.Row="1">
                <!--...-->
            </telerik:RadCartesianChart>
        </Grid>
    </Border>

    I have attached a sample project to demonstrate this with a title UserControl that looks like RadChart's.
     
    Regards,
    Petar Kirov
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Avneesh
    Avneesh avatar
    13 posts
    Member since:
    Jul 2013

    Posted 17 Oct 2013 Link to this post

    Hi Petar,
    The other way would be to insert a title in Cartesian chart control template but i have noticed that default template obtained from expression blend doesn't show tracker line unless the mouse is directly over the series.will it be possible to post the correct control template of cartesianchart used by telerik and I can try with that?

    Thanks
    Avneesh
  5. Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 22 Oct 2013 Link to this post

    Hi Alberto,

     Yes, you can add title by retemplating the default RadChartBase style inside the first grid of the Cartesian Chart style, as shown below (to demonstrate this I added Label before the ContentPresenter):

    <Style x:Key="RadChartBaseStyle" TargetType="telerik:RadChartBase">
        <Setter Property="FontFamily" Value="Segoe UI"/>
        <Setter Property="FontSize" Value="11"/>
        <Setter Property="MinWidth" Value="100"/>
        <Setter Property="MinHeight" Value="100"/>
        <Setter Property="Background" Value="Yellow" />
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:RadChartBase">
                    <Border x:Name="layoutRoot"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                        <Grid>
                            <Label Name="TitleBar" Background="WhiteSmoke" VerticalAlignment="Top"
                                  HorizontalContentAlignment="Center" Content="My Title Here" ClipToBounds="False"/>
                            <ContentPresenter x:Name="emptyContent"
                                          IsHitTestVisible="False"
                                          Content="{TemplateBinding EmptyContent}"
                                          ContentTemplate="{TemplateBinding EmptyContentTemplate}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          Visibility="Collapsed"/>
                            <Canvas x:Name="adornerContainer" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent">
                                <Canvas x:Name="labelContainer" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                    <Canvas x:Name="renderSurface" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                        <Border x:Name="plotAreaDecoration" Style="{TemplateBinding PlotAreaStyle}"/>
                                    </Canvas>
                                </Canvas>
                            </Canvas>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="TrackBallLineStyle">
            <Setter.Value>
                <Style TargetType="Polyline">
                    <Setter Property="Stroke" Value="#FF828282" />
                    <Setter Property="StrokeThickness" Value="2" />
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="DragZoomBorderStyle">
            <Setter.Value>
                <Style TargetType="Border">
                    <Setter Property="BorderBrush" Value="#FF828282" />
                    <Setter Property="BorderThickness" Value="1" />
                    <Setter Property="Background" Value="#40FFFFFF" />
                </Style>
            </Setter.Value>
        </Setter>
    </Style>

    The Image attached demonstrates the result. Feel free to modify this per your scenario needs.
    Also you can find the default templates and styles of Radcontrols in the source code which is distributed to the licensed developers under your local installation path in the Themes folder. 

    Regards,
    Evgenia
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
Back to Top