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