Creating a Gradient on Scatter Chart as background

3 posts, 0 answers
  1. Max
    Max avatar
    2 posts
    Member since:
    Aug 2015

    Posted 05 Aug 2015 Link to this post



    I am using a telerik scatter chart like this one my page

    I need to change the background to a gradient like this

    Is this possible? I currently have it hacked where I set the background property to transparent and put a gradient "image" in the back. 

    Is there a way to use CSS, HTML, or server side script to change the gradient? I also need it to be diagonal.


    Please help.



  2. Max
    Max avatar
    2 posts
    Member since:
    Aug 2015

    Posted 05 Aug 2015 Link to this post

    This is the only thing I have found on support but its for RadChart not HTMLRadChart


    Currently our code looks like:

    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel2"></telerik:RadAjaxLoadingPanel> <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanelChart" LoadingPanelID="RadAjaxLoadingPanel2"> <br /> <div style=" margin-left:70px; width:800px; height:500px; background-image:url(/Content/Images/heatmap.png); background-repeat:no-repeat"> <telerik:RadHtmlChart runat="server" ID="ScatterChart" Width="800" Height="500" Transitions="true" DataSourceID="SqlDataSource1" Appearance-FillStyle-BackgroundColor="Transparent"> <PlotArea>


  3. DevCraft R3 2016 release webinar banner
  4. Danail Vasilev
    Danail Vasilev avatar
    1476 posts

    Posted 10 Aug 2015 Link to this post

    Hello Max,

    The chart doesn't support gradient colors for its background. What I can suggest is that you create image with the gradient colors and use it as a background below the chart.

    Danail Vasilev
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top