series.legendItem.highlight.markers.visualFunction
A function that can be used to create a custom visual for the highlighted markers. The available argument fields are:
- rect - the
kendo.geometry.Rectthat defines where the visual should be rendered. - options - the marker options.
- createVisual - a function that can be used to get the default visual.
- category - the category of the marker point.
- dataItem - the dataItem of the marker point.
- value - the value of the marker point.
- sender - the chart instance.
- series - the series of the marker point.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date(2023, 1, 1), open: 100, high: 110, low: 90, close: 105 },
{ date: new Date(2023, 1, 2), open: 105, high: 115, low: 95, close: 110 }
]
},
categoryField: "date",
series: [{
type: "candlestick",
openField: "open",
highField: "high",
lowField: "low",
closeField: "close",
legendItem: {
highlight: {
markers: {
visual: (e) => {
var rect = new kendo.geometry.Rect([0, 0], [10, 10]);
var path = new kendo.drawing.Path({
fill: { color: "#ff6800" },
stroke: { color: "#000", width: 1 }
});
path.moveTo(5, 0).lineTo(10, 10).lineTo(0, 10).close();
return path;
}
}
}
}
}]
});
</script>In this article