paneRender

Fires when a pane is rendered because the chart is rendered, or the chart performs panning or zooming, or because the chart is exported with different options. The event can be used to render custom visuals in the panes.

Event Data

pane kendo.dataviz.ChartPane

The chart pane that was rendered.

name String

The pane name.

index Number

The pane index.

e.sender kendo.dataviz.ui.Chart

The widget instance which fired the event.

Example - draw on the pane in the paneRender event

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    valueAxis: {
      name: "value"
    },
    categoryAxis: {
      name: "category"
    },
    series: [{ data: [1, 2] }],
    paneRender: function(e) {
      var valueAxis = e.pane.findAxisByName("value");
      var categoryAxis = e.pane.findAxisByName("category");
      var valueSlot = valueAxis.slot(1, 2);
      var categorySlot = categoryAxis.slot(0, 1);
      var geometry = new kendo.geometry.Circle([categorySlot.center().x, valueSlot.center().y], valueSlot.size.height / 2);
      var circle = new kendo.drawing.Circle(geometry, { fill: { color: "red" }});

      e.pane.chartsVisual.insert(0, circle);
    }
  });
</script>