This is a migrated thread and some comments may be shown as answers.

Creating a Gradient on Scatter Chart as background

2 Answers 34 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Max
Top achievements
Rank 1
Max asked on 05 Aug 2015, 03:08 PM

Hello,

 

I am using a telerik scatter chart like this one my page http://demos.telerik.com/aspnet-ajax/htmlchart/examples/charttypes/scatterchart/defaultcs.aspx

I need to change the background to a gradient like this http://www.strangeplanet.fr/work/gradient-generator/?c=9:FF0000:FFEE00:00FC15

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.

 

Max

2 Answers, 1 is accepted

Sort by
0
Max
Top achievements
Rank 1
answered on 05 Aug 2015, 03:29 PM

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

http://docs.telerik.com/devtools/aspnet-ajax/controls/chart/styling-radcharts/setting-the-background

 

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>

 ​



0
Danail Vasilev
Telerik team
answered on 10 Aug 2015, 01:12 PM
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.

Regards,
Danail Vasilev
Telerik
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
Tags
Chart (HTML5)
Asked by
Max
Top achievements
Rank 1
Answers by
Max
Top achievements
Rank 1
Danail Vasilev
Telerik team
Share this question
or