Completed
Last Updated: 20 Jul 2016 13:40 by ADMIN
Michael
Created on: 05 Nov 2013 14:37
Category: HtmlChart
Type: Feature Request
3
Ability to set a gradient for plot area
I would like the ability to set a gradient for the plot area of the RadHtmlChart control, instead of just being able to set a solid color.  Thanks!
1 comment
ADMIN
Danail Vasilev
Posted on: 20 Jul 2016 13:39
You can use the Kendo Drawing API (http://docs.telerik.com/kendo-ui/controls/charts/how-to/draw-on-scatter-plots) in order to set gradient for the plot area.

		<script>
			function chartLoad(chart) {
				var chart = chart.get_kendoWidget();
				var draw = kendo.drawing;
				var geom = kendo.geometry;

				var gradient = new draw.LinearGradient({
					start: [0, 0], // Bottom left
					end: [0, 1],   // Top left
					stops: [{
						offset: 0,
						color: "#f00",
						opacity: 0
					}, {
						offset: 1,
						color: "#f00",
						opacity: 1
					}]
				});

				var xAxis = chart.getAxis("xAxis");
				var yAxis = chart.getAxis("yAxis");
				var xSlot = xAxis.slot(xAxis.range().min, xAxis.range().max);
				var ySlot = yAxis.slot(yAxis.range().min, yAxis.range().max);

				var rect = new geom.Rect([
				  // Origin X, Y
				  xSlot.origin.x, ySlot.origin.y
				], [
				  // Width, height
				  xSlot.width(), ySlot.height()
				]);

				var path = draw.Path.fromRect(rect, {
					stroke: null,
					fill: gradient
				});
				setTimeout(function () {
					chart.surface.draw(path);
				}, 10);
			}
		</script>
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="500px" Height="300px">
			<ClientEvents OnLoad="chartLoad" />
			<PlotArea>
				<YAxis Name="yAxis">
					<MinorGridLines Visible="false" />
				</YAxis>
				<XAxis Name="xAxis">
					<MinorGridLines Visible="false" />
				</XAxis>
				<Series>
					<telerik:ScatterSeries>
						<SeriesItems>
							<telerik:ScatterSeriesItem X="1" Y="1" />
							<telerik:ScatterSeriesItem X="-100" Y="-100" />
						</SeriesItems>
					</telerik:ScatterSeries>
				</Series>
			</PlotArea>
		</telerik:RadHtmlChart>