Chart dotted line style using pallette colors

[wvandeneede]

I am trying to figure out how to style a LineSeriesDefinition with a dotted line but using a custom defined palette

The palette is setup in code like this in code behind:

            BrushCollection paletteColors = new BrushCollection();
            paletteColors.Add(new SolidColorBrush(ColorPaletteBase.HexStringToColor("#44BBBBBB")));
            paletteColors.Add(new SolidColorBrush(ColorPaletteBase.HexStringToColor("#44555555")));
            paletteColors.Add(new SolidColorBrush(ColorPaletteBase.HexStringToColor("#FF329C8E")));
            paletteColors.Add(new SolidColorBrush(ColorPaletteBase.HexStringToColor("#FF309A8C")));
            paletteColors.Add(new SolidColorBrush(ColorPaletteBase.HexStringToColor("#FFFDD20F")));
            paletteColors.Add(new SolidColorBrush(ColorPaletteBase.HexStringToColor("#FFFBD00D")));
            paletteColors.Add(new SolidColorBrush(ColorPaletteBase.HexStringToColor("#FFAE1F25")));
            paletteColors.Add(new SolidColorBrush(ColorPaletteBase.HexStringToColor("#FFAC1D23")));
 
            foreach (Brush item in paletteColors)
            {
                DataChart.PaletteBrushes.Add(item);
            }

I've create a style like this:

    <Style x:Name="DottedLineStyle" TargetType="charting:SelfDrawingSeries">
      <Setter Property="BorderLineStyle">
        <Setter.Value>
          <Style TargetType="Path">
            <Setter Property="StrokeDashArray" Value="1" />
            <Setter Property="StrokeThickness" Value="3" />
          </Style>
        </Setter.Value>
      </Setter>
    </Style>

and a lineseriesdefinition like:

          <charting:SeriesMapping LegendLabel="NetSales">
            <charting:SeriesMapping.SeriesDefinition>
              <charting:LineSeriesDefinition AxisName="Secondary" SeriesStyle="{StaticResource DottedLineStyle}" ShowItemLabels="False" ShowItemToolTips="True" ItemToolTipFormat="Net Sales&#13;&#10;Week: #XCAT&#13;&#10;Value: #Y{F2}"/>
            </charting:SeriesMapping.SeriesDefinition>
            <charting:ItemMapping DataPointMember="YValue" FieldName="NetSales" />
            <charting:ItemMapping DataPointMember="XCategory" FieldName="YearMonth" />
          </charting:SeriesMapping> 

The probem now is that the line doesn't take the color of my defined palette.

With a bar style it seems to work though definig a style like:

    <Style
    x:Key="FlatBarStyle"
    TargetType="charting:Bar">
      <Setter
          Property="Template">
        <Setter.Value>
          <ControlTemplate
              TargetType="charting:Bar">
            <Canvas>
              <Rectangle
                  x:Name="PART_DefiningGeometry"
                  Height="{TemplateBinding ItemActualHeight}"
                  Width="{TemplateBinding ItemActualWidth}"
                  RadiusX="0" 
                  RadiusY="0"
                  Style="{TemplateBinding ItemStyle}" />
            </Canvas>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style> 

[Sia]

Hi,

Defining the DottedLineStyle as mentioned overwrites the stroke property and you get transparent lines. That is why (having in mind that you use a custom palette) I can suggest you to set custom template instead:

<Style x:Name="DottedLineStyle" TargetType="chart:SelfDrawingSeries">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="chart:BaseLineSeries">
                <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" x:Name="PART_MainContainer">
                    <Grid.Clip>
                        <RectangleGeometry x:Name="PART_AnimationClipGeometry">
                            <RectangleGeometry.Transform>
                                <ScaleTransform x:Name="PART_AnimationTransform" ScaleX="0"/>
                            </RectangleGeometry.Transform>
                        </RectangleGeometry>
                    </Grid.Clip>
                    <Path x:Name="PART_TopBorderLine"
                                Fill="Transparent"
                                Style="{TemplateBinding BorderLineStyle}"
                                StrokeLineJoin="Round"
                                StrokeDashArray="1"
                                IsHitTestVisible="False">
                        <Path.Data>
                            <PathGeometry x:Name="PART_TopBorderLineGeometry" />
                        </Path.Data>
                    </Path>
                    <ItemsPresenter />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Everything else should remain the same. Please let me know how this works on your end.

Greetings,
Sia
the Telerik team

[wvandeneede]

This works perfectly

Thanks!