Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
180
Re: XamWebChart: Move legend to top of chart
posted

How do you move the legend to the top of the chart?

  • 26458
    Suggested Answer
    Offline posted

    You have to set a custom control template for the chart.

    If your chart is defined in c#, the easiest way to do this would be to create a control template in xaml and add it to the page resources, then assign it to the chart in code. Otherwise, you'll have to create the entire template in c#

    <UserControl.Resources>
       <ControlTemplate TargetType="igChart:XamWebChart" x:Key="ChartTemplate">
          <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
             <Grid x:Name="RootElement" Background="{TemplateBinding Background}" Margin="{TemplateBinding Padding}" >

             <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
             </Grid.RowDefinitions>

             <Grid x:Name="CaptionPanel" Grid.Row="0"/>
             <Grid x:Name="LegendPanel" Grid.Row="1"/>
             <Grid x:Name="ScenePanel" Grid.Row="2"/>
             </Grid>
          </Border>
       </ControlTemplate>
    </UserControl.Resources>

     

    private void UserControl_Loaded(object sender, RoutedEventArgs e)
    {
       XamWebChart chart = new XamWebChart();
       chart.Series.Add(new Series());
       chart.Series[0].DataSource = new int[] { 1, 2, 3 };
       ControlTemplate chartTemplate = this.Resources["ChartTemplate"] as ControlTemplate;
       if (chartTemplate != null)
       {
          chart.Template = chartTemplate;
       }
       LayoutRoot.Children.Add(chart);
    }