This is a migrated thread and some comments may be shown as answers.

Chart dotted line style using pallette colors

2 Answers 40 Views
Chart
This is a migrated thread and some comments may be shown as answers.
wvandeneede
Top achievements
Rank 1
wvandeneede asked on 22 Dec 2011, 08:49 AM
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 Answers, 1 is accepted

Sort by
0
Accepted
Sia
Telerik team
answered on 26 Dec 2011, 02:48 PM
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 >>

0
wvandeneede
Top achievements
Rank 1
answered on 26 Dec 2011, 03:48 PM
This works perfectly

Thanks!

Tags
Chart
Asked by
wvandeneede
Top achievements
Rank 1
Answers by
Sia
Telerik team
wvandeneede
Top achievements
Rank 1
Share this question
or