Use a LinearGradient with a AreaSeries?

[Thorsten]

Hi,

I'm trying to give my price charts a 'Bloomberg' like look, i.e. I want to fill the area beneath the data series with a LinearGradientBrush.

I tried several options:
a) setting the PaletteBrushes like this:
           

<telerik:RadChart.PaletteBrushes>
  <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
    <GradientStop Color="Red" Offset="0" />
    <GradientStop Color="BlueViolet" Offset="1" />
  </LinearGradientBrush>
</telerik:RadChart.PaletteBrushes>

b) setting Appearance.Fill on the AreaSeriesDefinition like this:

Appearance = new SeriesAppearanceSettings
         {
             Fill = new LinearGradientBrush(Colors.OrangeRed, Colors.Blue, 90)
         }

c) finally by creating a new style for the SelfDrawingSeries object and setting the BackgroundStyle:

<Setter Property="BackgroundStyle">
    <Setter.Value>
        <Style TargetType="Shape">
            <Setter Property="Fill">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Color="OrangeRed" Offset="0"/>
                        <GradientStop Color="Blue" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Opacity" Value="0.5" />
        </Style>
    </Setter.Value>
</Setter>

All three approaches produced a visible effect (wow!) but it appears as if only the start color is used to fill the area of the series.

Is there something I'm getting or doing wrong or is this a bug?

Thanks,
Thorsten

[Ves]

Hi Thorsten,

It seems there is a bug in the control -- the fill is not applied correctly when AxisY.IsZeroBased is set to false (which is the default value). If setting IsZeroBased to true is not acceptable, as a temparary workaround you can provide a different EndPoint for the LinearGradientBrush. Basically, this will "artificially" move the last gradient stop upwards. Ex. if your AxisY display values from 9000 to 10000, this is a range of 1000 over a max value of 10000, so you need only one tenth -- use this EndPoint="0, 0.1"

I have updated your Telerik points for bringing this to our attention.

Best regards,
Ves
the Telerik team