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!
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>