Adding a horizontal line to a Silverlight Toolkit column chart

Question

I am using the Silverlight Toolkit in a WPF project and I would like to add a dashed red horizontal line to a column chart at a Y-axis value that I can specify. I have modified the chart template and successfully added a line, but I'm not sure how to get the line to display at the y-axis value that I want and how to get it to stretch across the entire chart. Here is a picture of the chart I have so far: enter image description here

and here is the chart template XAML code that I am using to generate it:

            <charting:Chart Name="chartUsageHours" Grid.Column="1" BorderThickness="0" Padding="0" Loaded="chartUsageHours_Loaded">
            <charting:Chart.Template>
                <ControlTemplate TargetType="{x:Type charting:Chart}">
                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <datavis:Title Content="{TemplateBinding Title}" Style="{TemplateBinding TitleStyle}" />
                            <chartingprimitives:EdgePanel Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}" Grid.Row="1" Margin="0,0,0,0">
                                <Grid Panel.ZIndex="-1" Style="{TemplateBinding PlotAreaStyle}" />
                                <Border Panel.ZIndex="10" BorderBrush="#FF919191" BorderThickness="1, 0, 0, 1" />
                                <Grid Name="HoursThresholdContainer" Canvas.ZIndex="1" Background="Transparent">
                                    <Grid Name="HoursThreshold">
                                        <Line Name="Horizontal" HorizontalAlignment="Stretch" X1="0" Y1="100" X2="600" Y2="100" Stroke="Red" StrokeDashArray="4, 2"/>
                                    </Grid>
                                </Grid>
                            </chartingprimitives:EdgePanel>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </charting:Chart.Template>
            <charting:Chart.Series>
                <charting:StackedColumnSeries Visibility="{Binding Include_OnTimeVsFitTime, Converter={StaticResource BooleanToVisibilityConverter}}">
                    <charting:StackedColumnSeries.IndependentAxis>
                        <charting:CategoryAxis Orientation="X" SortOrder="None" ShowGridLines="False">
                            <charting:CategoryAxis.AxisLabelStyle>
                                <Style TargetType="charting:AxisLabel">
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="charting:AxisLabel">
                                                <TextBlock Text="{Binding Converter={StaticResource DateStringConverter}}" FontSize="8">
                                                    <TextBlock.LayoutTransform>
                                                        <RotateTransform Angle="-90"/>
                                                    </TextBlock.LayoutTransform>
                                                </TextBlock>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </charting:CategoryAxis.AxisLabelStyle>
                        </charting:CategoryAxis>
                    </charting:StackedColumnSeries.IndependentAxis>
                    <charting:SeriesDefinition ItemsSource="{Binding ChartUsageHours}" DependentValuePath="Value" IndependentValuePath="Key" />
                    <charting:SeriesDefinition ItemsSource="{Binding ChartOnTimeHours}" DependentValuePath="Value" IndependentValuePath="Key" />
                </charting:StackedColumnSeries>
                <charting:StackedColumnSeries Visibility="{Binding DontInclude_OnTimeVsFitTime, Converter={StaticResource BooleanToVisibilityConverter}}">
                    <charting:SeriesDefinition ItemsSource="{Binding ChartUsageHours}" DependentValuePath="Value" IndependentValuePath="Key" />
                </charting:StackedColumnSeries>
            </charting:Chart.Series>
        </charting:Chart>

Does anyone have an idea on how to do this?

Thanks, Paul

score 5 · Accepted Answer · answered Sep 15 '11 at 16:39

5

By the way I have created a more generic chart which works with any kind of series (Column, Bar, StackedColumn etc) and displays any value as a line.

enter image description here

I've explained the usage of this chart in my blog post.

Source code can be downloaded here.

answered Sep 15 '11 at 16:39

vortexwolf

13,967
2
54
72

Really nice work there vorrtex! I haven't really looked at your code yet, but I look forward to learning a few things. – PIntag Sep 16 '11 at 00:15
I've looked at your I've changed my accepted answer to this because it is a better method than I was using. Nice solution. – PIntag Sep 26 '11 at 22:31

score 2 · Answer 2 · answered Jul 19 '11 at 17:35

2

You can set a Line's Stretch="Fill" to make it stretch the whole length

As for aligning it along the Y-Axis, I would try either binding to the Y1/Y2 properties, or putting the line in a Canvas or Grid control which holds both the Chart and the Line and binding Canvas.Top to set its location

answered Jul 19 '11 at 17:35

Rachel

130,264
66
304
490

Thanks, the Stretch="Fill" works great. As far as the Y1/Y2 binding, what exactly do I bind it to so that it reflects the value on the Y-axis? – PIntag Jul 19 '11 at 18:16
@PIntag What is the red line supposed to represent? Is it something based on the data, some static value you want to define in your XAML, or something else? – Rachel Jul 19 '11 at 18:48
Sorry for not being clearer. It is a threshold value based on the data. For example, on the chart fragment I pasted above, I'd like to specify that the line be displayed at 4.5 Hours of Usage. The Y1/Y2 values for the Line object seem to represent raw units, not the data values on the Y-axis. – PIntag Jul 19 '11 at 18:59

score 1 · Answer 3 · answered Aug 04 '11 at 19:14

1

to get the y location of the line you would need to call the GetPlotAreaCoordinate method on your Y axis

chart.Axes[1].GetPlotAreaCoordinate(value) // you could name your axis if you like.

answered Aug 04 '11 at 19:14

jasonmw

1,138
9
20

score 0 · Answer 4 · answered Sep 08 '11 at 19:28

0

I ended up implementing something based on the techniques described here http://www.scottlogic.co.uk/blog/colin/2009/03/adding-a-location-crosshair-to-silverlight-charts-again/.

answered Sep 08 '11 at 19:28

PIntag

932
11
26

Adding a horizontal line to a Silverlight Toolkit column chart

4 Answers4

Linked