# Draw on Scatter Chart Plots Surface

## Environment

 Product Progress® Kendo UI® Chart for jQuery Operating System Windows 10 64bit Visual Studio Version Visual Studio 2017 Preferred Language JavaScript

## Description

How can I freely draw on the surface of a Kendo UI Chart with scatter series?

## Solution

To achieve this behavior:

1. Draw a rectangle with gradient fill on a scatter plot at specified coordinates.
2. Create custom elements in the `render` event to ensure they survive redraws.

For a list of all available drawing primitives, refer to the introductory article on the Drawing API.

The following example demonstrates how to draw freely on the Scatter plot surface.

``````    <div id="chart" />
<script>
var draw = kendo.drawing;
var geom = kendo.geometry;

start: [ 0, 0 ], // Bottom left
end: [ 0, 1 ],   // Top left
stops: [{
offset: 0,
color: "#f00",
opacity: 0
}, {
offset: 1,
color: "#f00",
opacity: 1
}]
});

\$("#chart").kendoChart({
series: [{
type: "scatter",
data: [[1, 1], [-100, -100]]
}],
xAxis: {
name: "xAxis"
},
yAxis: {
name: "yAxis"
},
render: function(e) {
var chart = e.sender;
var xAxis = chart.getAxis("xAxis");
var yAxis = chart.getAxis("yAxis");
var xSlot = xAxis.slot(-80, -20);
var ySlot = yAxis.slot(-20, -80);

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,