Expand Clickable Area of Chart Points
Environment
| Product | Progress® Kendo UI® Chart for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
Sometimes the Chart produces series of points that are too small to be reliably clicked or touched. How can I expand these?
Solution
It is possible to expand the active area by adding a transparent element as part of the visual configuration.
The following example demonstrates how to achieve this behavior in a Bar Charts series.
<div id="chart"></div>
<div id="log">Click on the area next to a point...</div>
<script>
$("#chart").kendoChart({
series: [{
type: "column",
data: [1, 2, 3],
visual: function(e) {
var marker = e.createVisual();
var group = new kendo.drawing.Group();
// A transparent rectangle that serves as a touch zone
var touch = kendo.drawing.Path.fromRect(e.rect, {
transform: kendo.geometry.transform()
.scale(1.5, 2, e.rect.center()),
// Comment the following line to see it
stroke: null,
fill: {
color: "#fff",
opacity: 0
}
});
group.append(touch, marker);
return group;
},
tooltip: {
visible: true
}
}],
seriesClick: function(e) {
$("#log").text("Clicked " + e.value);
}
});
</script>
The following example demonstrates how to expand the clickable or touchable area of points in a line series.
<div id="chart"></div>
<div id="log">Click on the area next to a point...</div>
<script>
$("#chart").kendoChart({
series: [{
type: "line",
data: [1, 2, 3],
markers: {
visual: function(e) {
var marker = e.createVisual();
var group = new kendo.drawing.Group();
// A transparent rectangle that serves as a touch zone
var touch = kendo.drawing.Path.fromRect(e.rect, {
transform: kendo.geometry.transform()
.scale(10, 10, e.rect.center()),
// Comment the following line to see it
stroke: null,
fill: {
color: "#fff",
opacity: 0
}
});
group.append(touch, marker);
return group;
}
},
tooltip: {
visible: true
}
}],
seriesClick: function(e) {
$("#log").text("Clicked " + e.value);
}
});
</script>