Introduction
AI Components & Features
Contribution
Knowledge Base
StockChart

legend.item.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.Rect that 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, 0, 1), value: 100 },
            { date: new Date(2023, 0, 2), value: 105 },
            { date: new Date(2023, 0, 3), value: 98 }
        ]
    },
    legend: {
        item: {
            highlight: {
                markers: {
                    visual: function(e) {
                        var rect = new kendo.geometry.Rect([0, 0], [10, 10]);
                        var path = kendo.geometry.Path.fromRect(rect);
                        var visual = new kendo.drawing.Path(path);
                        visual.stroke("red", 2);
                        visual.fill("yellow");
                        return visual;
                    }
                }
            }
        }
    },
    series: [{
        field: "value",
        categoryField: "date",
        name: "Stock Price"
    }]
});
</script>
In this article
legend.item.highlight.markers.visual
Not finding the help you need?
Contact Support