Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Will
760
Bubble/Bar/Column Chart Shadows
posted

Hello,

I am working on a mechanism that allows a user to turn individual series on/off in a chart. I have the logic in place to do this, and to accomplish the effect I am setting the opacity of fill and stroke to 0. The problem I am encountering with a few chart types is that some border-like effects seem to linger, and I'm having difficulty identifying what they are. Please see the following image, and thank you for your time.

  • 1134
    posted

    Hi Will,

    It looks like that border effect is actually an ellipse with a LinearGradientBrush set on it.  It's part of the default style for the BubbleChartDataPointTemplate.  You can achieve what you're looking for by changing the default style of the BubbleChartDataPointTemplate to this:

    <Style TargetType="igChart:BubbleChartDataPointTemplate">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="igChart:BubbleChartDataPointTemplate">
                        <Grid x:Name="RootElement">
                            <Ellipse Fill="{TemplateBinding Fill}" Opacity="0" Stroke="{TemplateBinding Stroke}"/>
                            <Ellipse Stroke="{x:Null}" Opacity="0">
                                <Ellipse.Fill>
                                    <RadialGradientBrush
		    								Center="0.479,0.099"
		    								GradientOrigin="0.479,0.099"
		    								RadiusX="0.6000000000000001"
		    								RadiusY="0.6000000000000001">
                                        <RadialGradientBrush.GradientStops>
                                            <GradientStopCollection>
                                                <GradientStop
		    											Color="#FFFFFFFF"
		    											Offset="0" />



                                                <GradientStop
		    											Color="#19FFFFFF"
		    											Offset="1" />
                                            </GradientStopCollection>
                                        </RadialGradientBrush.GradientStops>
                                    </RadialGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <Ellipse Fill="{x:Null}" StrokeThickness="0" Height="Auto" Width="Auto">
                                <Ellipse.Stroke>
                                    <LinearGradientBrush EndPoint="0.854,0.854" StartPoint="0.146,0.146">
                                        <GradientStop Color="#7FFFFFFF"/>
                                        <GradientStop Color="#59000000" Offset="1"/>
                                        <GradientStop Color="#00868686" Offset="0.5"/>
                                    </LinearGradientBrush>
                                </Ellipse.Stroke>
                            </Ellipse>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    I set the StrokeThickness of the third ellipse in the style to 0 which ultimately removed that shading that you're seeing.

    Hope this helps!

    -Marisa