How to change the color of a DataPoint in a LineSeries ?

Jul 31, 2012 at 6:31 AM

Hi, I am trying to generate a line graph(LineSeries) with the DateTime class object as the X-axis and some random number between 0 to 100 as the Y-axis. But, I need to change the color of the datapoint as per the random number generated. Suppose, the number lies between 0 to 50 then the color of the daptapoint should be green, till 85 it should be orange, till 100 it should be red.

 

Any clues ?

Thanks !

Aug 21, 2012 at 8:31 PM
Edited Aug 21, 2012 at 8:34 PM

You can override the LineDataPoint style, which will allow you to change the color of the datapoint.  Using a DataTrigger in the LineDataPoint's ControlTemplate, you can assign the Fill property of the ellipse based on the DependentValue.

In order to account for the range of values (0-50 = green, 51-85 orange, 86-100 red), create a value converter that will take the DependentValue and return an 'intensity'.  Here's a quick example:

 

    <ControlTemplate TargetType="charting:LineDataPoint">
        <Grid x:Name="Root" Opacity="0">
            <ToolTipService.ToolTip>
                <ContentControl Content="{TemplateBinding FormattedDependentValue}" />
            </ToolTipService.ToolTip>
            <Ellipse x:Name="DataPointEllipse" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}" />
            <Ellipse RenderTransformOrigin="0.661,0.321">
                <Ellipse.Fill>
                    <RadialGradientBrush GradientOrigin="0.681,0.308">
                        <GradientStop Color="#00FFFFFF" />
                        <GradientStop Color="#FF3D3A3A" Offset="1" />
                    </RadialGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse x:Name="SelectionHighlight" Opacity="0" Fill="Red" />
            <Ellipse x:Name="MouseOverHighlight" Opacity="0" Fill="White" />
        </Grid>
        <ControlTemplate.Triggers>
            <DataTrigger Binding="{TemplateBinding DependentValue, Converter={StaticResource IntensityConverter}}" Value="Low">
                <Setter TargetName="DataPointEllipse" Property="Fill" Value="Green"/>
            </DataTrigger>
            <DataTrigger Binding="{TemplateBinding DependentValue, Converter={StaticResource IntensityConverter}}" Value="Medium">
                <Setter TargetName="DataPointEllipse" Property="Fill" Value="Orange"/>
            </DataTrigger>
            <DataTrigger Binding="{TemplateBinding DependentValue, Converter={StaticResource IntensityConverter}}" Value="High">
                <Setter TargetName="DataPointEllipse" Property="Fill" Value="Red"/>
            </DataTrigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

*Note the VisualStateManager code has been removed for the sake of showing the trigger.

Mar 2, 2014 at 5:35 AM
Hello,

I am trying the XAML code above but I encounter an error. Any ideas? Or this is something to do with the removal of VisualStateManager code? See screenshot