legend.item.markers.visual Function
A function that can be used to create a custom visual for the 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 - use custom visual for the markers
<div id="chart"></div>
<script>
$("#chart").kendoStockChart({
dataSource: {
data: [{
"Date": "2016/01/01",
"Open": 41.62,
"High": 41.69,
"Low": 39.81,
"Close": 40.12,
"Volume": 2632000
}, {
"Date": "2016/03/01",
"Open": 40.62,
"High": 39.69,
"Low": 40.81,
"Close": 39.12,
"Volume": 2631986
}]
},
dateField: "Date",
series: [{
name: "Series 1",
type: "ohlc",
openField: "Open",
highField: "High",
lowField: "Low",
closeField: "Close"
}],
legend: {
visible: true,
position: "bottom",
item: {
type: 'line',
markers: {
visible: true,
visual: function (e) {
var origin = e.rect.origin;
var center = e.rect.center();
var bottomRight = e.rect.bottomRight();
var path = new kendo.drawing.Path({
fill: {
color: e.options.border.color
}
})
.moveTo(origin.x, bottomRight.y)
.lineTo(bottomRight.x, bottomRight.y)
.lineTo(center.x, origin.y)
.close();
return path;
}
}
}
}
});
</script>