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?

Answer 1

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>

Answer 2

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.

Answer 3

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)

Answer 4

<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>