Dashed / Dotted Line Style in Legend

[Scott]

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

[Sia]

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

[Scott]

Thanks so much. You guys are great.