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

Legend.labels

configuration

The chart legend label configuration.

legend.labels

Object

<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.labels.color

String

The text color of the labels. Accepts a valid CSS color string, including hex and rgb.

Default: "black"

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

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

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

legend.labels.font

String

The font style of the labels. Accepts a valid CSS color string, for example "20px 'Courier New'".

Default: "12px Arial,Helvetica,sans-serif"

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

legend.labels.margin

Number|Object

The margin of the labels. A numeric value will set all margins.

Default: 0

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

legend.labels.padding

Number|Object

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

Default: 0

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

legend.labels.template

String|Function

The template which renders the labels.

The fields which can be used in the template are:

text - the text the legend item.
series - the data series.
value - the point value. (only for donut and pie charts)
percentage - the point value represented as a percentage value. Available only for donut, pie and 100% stacked charts.

The text can be split into multiple lines by using line feed characters ("\n").

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

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