Removing (collapsing) DataPoints in a LineSeries?

Question

I'd like to remove the datapoint markers from a LineSeries in my Silverlight chart. The only way i found on the web is to set the VisibilityProperty to Collapse.

//not working in the current SL toolkit release var collapseDataPointSetter = new Setter(Control.VisibilityProperty, Visibility.Collapsed);

But this isn't working for the current release of the SL toolkit. How can i remove or hide DataPoint Markers in the current release?

score 10 · Accepted Answer · answered Feb 05 '10 at 17:11

pantarhei,

Use the following chart styles (with referenced templates) to hide the data points. I have included styles for both the LineSeries and the AreaSeries.

Good luck, Jim

<ControlTemplate x:Key="CommonAreaSeriesDataPointTemplate" TargetType="charting:AreaDataPoint">
    <!--Comment out data points from the default template; just an empty template-->
    <Grid x:Name="Root" Opacity="1">
        <!--<ToolTipService.ToolTip>
            <StackPanel Margin="2,2,2,2">
                <ContentControl Content="{TemplateBinding FormattedDependentValue}" />
                <ContentControl Content="{TemplateBinding FormattedIndependentValue}" />
            </StackPanel>
        </ToolTipService.ToolTip>
        <Ellipse StrokeThickness="{TemplateBinding BorderThickness}" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}" />-->
    </Grid>
</ControlTemplate>
<Style x:Key="CommonAreaSeriesDataPoint" TargetType="charting:AreaDataPoint">
    <Setter Property="Background" Value="{StaticResource CommonAreaSeriesBackground}" />
    <Setter Property="Template" Value="{StaticResource CommonAreaSeriesDataPointTemplate}" />
</Style>
<Style x:Key="CommonAreaSeriesPath" TargetType="Path">
    <Setter Property="StrokeThickness" Value="1" />
    <Setter Property="Stroke" Value="DarkGray" />
    <Setter Property="Effect" Value="{StaticResource DialogDropShadow}" />
</Style>
<ControlTemplate x:Key="CommonLineSeriesDataPointTemplate" TargetType="charting:LineDataPoint">
    <!--Comment out data points from the default template; just an empty template-->
    <Grid x:Name="Root" Opacity="1">
        <!--<ToolTipService.ToolTip>
            <StackPanel Margin="2,2,2,2">
                <ContentControl Content="{TemplateBinding FormattedDependentValue}" />
                <ContentControl Content="{TemplateBinding FormattedIndependentValue}" />-->
        <!--Example of how to access the bound business object-->
        <!--<ContentControl Content="{Binding Amount}" DataContext="{TemplateBinding DataContext}" />-->
        <!--</StackPanel>
        </ToolTipService.ToolTip>-->
        <!--<Ellipse StrokeThickness="{TemplateBinding BorderThickness}" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}" />-->
    </Grid>
</ControlTemplate>
<Style x:Key="CommonLineSeriesDataPoint" TargetType="charting:LineDataPoint">
    <Setter Property="IndependentValueStringFormat" Value="{}{0:yyyy}" />
    <Setter Property="DependentValueStringFormat" Value="{}{0:c0}" />
    <Setter Property="Background" Value="#FF0077CC" />
    <Setter Property="BorderBrush" Value="White" />
    <Setter Property="BorderThickness" Value="2" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Template" Value="{StaticResource CommonLineSeriesDataPointTemplate}" />
</Style>
<Style x:Key="CommonLineSeriesPolyline" TargetType="Polyline">
    <Setter Property="StrokeThickness" Value="5" />
    <Setter Property="Effect" Value="{StaticResource DialogDropShadow}" />
</Style>
<!-- Implicit non-Key'd Styles BasedOn Common Explicit Key'd Styles above -->
<Style TargetType="charting:AreaSeries">
    <Setter Property="DataPointStyle" Value="{StaticResource CommonAreaSeriesDataPoint}" />
    <Setter Property="PathStyle" Value="{StaticResource CommonAreaSeriesPath}" />
</Style>
<Style TargetType="charting:LineSeries">
    <Setter Property="DataPointStyle" Value="{StaticResource CommonLineSeriesDataPoint}" />
    <Setter Property="PolylineStyle" Value="{StaticResource CommonLineSeriesPolyline}" />
</Style>

Thank you. Will try it. But seems to be what i'm looking for. — devployment, Feb 11 '10 at 07:05
Many thanks @Jim for the code above. One thing I am missing with this approach though, is that the line color in the LineSeries becomes fix to the Background value set in the LineDataPoint style for all series in a chart. Removing the background setter does not help either, it is only a different fix color. Is there a way for the line colors to be automatically different for different line series with the above approach? — Anders Gustafsson, Nov 23 '11 at 10:56
@Anders, it might work if you comment out the Setter for Background property in CommonAreaSeriesDataPoint. Or maybe bind the Background property to another Brush element — Jim McCurdy, Nov 28 '11 at 20:54

score 4 · Answer 2 · edited Jul 06 '12 at 11:21

4

Doing it with styles in my opinion is not the best approach because you still have an enormous amount of visuals when you also have a lot of datapoints like in a stock chart.

public class LineSeriesEx : LineSeries
{
    protected override DataPoint CreateDataPoint()
    {
        return new EmptyDataPoint();
    }
}

public class EmptyDataPoint : DataPoint
{
    // As the method name says, this DataPoint is empty.
}

Doing it this way you have almost five times less Visuals than when you just set some style.

edited Jul 06 '12 at 11:21

DaveShaw

52,123
16
112
141

answered Jul 06 '12 at 08:10

Sam

1,301
1
17
26

This is easy solution compared to touching XAML. – Sid Mar 30 '16 at 12:16

score 3 · Answer 3 · answered Oct 11 '12 at 15:57

I used Jim's solution (thank you very much by the way, HUGE help there) and applied it to the default chart template.

In the palette area you have the resource dictionary for each line in the series.

Here is how I was able to get rid of it using Jim's control template, and I can put it in each ResourceDictonary so I don't have to do it line by line

<toolkit:ResourceDictionaryCollection>
<ResourceDictionary>
<!-- I wanted a solid color brush so I just went ahead and defined it in the palette-->
<SolidColorBrush x:Key="Background" Color="Green"/>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
<!-- below is where I entered Jim's control template into the default palette defined-->
<Setter Property="Template">
<ControlTemplate TargetType="charting:LineDataPoint">
<Grid x:Name="Root" Opacity="1"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</toolkit:ResourceDictionaryCollection>

This worked for me at least, and it will save me a lot of time (and has already saved a lot of my hair before I pulled it out)

score 1 · Answer 4 · answered Nov 07 '11 at 11:45

<charting:LineSeries.DataPointStyle>
                            <Style TargetType="charting:LineDataPoint">
                                <Setter Property="Visibility" Value="Collapsed"/>
                                <Setter Property="Background" Value="violet"/>
                                <Setter Property="Opacity" Value="0" />
                            </Style>
                        </charting:LineSeries.DataPointStyle>

Removing (collapsing) DataPoints in a LineSeries?

4 Answers4

Linked