series.legendItem.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").kendoChart({
    series: [{
      type: "line",
      name: "Series A",
      data: [1, 2, 3],
      legendItem: {
        markers: {
          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>