retemplate radchart title area

4 posts, 0 answers
  1. william a
    william a avatar
    2 posts
    Member since:
    Aug 2009

    Posted 21 Aug 2009 Link to this post

    Is it possible to redefine the control template for the title area in RadChart for SL3?  Not just changing it's font, but moving it's location and freeing up the area?

    For my combination line and area series graph, at 230pxX100px, the title is taking up half of the area of the graph. I would like to move the title up and over (ala Canvas. Left and Canvas.Top) and make the graph area use the left over space.

    Thank you,

    William
  2. Dwight
    Admin
    Dwight avatar
    475 posts

    Posted 26 Aug 2009 Link to this post

    Hi William,

    You will need to re-template the chart. You can find information on how to achieve that in our help, which is available online at http://www.telerik.com/help/silverlight/chart-customize-chart-layout.html

    Best,
    Evtim
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. william a
    william a avatar
    2 posts
    Member since:
    Aug 2009

    Posted 27 Aug 2009 Link to this post

    Thanks for the link.
    I had been to that area of the online docs, but it only shows how to manipulate the legend and chart areas that are already defined.  I have refdefined the layout of my chart pieces, but the default legend and title areas are too big and render out side the control area. 

    I'ts the default layouts themselves I want to change, the chartarea, legend area and title areas.  Meaning, the legend area is defined somewhere (DataTemplate) as a textbox with thick ovals stacked underneath it.  I would like to redefine the legend area as a thin, horizontal area with smaller ovals (or even dots) to denote the series names leading out to the right.
    So, to visualize the desired layout of this chart. There would be 2 rows in a grid, with 2 columns.  The first row and column, would hold the title, be about 20 pixels high and hold the the textblock for a title.  The second column of that row, would hold the legend - a textblock, and then those series identifier ovals held in a stackpanel horizontally aligned.  The second row, spanning 2 columns would hold the chart area and take the remainder of the available area, star sized.
    I think the answer is also within the the header template, but I am not sure how to manipulate/redefine the header template of the legend - or if this is possible.

  4. Dwight
    Admin
    Dwight avatar
    475 posts

    Posted 02 Sep 2009 Link to this post

    Hi william,

    If you only need to hide the title, you can just set the width and height of the Title to 0. That way it will not take space. The ChartLegend you need to re-style. Here is the default style:
    <Style TargetType="telerikCharting:ChartLegend"
      <Setter Property="Foreground" Value="{StaticResource LegendForeground}" /> 
      <Setter Property="Template" > 
        <Setter.Value> 
          <ControlTemplate TargetType="telerikCharting:ChartLegend"
            <Border Margin="{TemplateBinding Padding}" Background="{TemplateBinding Background}"
              <Grid Margin="10,10,30,0"
                <Grid.RowDefinitions> 
                  <RowDefinition Height="Auto" /> 
                  <RowDefinition Height="*" /> 
                </Grid.RowDefinitions> 
                <ContentControl Foreground="{TemplateBinding Foreground}" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" /> 
                <ItemsPresenter Grid.Row="1" Height="{TemplateBinding ActualHeight}" /> 
              </Grid> 
            </Border> 
          </ControlTemplate> 
        </Setter.Value> 
      </Setter> 
      <Setter Property="ItemsPanel" > 
        <Setter.Value> 
          <ItemsPanelTemplate> 
            <StackPanel /> 
          </ItemsPanelTemplate> 
        </Setter.Value> 
       </Setter> 
       <Setter Property="HeaderTemplate" > 
         <Setter.Value> 
           <DataTemplate> 
             <Grid> 
               <TextBlock FontSize="12" FontWeight="Bold" Padding="0,0,0,2" HorizontalAlignment="Left" Width="Auto" Height="Auto" Text="{Binding}" /> 
             </Grid> 
           </DataTemplate> 
         </Setter.Value> 
       </Setter> 
       <Setter Property="Margin" Value="10,0,0,0"/> 
    </Style> 

    Best regards,
    Evtim
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top