Background on ChartView

[Trude]

I'm trying to add a simple gradient background (that covers the whole plot area) to a scatter chart, but I'm stuck. On the old chart control I could just set the PlotAreaStyle and set the axis and everything would render OK. If I set the PlotAreaStyle on ChartView the gridlines are hidden/obscured. Setting the background on CartesianChartGrid does not work and setting them via StripeBrushes does not seem logical as the brush gets repeated for every major gridline.

Am I missing something obvious? Can't seem to find anything in the documentation or forums. 

[Evgenia]

Hi Jorn,

 One possible solution is to use the Background property of the RadCartesianChart:

<telerik:RadCartesianChart.Background>
       <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1" >
           <GradientStop Color="#2625A0DA" Offset="0" />
           <GradientStop Color="#FF25A0DA" Offset="1" />
       </LinearGradientBrush>
   </telerik:RadCartesianChart.Background>

The attached image demonstrates how this might look in action.

Greetings,
Evgenia
the Telerik team

[Trude]

Thanks, but the problem with your solution is that the whole background is covered (labels etc.) not just the plot area. Take a look at the attached screenshot - it's a bubble diagram from the (old) chart controls. Observe that the gridlines are rendered correctly on top of the plot area background. If I do the same (set plot area style) on the chartview the gridlines disappear. Please make this consistent or make it so that we can set the CartesianChartGrid Background property - setting it does not have any effect right now.

[Evgenia]

Hi Jorn,

 Indeed you are right - the provided solution colors the whole CartesianChart. What you need is a PlotAreaStyle. However using it won't make the Gridlines visible due to a bug in the control. I'm copying here my answer from the support thread you opened on the same topic which should shed some light on why this happens and what is the workaround.

The current implementation of RadChartView requires the ZIndex of the CartesianChartGrid to be -1. The plot area has a ZIndex of 0 and this leads to the chart grid not being visible. We confirm that this is a bug in the control. A simple work-around would be, as you suggested, to set the ZIndex of the plot area to -1:

<telerik:RadCartesianChart.PlotAreaStyle>
    <Style TargetType="Border">
        <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1" >
                    <GradientStop Color="#2625A0DA" Offset="0" />
                    <GradientStop Color="#FF25A0DA" Offset="1" />
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="Canvas.ZIndex" Value="-1"/>
    </Style>
</telerik:RadCartesianChart.PlotAreaStyle>

You may find the bug logged in our PITS where you can vote for it and track its progress.

Greetings,
Evgenia
the Telerik team

[Trude]

Ok, thanks for confirming this bug, let's hope it gets fixed soon.