Slice with 0 value creates extra stroke on pie

[Kevin]

I'm working on a view that is supposed to display a pie chart. The series ItemsSource is a RadObservableCollection<DataPoint> on our ViewModel. We always include the same four data points in this collection -- cash, check, credit, money order -- in a specified order, even if the values are zero. This collection is reconstructed every time our view is navigated to and the changes are always reflected on the pie.

In addition, we want each tender to have a specific color and a white stroke, so we have defined a style like so:

<telerik:PieSeries.SliceStyles>
    <Style TargetType="{x:Type Path}">
        <Setter Property="Fill" Value="{StaticResource BrushSecondaryGreen}" />
        <Setter Property="Stroke" Value="{StaticResource BrushInversePrimaryWhite}" />
        <Setter Property="StrokeThickness" Value="1" />
        <Setter Property="Visibility" Value="{Binding DepositSummary.Cash, Converter={StaticResource VisibleIfGreaterThanZero}}" />
    </Style>
    <Style TargetType="{x:Type Path}">
        <Setter Property="Fill" Value="{StaticResource BrushSecondaryOrange}" />
        <Setter Property="Stroke" Value="{StaticResource BrushInversePrimaryWhite}" />
        <Setter Property="StrokeThickness" Value="1" />
        <Setter Property="Visibility" Value="{Binding DepositSummary.Check, Converter={StaticResource VisibleIfGreaterThanZero}}" />
    </Style>
    <Style TargetType="{x:Type Path}">
        <Setter Property="Fill" Value="{StaticResource BrushSecondaryViolet}" />
        <Setter Property="Stroke" Value="{StaticResource BrushInversePrimaryWhite}" />
        <Setter Property="StrokeThickness" Value="1" />
        <Setter Property="Visibility" Value="{Binding DepositSummary.Credit, Converter={StaticResource VisibleIfGreaterThanZero}}" />
    </Style>
    <Style TargetType="{x:Type Path}">
        <Setter Property="Fill" Value="{StaticResource BrushSecondaryYellow}" />
        <Setter Property="Stroke" Value="{StaticResource BrushInversePrimaryWhite}" />
        <Setter Property="StrokeThickness" Value="1" />
        <Setter Property="Visibility" Value="{Binding DepositSummary.MoneyOrder, Converter={StaticResource VisibleIfGreaterThanZero}}" />
    </Style>
</telerik:PieSeries.SliceStyles>

The visibility is specified here so we don't see an extra white line sticking out from the center of the pie chart when one of the data points is zero. It worked great in testing -- hard-coding one of the slice styles to be collapsed when the corresponding data was zero got rid of the white line. However, it is not working with these converters. The converter only seems to fire the first time we visit our view, so all of the pie slices remain visible during later visits.

(See attached visual.)

We have also tried implementing this with DataTriggers instead of converters and did not have any luck.

At this point, I can only ask if you guys are aware of any issues with the way I have implemented this. Why might the converters used in the style only work once? I do nullify the collection (and DepositSummary object used for visibility) and rebuild it every time our view is navigated to, and those do have a property change notification. We are using Prism/MEF.

Thanks.

[Petar Marchev]

Hello Kevin,

You need to change the StrokeLineJoin:

<Setter Property="StrokeLineJoin" Value="Bevel" />

This is a property that comes from the framework and its default value is Miter, which causes this side-effect. You can read about this here. Check which value suits your need best - Bevel or Round.

On a side note: I am unsure what is your scenario and requirements, but may be you can use the Palette of the chart instead of defining a separate style just to have a separate color.

Let us know how it goes.

Kind regards,
Petar Marchev
the Telerik team