Dashed / Dotted Line Style in Legend

3 posts, 0 answers
  1. Scott
    Scott avatar
    5 posts
    Member since:
    Jun 2006

    Posted 17 Jun 2010 Link to this post

    Hello,

    I am looking for a way to use the custom data series line styles (dotted and dashed lines) I am using, and display them in the legend. I'm required to show the lines as different line styles with the SAME color for each series, thus my need to differentiate them by line style only.

    I've creating the line styles using your example code:

                       Style pathStyle1 = new Style(typeof(Path));
                        pathStyle1.Setters.Add(new Setter(Shape.StrokeDashArrayProperty, "1"));
                        pathStyle1.Setters.Add(new Setter(Shape.StrokeProperty, new SolidColorBrush(Colors.Cyan)));
                        pathStyle1.Setters.Add(new Setter(Shape.StrokeThicknessProperty, 3));

                        Style lineStyle1 = new Style(typeof(Telerik.Windows.Controls.Charting.SelfDrawingSeries));
                        lineStyle1.Setters.Add(new Setter(SelfDrawingSeries.BorderLineStyleProperty, pathStyle1));
                        series.Definition.SeriesStyle = lineStyle1;

    Is there a way to show the same Shape.StrokeDashArrayProperty, "1") line within the legend area? And while I'm wishing, is there a way to do this programmatically as I populating the chart dynamically?

    Thanks!

    Scott


  2. Sia
    Admin
    Sia avatar
    667 posts

    Posted 22 Jun 2010 Link to this post

    Hello Scott,

    At the present time you need to retemplate the LegendItems to make them have solid and dashed lines as markers. Here are the steps how to achieve that:

    1. Add two styles in your resources - one for dashed line and one for normal.
    Here is the first one:
    <Style x:Key="DashedLegendItem" TargetType="charting:ChartLegendItem">
        <Setter Property="Foreground" Value="#FF000000" />
        <Setter Property="Padding" Value="5,0,5,0" />
        <Setter Property="Margin" Value="0,3,0,2" />
        <Setter Property="Template" >
            <Setter.Value>
                <ControlTemplate TargetType="charting:ChartLegendItem">
                    <Grid x:Name="PART_MainContainer" HorizontalAlignment="Stretch" VerticalAlignment="Top">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Line Width="16"
                                Margin="{TemplateBinding Margin}"
                                Stroke="Red"
                                StrokeThickness="1"
                                StrokeDashArray="1 1"
                                X1 = "0" Y1 = "0"
                                X2 = "10" Y2 = "0"
                                Stretch="Fill" />
      
                        <TextBlock Grid.Column="1"
                            Padding="{TemplateBinding Padding}"
                            Margin="{TemplateBinding Margin}"
                            Foreground="{TemplateBinding Foreground}"
                            Text="{TemplateBinding Label}" />
      
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    The "NormalLegendItem" one is almost the same, just remove the line where the StrokeDashArray property is set.

    2. In your code behind you need to generate the Legend's items and set the corresponding style to them as follows:
    RadChart1.DefaultView.ChartLegend.UseAutoGeneratedItems = false;
     
    ChartLegendItem item1 = new ChartLegendItem();
    item1.Label = "Item 1";
    item1.Style = this.Resources["DashedLegendItem"] as Style;
    RadChart1.DefaultView.ChartLegend.Items.Add(item1);
    ChartLegendItem item2 = new ChartLegendItem();
    item2.Label = "Item 2";
    item2.Style = this.Resources["NormalLegendItem"] as Style;
    RadChart1.DefaultView.ChartLegend.Items.Add(item2);

    3. Make all lines in your RadChart have the same color as background:
    RadChart1.DefaultView.ChartArea.PaletteBrushes.Add(new SolidColorBrush(Colors.Red));

    We have this feature request logged in our Public Issue Tracking system and it will be built in our controls in one of the feature versions of our RadChart control. You can vote for it in order to increase its priority.

    I hope this helps you.

    Greetings,
    Sia
    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. DevCraft banner
  4. Scott
    Scott avatar
    5 posts
    Member since:
    Jun 2006

    Posted 23 Jun 2010 Link to this post

    Thanks so much. You guys are great.
Back to Top