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

Legend.item.highlight

configuration

The highlight configuration of the legend item.

legend.item.highlight

Object

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

legend.item.highlight.markers

Object

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

<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.visible

Boolean

If set to false, the hover effect of the legend item is disabled.

Default: true

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

Legend.item.highlight

legend.item.highlight

legend.item.highlight.markers

legend.item.highlight.visible

Related Members