Color

Gets or Sets the visual color of an element, this includes the effects generated by using various shades of the color.

 

Type: Brush

Namespace: Visifire.Charts

Assembly:

Silverlight:

SLVisifire.Charts (in SLVisifire.Charts.dll)

WPF:

WPFVisifire.Charts (in WPFVisifire.Charts.dll)

 

This attribute applies to:

 

Syntax:

<vc:Chart ... >

<vc:Chart.Series>

<vc:DataSeries Color="Red">

.

.

.

</vc:DataSeries>

</vc:Chart.Series>

</vc:Chart>

 

or

 

<vc:Chart ... >

<vc:Chart.Series>

<vc:DataSeries>

<vc:DataSeries.DataPoints>

<vc:DataPoint>

<vc:DataPoint.Color>

<SolidColorBrush Color="Blue"/>

</vc:DataPoint.Color>

</vc:DataPoint>

.

.

.

</vc:DataSeries.DataPoints>

</vc:DataSeries>

</vc:Chart.Series>

</vc:Chart>

 

or

 

<vc:Chart ... >

<vc:Chart.Series>

<vc:DataSeries>

<vc:DataSeries.DataPoints>

<vc:DataPoint>

<vc:DataPoint.Color>

<LinearGradientBrush StartPoint="0, 0.5" EndPoint="0.5, 1">

<GradientStop Color="Red" Offset="0.5"/>

<GradientStop Color="Green" Offset="1"/>

</LinearGradientBrush>

</vc:DataPoint.Color>

</vc:DataPoint>

.

.

.

</vc:DataSeries.DataPoints>

</vc:DataSeries>

</vc:Chart.Series>

</vc:Chart>

 

Below is the chart after setting Color property in DataSeries.

 

 

Setting Color from Javascript

 

You can set Color property from Javascript using 3 types of brushes:

 

1) SolidColorBrush

2) LinearGradientBrush

3) RadialGradientBrush

 

Example: SolidColorBrush

 

var brush = '<SolidColorBrush xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\" Color="Red"/>';

 

// Set Color of a DataSeries

chart.Series[0].SetPropertyFromJs("Color", brush);

 

Example: LinearGradientBrush

 

var brush = '<LinearGradientBrush xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\" EndPoint="0.5,1" StartPoint="0.5,0">'

+'<GradientStop Color="#FF000000" Offset="0"/>'

+'<GradientStop Color="#FFFFFFFF" Offset="1"/>'

+'</LinearGradientBrush>';

    

 // Set Color of a DataSeries

 chart.Series[0].SetPropertyFromJs("Color", brush);

 

Example: RadialGradientBrush

 

var brush = '<RadialGradientBrush xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\">'

+'<GradientStop Color="#FF000000" Offset="0"/>'

+'<GradientStop Color="#FFFFFFFF" Offset="1"/>'

+ '</RadialGradientBrush>';

    

 // Set Color of a DataSeries

 chart.Series[0].SetPropertyFromJs("Color", brush);

 

 

For more info about setting properties from Javascript, Go to SetPropertyFromJs function.

 

See Also:

  1. Working with Gradients from Javascript.

  2. Working with Gradients from Managed Code

 

Remarks:

  1. Any Brush derived from the System.Windows.Media::Brush can be applied to this attribute.

  2. Color property cannot be null if set from XAML.

 

Related Links: