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

Legend.inactiveItems.labels

configuration

The chart legend label configuration.

legend.inactiveItems.labels

Object

<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.inactiveItems.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: {
    inactiveItems: {
      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: {
    inactiveItems: {
      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: {
    inactiveItems: {
      labels: {
        color: "green"
      }
    }
  },
  series: [
    { name: "Series 1", data: [1, 2, 3] },
    { name: "Series 2", data: [3, 4, 5] }
  ]
});
</script>

legend.inactiveItems.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: {
    inactiveItems: {
      labels: {
        font: "20px sans-serif"
      }
    }
  },
  series: [
    { name: "Series 1", data: [1, 2, 3] },
    { name: "Series 2", data: [3, 4, 5] }
  ]
});
</script>

legend.inactiveItems.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>