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

Legend

The Chart legend displays the name of the configured data series.

  • Series without a specified name will not display legend items.
  • To render a legend item for the Pie, Donut and Funnel series, provide the items with a categoryField.

To customize the legend, use the legend configuration option.

The following example demonstrates how to configure the position and orientation of the Chart legend.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    name: "Fibonacci",
    type: "column",
    data: [1, 2, 3, 5]
  }, {
    name: "Squares",
    type: "column",
    data: [0, 1, 4, 9]
  }],
  legend: {
    position: "bottom",
    orientation: "horizontal"
  }
});
</script>

Hiding the Legend

If you set the series names, the Chart displays a default legend.

The following example demonstrates how to hide the legend by using its visible property.

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

Hiding a Series from the Legend

To exclude series from the legend, set their visibleInLegend option to false.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    name: "Fibonacci",
    type: "column",
    data: [1, 2, 3, 5]
  }, {
    name: "Squares",
    type: "column",
    data: [0, 1, 4, 9],
    visibleInLegend: false
  }]
});
</script>

Customizing the Position

To control the position of the legend, use any of the following supported position values:

  • "top"
  • "bottom"
  • "left"
  • "right"
  • "custom"

It is possible to remove the legend from the flow and to absolutely position it by setting the position to custom and configuring the offsetX and offsetY options.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    name: "Fibonacci",
    type: "column",
    data: [1, 2, 3, 5]
  }, {
    name: "Squares",
    type: "column",
    data: [0, 1, 4, 9]
  }],
  legend: {
    position: "custom",
    offsetX: 40,
    offsetY: 25
  }
});
</script>

Setting a Title

The Chart legend section can be configured to hold a title with customizable layout and content. To define a title, provide a title object to the legend configuration.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    name: "Fibonacci",
    type: "column",
    data: [1, 2, 3, 5]
  }, {
    name: "Squares",
    type: "column",
    data: [0, 1, 4, 9]
  }],
  legend: {
    title: {
      text: "Series"
    }
  }
});
</script>

See Also

In this article