legend.labels Object

The chart legend label configuration.

Example - configure the chart legend labels

<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 (default: "black")

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

Example - set the chart legend label color as a hex string

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

Example - set the chart legend label color as a RGB value

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

Example - set the chart legend label color by name

<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 (default: "12px Arial,Helvetica,sans-serif")

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

Example - set the chart legend label font

<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 (default: 0)

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

Example - set the chart legend label margin as a number

<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.margin.bottom Number (default: 0)

The bottom margin of the labels.

Example - set the chart legend label bottom margin

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

legend.labels.margin.left Number (default: 0)

The left margin of the labels.

Example - set the chart legend label left margin

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

legend.labels.margin.right Number (default: 0)

The right margin of the labels.

Example - set the chart legend label right margin

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

legend.labels.margin.top Number (default: 0)

The top margin of the labels.

Example - set the chart legend label top margin

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

legend.labels.padding Number|Object (default: 0)

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

Example - set the chart legend label padding as a number

<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.padding.bottom Number (default: 0)

The bottom padding of the labels.

Example - set the chart legend label bottom padding

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

legend.labels.padding.left Number (default: 6)

The left padding of the labels.

Example - set the chart legend label left padding

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

legend.labels.padding.right Number (default: 0)

The right padding of the labels.

Example - set the chart legend label right padding

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

legend.labels.padding.top Number (default: 0)

The top padding of the labels.

Example - set the chart legend label top padding

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  legend: {
    labels: {
      padding: {
        top: 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").

Example - set the chart legend label template as a string

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

Example - set the chart legend label template as a function

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