Chart dotted line style using pallette colors

3 posts, 1 answers
  1. wvandeneede
    wvandeneede avatar
    2 posts
    Member since:
    Feb 2007

    Posted 22 Dec 2011 Link to this post

    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



  2. Answer
    Sia
    Admin
    Sia avatar
    756 posts

    Posted 26 Dec 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. wvandeneede
    wvandeneede avatar
    2 posts
    Member since:
    Feb 2007

    Posted 26 Dec 2011 Link to this post

    This works perfectly

    Thanks!

Back to Top