New to Kendo UI for jQuery? Start a free 30-day trial

Legend.item.highlight.markers

configuration

The markers configuration of the legend item when it is hovered.

legend.item.highlight.markers

Object

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  legend: {
    item: {
      highlight: {
        markers: {
          background: "orange",
          border: {
            color: "black",
            width: 1
          },
          type: "triangle",
          visible: true
        }
      }
    }
  },
  series: [
    { name: "Series 1", data: [1, 2, 3] },
    { name: "Series 2", data: [4, 5, 6] }
  ]
});
</script>

legend.item.highlight.markers.background

String|Function

The background color of the highlighted legend item markers.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  legend: {
    item: {
      highlight: {
        markers: {
          background: "lime"
        }
      }
    }
  },
  series: [
    { name: "Series 1", data: [1, 2, 3] },
    { name: "Series 2", data: [4, 5, 6] }
  ]
});
</script>

legend.item.highlight.markers.border

Object|Function

The border of the highlighted markers.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  legend: {
    item: {
      highlight: {
        markers: {
          border: {
            color: "purple",
            width: 3,
            dashType: "dash"
          }
        }
      }
    }
  },
  series: [
    { name: "Series 1", data: [1, 2, 3] },
    { name: "Series 2", data: [4, 5, 6] }
  ]
});
</script>

legend.item.highlight.markers.borderRadius

Number

The border radius in pixels when type is set to "roundedRect".

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  legend: {
    item: {
      highlight: {
        markers: {
          type: "roundedRect",
          borderRadius: 5,
          background: "lightcoral"
        }
      }
    }
  },
  series: [
    { name: "Series 1", data: [1, 2, 3] },
    { name: "Series 2", data: [4, 5, 6] }
  ]
});
</script>

legend.item.highlight.markers.type

String|Function

The highlighted markers shape.

The supported values are:

"circle" - the marker shape is circle.
"square" - the marker shape is square.
"triangle" - the marker shape is triangle.
"cross" - the marker shape is cross.
"rect" - alias for "square".
"roundedRect" - the marker shape is a rounded rectangle.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  legend: {
    item: {
      highlight: {
        markers: {
          type: "cross",
          background: "gold"
        }
      }
    }
  },
  series: [
    { name: "Series 1", data: [1, 2, 3] },
    { name: "Series 2", data: [4, 5, 6] }
  ]
});
</script>

legend.item.highlight.markers.visible

Boolean|Function

If set to true the chart will display the legend item markers. Defaults to the series options.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  legend: {
    item: {
      highlight: {
        markers: {
          visible: false
        }
      }
    }
  },
  series: [
    { name: "Series 1", data: [1, 2, 3] },
    { name: "Series 2", data: [4, 5, 6] }
  ]
});
</script>

legend.item.highlight.markers.visual

Function

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.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  legend: {
    item: {
      highlight: {
        markers: {
          visual: function(e) {
            var rect = new kendo.geometry.Rect([0, 0], [10, 10]);
            var path = kendo.geometry.Path.fromRect(rect);
            return new kendo.drawing.Path(path).stroke("red", 2).fill("yellow");
          }
        }
      }
    }
  },
  series: [
    { name: "Series 1", data: [1, 2, 3] },
    { name: "Series 2", data: [4, 5, 6] }
  ]
});
</script>

Related Members