Background on ChartView

5 posts, 1 answers
  1. Jorn
    Jorn avatar
    222 posts
    Member since:
    Jun 2009

    Posted 26 Nov 2012 Link to this post

    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. 
  2. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 28 Nov 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. Jorn
    Jorn avatar
    222 posts
    Member since:
    Jun 2009

    Posted 29 Nov 2012 Link to this post

    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.
  5. Answer
    Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 29 Nov 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. Jorn
    Jorn avatar
    222 posts
    Member since:
    Jun 2009

    Posted 30 Nov 2012 Link to this post

    Ok, thanks for confirming this bug, let's hope it gets fixed soon.
Back to Top
DevCraft banner