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

Series.legendItem.highlight.markers

configuration

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

series.legendItem.highlight.markers

Object

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "line",
    name: "Series A",
    data: [1, 2, 3],
    legendItem: {
      highlight: {
        markers: {
          background: "red",
          border: {
            color: "black",
            width: 2
          }
        }
      }
    }
  }]
});
</script>

series.legendItem.highlight.markers.background

String|Function

The background color of the highlighted legend item markers.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "line",
    name: "Series A",
    data: [1, 2, 3],
    legendItem: {
      highlight: {
        markers: {
          background: "yellow"
        }
      }
    }
  }]
});
</script>

series.legendItem.highlight.markers.border

Object|Function

The border of the highlighted markers.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "line",
    name: "Series A",
    data: [1, 2, 3],
    legendItem: {
      highlight: {
        markers: {
          border: {
            color: "red",
            width: 3,
            dashType: "dash"
          }
        }
      }
    }
  }]
});
</script>

series.legendItem.highlight.markers.borderRadius

Number

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

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "line",
    name: "Series A",
    data: [1, 2, 3],
    legendItem: {
      highlight: {
        markers: {
          type: "roundedRect",
          borderRadius: 10
        }
      }
    }
  }]
});
</script>

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

series.legendItem.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({
  series: [{
    type: "line",
    name: "Series A",
    data: [1, 2, 3],
    legendItem: {
      highlight: {
        markers: {
          visible: false
        }
      }
    }
  }]
});
</script>

series.legendItem.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({
  series: [{
    type: "line",
    name: "Series A",
    data: [1, 2, 3],
    legendItem: {
      highlight: {
        markers: {
          visual: function(e) {
            var rect = new kendo.geometry.Rect([0, 0], [10, 10]);
            var path = kendo.drawing.Path.fromRect(rect, {
              fill: { color: "red" },
              stroke: { color: "black" }
            });
            return path;
          }
        }
      }
    }
  }]
});
</script>

Related Members