seriesDefaults.visual Function
A function that can be used to create a custom visual for the points. Applicable for bar, column, pie, donut, funnel, pyramid, line, scatterLine, rangeBar, rangeColumn and waterfall series. The available argument fields are:
- rect - the
kendo.geometry.Rect
that defines where the visual should be rendered. - options - the point options.
- createVisual - a function that can be used to get the default visual.
- category - the point category.
- dataItem - the point dataItem.
- value - the point value.
- stackValue - the cumulative point value on the stack. Available only for stackable series.
- sender - the chart instance.
- series - the point series.
- percentage - the point value represented as a percentage value. Available only for donut, pie and 100% stacked charts.
- runningTotal - the sum of point values since the last "runningTotal" summary point. Available for waterfall series.
- total - the sum of all previous series values. Available for waterfall series.
- radius - the segment radius. Available for donut and pie series.
- innerRadius - the segment inner radius. Available for donut series.
- startAngle - the segment start angle. Available for donut and pie series.
- endAngle - the segment end angle. Available for donut and pie series.
- center - the segment center point. Available for donut and pie series.
- points - the segment points. Available for funnel, pyramid, line and scatterLine series.
Example - using custom visual
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
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.color
}
})
.moveTo(origin.x, bottomRight.y)
.lineTo(bottomRight.x, bottomRight.y)
.lineTo(center.x, origin.y)
.close();
return path;
}
},
series: [{
data: [1, 2, 3]
}]
});
</script>