![xamDataChart Styling the Chart Series 1.png](images/xamDataChart_Styling_the_Chart_Series_1.png)
This topic provides a brief overview on how to style the series of the XamDataChart™ control and demonstrates, as an example, how to apply drop-shadow effect to the series.
The following topics are prerequisites to understanding this topic:
This topic contains the following sections:
The series XamDataChart can be styled in many aspects, the main of which are applying different fill and outline brushes to the series. This is managed by the Brush and Outline properties of the series. Some other aspects of the series’ look-and-fill, such as the thickness of the outline and the opacity of the series, are configurable, too through the Thickness and Opacity properties of the series.
Because the Series class used for the XamDataChart XamDataChart.Series collection is inherited from the Control
class, it, too, exposes an Effect
property. The property applies a visual effect to the series visual. The following table maps supported visual effects to the Effect
property settings that configure them.
Each of the effects can be configured by changing the settings of the effect’s properties. The blur effect can be configured in terms of radius of the blur and the curve used to calculate the blur. The drop-shadow effect can be customized by changing the shadow color, its opacity, direction, offset and blur.
There are two alternative ways to apply drop-shadow effect to the series:
Through the Effect
property of the Series class
Through the IsDropShadowEnabled property of the series
Effect
property of the Series
classSet the Effect
property of the Series
class to a DropShadowEffect
instance. The drop-shadow effect is applied out-of-the-box and further customization is possible through customizing the DropShadowEffect
instance.
IsDropShadowEnabled
property of the seriesSet the IsDropShadowEnabled
property of the series to "true" . Customization of the effect in terms of changing its blur radius, color, direction, depth, and opacity is supported through the respective shadow-related properties of the Series (See Property settings and the example for details.).
The default drop-shadow effect differs depending on the series type.
The following table lists the configurable aspects of the drop-shadow effect (when applied through the IsDropShadowEnabled
property of the series) to their respective property settings. Note that for these settings to be effective, the Effect
property of the series must not be set.
This example demonstrates applying drop-shadow through the IsDropShadowEnabled property of the series. The screenshot below demonstrates how a line series in a XamDataChart control looks as a result of the following shadow-related settings:
Following is the code snippet for setting the shadow related properties of a chart’s line series:
In XAML:
…
<ig:LineSeries IsDropShadowEnabled="True"
ShadowBlur="20"
ShadowColor="DarkBlue"
ShadowDepth="15"
ShadowDirection="90"
ShadowOpacity="0.8"
Thickness="5"
…
>
…
In Visual Basic:
… Dim lineSeries = New LineSeries() lineSeries.IsDropShadowEnabled = True lineSeries.ShadowBlur = 20 lineSeries.ShadowColor = new SolidColorBrush("DarkBlue") lineSeries.ShadowDepth = 15 lineSeries.ShadowDirection = 90 lineSeries.ShadowOpacity = 0.8 lineSeries.Thickness = 5 …
In C#:
… LineSeries lineSeries = New LineSeries(); lineSeries.IsDropShadowEnabled = True; lineSeries.ShadowBlur = 20; lineSeries.ShadowColor = new SolidColorBrush("DarkBlue"); lineSeries.ShadowDepth = 15; lineSeries.ShadowDirection = 90; lineSeries.ShadowOpacity = 0.8; lineSeries.Thickness = 5; …
The following material (available outside the Infragistics family of content) provides additional information related to this topic.