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

Legend

configuration

The chart legend configuration options.

The colors assigned to individual points are not reflected in the legend for series-based charts (e.g. column, line, bar). The legend items are tied to the series, not to individual points, except in cases like pie or donut charts where each point has a dedicated legend item.

legend

Object

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  legend: {
    background: "green",
    position: "left",
    labels: {
      font: "20px sans-serif",
      color: "red"
    }
  },
  series: [
    { name: "Series 1", data: [1, 2, 3] },
    { name: "Series 2", data: [3, 4, 5] }
  ]
});
</script>

legend.align

String

The legend horizontal alignment when the legend.position is "top" or "bottom" and the vertical alignment when the legend.position is "left" or "right".

The supported values are:

"start" - the legend is aligned to the start.
"center" - the legend is aligned to the center.
"end" - the legend is aligned to the end.

Default: "center"

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

legend.background

String

The background color of the legend. Accepts a valid CSS color string, including hex and rgb.

Default: "white"

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

$("#chart").kendoChart({
  legend: {
    background: "rgb(128, 0, 255)"
  },
  series: [
    { name: "Series 1", data: [1, 2, 3] },
    { name: "Series 2", data: [3, 4, 5] }
  ]
});
</script>

$("#chart").kendoChart({
  legend: {
    background: "green"
  },
  series: [
    { name: "Series 1", data: [1, 2, 3] },
    { name: "Series 2", data: [3, 4, 5] }
  ]
});
</script>

legend.border

Object

The border of the legend.

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

legend.focusHighlight

Object

The legend focus highlight configuration options.

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

legend.height

Number

The legend height when the legend.orientation is set to "vertical".

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  legend: {
    position: "custom",
    orientation: "vertical",
    height: 50
  },
  series: [
    { name: "Series 1", data: [1, 2, 3] },
    { name: "Series 2", data: [3, 4, 5] },
    { name: "Series 3", data: [6, 7, 8] }
  ]
});
</script>

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  legend: {
    position: "left",
    height: 50
  },
  series: [
    { name: "Series 1", data: [1, 2, 3] },
    { name: "Series 2", data: [3, 4, 5] },
    { name: "Series 3", data: [6, 7, 8] }
  ]
});
</script>

legend.inactiveItems

Object

The chart inactive legend items configuration.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  legend: {
    inactiveItems: {
      labels: {
        background: "green",
        color: "white"
      }
    }
  },
  series: [
    { name: "Series 1", data: [1, 2, 3] },
    { name: "Series 2", data: [3, 4, 5] }
  ]
});
</script>

legend.item

Object

The configuration of the Chart legend item.

To override the marker configuration of individual series, use the series.legendItem settings of the series.

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

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "line",
    markers: {
      visible: true
    },
    data: [1, 2, 3]
  }, {
    type: "line",
    markers: {
      type: 'roundedRect',
      visible: true
    },
    data: [4, 5, 6]
  }],
  seriesDefaults: {
      /* Use these settings to emulate the legacy legend item rendering */
      legendItem: {
          type: 'line',
          line: {
              dashType: 'solid',
          },
          markers: {
              visible: false
          },
          highlight: {
              visible: false
          }
      },
  }
});
</script>

legend.labels

Object

The chart legend label configuration.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  legend: {
    labels: {
      background: "green",
      color: "white"
    }
  },
  series: [
    { name: "Series 1", data: [1, 2, 3] },
    { name: "Series 2", data: [3, 4, 5] }
  ]
});
</script>

legend.margin

Number|Object

The margin of the chart legend. A numeric value will set all paddings.

Default: 5

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

The X offset of the chart legend. The offset is relative to the default position of the legend. For instance, a value of 20 will move the legend 20 pixels to the right of its initial position. A negative value will move the legend to the left of its current position.

Default: 0

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

legend.offsetY

Number

The Y offset of the chart legend. The offset is relative to the current position of the legend. For instance, a value of 20 will move the legend 20 pixels down from its initial position. A negative value will move the legend upwards from its current position.

Default: 0

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

legend.orientation

String

The orientation of the legend items.

The supported values are:

"vertical" - the legend items are added vertically.
"horizontal" - the legend items are added horizontally.

Default: "vertical"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  legend: {
    position: "custom",
    orientation: "horizontal"
  },
  series: [
    { name: "Series 1", data: [1, 2, 3] },
    { name: "Series 2", data: [3, 4, 5] },
    { name: "Series 3", data: [6, 7, 8] }
  ]
});
</script>

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  legend: {
    position: "left",
    orientation: "horizontal"
  },
  series: [
    { name: "Series 1", data: [1, 2, 3] },
    { name: "Series 2", data: [3, 4, 5] },
    { name: "Series 3", data: [6, 7, 8] }
  ]
});
</script>

legend.padding

Number|Object

The padding of the chart legend. A numeric value will set all paddings.

Default: 5

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

legend.position

String

The positions of the chart legend.

The supported values are:

"top" - the legend is positioned on the top.
"bottom" - the legend is positioned on the bottom.
"left" - the legend is positioned on the left.
"right" - the legend is positioned on the right.
"custom" - the legend is positioned using legend.offsetX and legend.offsetY.

Default: "right"

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

legend.reverse

Boolean

If set to true the legend items will be reversed.

Available in versions 2013.3.1306 and later.

Default: false

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  legend: {
    reverse: true
  },
  series: [
    { name: "First Series", data: [1, 2, 3] },
    { name: "Second Series", data: [4, 5, 6] },
    { name: "Third Series", data: [7, 8, 9] }
  ]
});
</script>

legend.spacing

Number

The spacing between the labels in pixels when the legend.orientation is "horizontal".

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  legend: {
    position: "bottom",
    spacing: 100
  },
  series: [
    { name: "Series 1", data: [1, 2, 3] },
    { name: "Series 2", data: [3, 4, 5] },
    { name: "Series 3", data: [6, 7, 8] }
  ]
});
</script>

legend.title

Object

The legend title configuration options or text.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  legend: {
    title: {
      text: "Legend Title",
      align: "center",
      background: "lightgray",
      color: "darkblue",
      font: "18px Arial",
      border: {
        color: "black",
        width: 1,
        dashType: "solid"
      }
    }
  },
  series: [
    { name: "Series 1", data: [1, 2, 3] },
    { name: "Series 2", data: [4, 5, 6] }
  ]
});
</script>

legend.visible

Boolean

If set to true the chart will display the legend. By default the chart legend is visible.

Default: true

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

legend.width

Number

The legend width when the legend.orientation is set to "horizontal".

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  legend: {
    position: "custom",
    orientation: "horizontal",
    width: 200
  },
  series: [
    { name: "Series 1", data: [1, 2, 3] },
    { name: "Series 2", data: [3, 4, 5] },
    { name: "Series 3", data: [6, 7, 8] }
  ]
});
</script>

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  legend: {
    position: "top",
    width: 200
  },
  series: [
    { name: "Series 1", data: [1, 2, 3] },
    { name: "Series 2", data: [3, 4, 5] },
    { name: "Series 3", data: [6, 7, 8] }
  ]
});
</script>

Related Members