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

Series.labels

configuration

The chart series label configuration.

The chart displays the series labels when the series.labels.visible option is set to true.

series.labels

Object

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    labels: {
      visible: true,
      background: "green",
      border: {
        width: 2,
        color: "black"
      }
    },
    data: [1, 2]
  }]
});
</script>

series.labels.align

String

The label alignment when series.type is set to "donut", "funnel", "pyramid" or "pie".

The supported values for "donut" and "pie" are:

"circle" - the labels are positioned in circle around the chart.
"column" - the labels are positioned in columns to the left and right of the chart.

The supported values for "funnel" and "pyramid" are:

"center" - the labels are positioned in the center over the segment.
"right" - the labels are positioned on the right side of the chart and do not (if there is enough space) overlap the segment(s).
"left" - the labels are positioned on the left side of the chart and do not (if there is enough space) overlap the segment(s).

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    labels: {
      visible: true,
      align: "column"
    },
    type: "pie",
    data: [1, 2, 3, 4, 5, 6]
  }]
});
</script>

series.labels.ariaTemplate

String | Function

The template which renders the ARIA label for the series labels.

The fields which can be used in the template are:

category - the category name. Available for area, bar, column, bubble, donut, line and pie series.
dataItem - the original data item used to construct the point. Will be null if binding to array.
percentage - the point value represented as a percentage value. Available only for 100% stacked charts.
series - the data series
value - the point value. Can be a number or object containing each bound field.

pseudo

    $("#chart").kendoChart({
         title: {
             text: "My Chart Title"
         },
         series: [
             {
                 type: "area",
                 name: "Series 1",
                 data: [200, 450, 300, 125],
                 labels: {
                     template: "#= value #%",
                     ariaTemplate: "The value for #= series.name # in #= category # is #= value #",
                     visible: true
                 }
             }
         ],
         categoryAxis: {
             categories: [2000, 2001, 2002, 2003]
         }
    });

series.labels.background

String|Function

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

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    labels: {
      visible: true,
      background: "green"
    },
    data: [1, 2]
  }]
});
</script>

series.labels.border

Object

The border of the labels.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    {
      data: [1, 2, 3],
      labels: {
        visible: true,
        border: {
          color: "green",
          dashType: "dashDot",
          width: 1
        }
      }
    }
  ]
});
</script>

series.labels.color

String|Function

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

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

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

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

series.labels.distance

Number

The distance of the labels when series.type is set to "donut" or "pie".

Default: 35

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    labels: {
      visible: true,
      distance: 70
    },
    type: "pie",
    data: [1, 2, 3, 4, 5, 6]
  }]
});
</script>

series.labels.font

String|Function

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

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

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

series.labels.format

String|Function

The format of the labels. Uses kendo.format.

Format placeholders:

Area, bar, column, line, pie, radarArea, radarColumn and radarLine
- {0} - value
Bubble
- {0} - x value
- {1} - y value
- {2} - size value
- {3} - category name
Bullet
- {0} - value
- {1} - target value
Scatter, scatterLine
- {0} - x value
- {1} - y value
PolarArea, polarLine and polarScatter
- {0} - x value (degrees)
- {1} - y value
Candlestick and OHLC
- {0} - open value
- {1} - high value
- {2} - low value
- {3} - close value
- {4} - category name
RangeArea, rangeBar, rangeColumn
- {0} - from value
- {1} - to value

Default: "{0}"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    labels: {
      visible: true,
      format: "{0:C}"
    },
    data: [1, 2, 3]
  }]
});
</script>

series.labels.from

Object

The chart series from label configuration.

The chart displays the series from labels when the series.labels.visible option is set to true or when the series.labels.from.visible option is set to true.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "rangeArea",
    data: [
      { from: 1, to: 2 },
      { from: 2, to: 3 },
      { from: 3, to: 4 }
    ],
    labels: {
      from: {
        visible: true,
        color: "red",
        background: "yellow"
      }
    }
  }]
});
</script>

series.labels.margin

Number|Object

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

Default: 5

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [
      {
        labels: {
          visible: true,
          format: "{0:C}",
          margin:20
        },
        data: [1, 2, 3]
      }
    ]
  });
</script>

series.labels.padding

Number|Object

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

Bar and column series always apply full padding and will ignore this setting.

Default: 0

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

series.labels.position

String|Function

The position of the labels.

"above" - the label is positioned at the top of the marker. Applicable for series that render points, incl. bubble.
"below" - the label is positioned at the bottom of the marker. Applicable for series that render points, incl. bubble.
"center" - the label is positioned at the point center. Applicable for bar, column, donut, pie, funnel, pyramid, radarColumn and waterfall series.
"insideBase" - the label is positioned inside, near the base of the bar. Applicable for bar, column and waterfall series.
"insideEnd" - the label is positioned inside, near the end of the point. Applicable for bar, column, donut, pie, radarColumn and waterfall series.
"left" - the label is positioned to the left of the marker. Applicable for series that render points, incl. bubble.
"outsideEnd" - the label is positioned outside, near the end of the point. Applicable for bar, column, donut, pie, radarColumn and waterfall series. Not applicable for stacked series.
"right" - the label is positioned to the right of the marker. Applicable for series that render points, incl. bubble.
"top" - the label is positioned at the top of the segment. Applicable for funnel series.
"bottom" - the label is positioned at the bottom of the segment. Applicable for funnel and pyramid series.
"auto" - the from and to labels area positioned at the top/bottom(rangeArea series) or left/right(verticalRangeArea series) so that they are outside the filled area. Applicable for rangeArea and verticalRangeArea series.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    labels: {
      visible: true,
      position: "center"
    },
    data: [1, 2, 3]
  }]
});
</script>

series.labels.rotation

String|Number

The rotation angle of the labels. By default, the labels are not rotated.

 <div id="chart"></div>
    <script>
    $("#chart").kendoChart({
        seriesDefaults: {
          type: "column",
        },
        series: [{
            data: [1, 2, 3],
            labels: {
                visible: true,
                rotation: 310
            }
        }]
    });
  </script>

series.labels.template

String|Function

The template which renders the chart series label.

The fields which can be used in the template are:

category - the category name. Available for area, bar, column, bubble, donut, line, pie and waterfall series.
dataItem - the original data item used to construct the point. Will be null if binding to array.
percentage - the point value represented as a percentage value. Available only for donut, pie and 100% stacked charts.
series - the data series
stackValue - the cumulative point value on the stack. Available only for stackable series.
value - the point value. Can be a number or object containing each bound field.
runningTotal - the sum of point values since the last "runningTotal" summary point. Available for waterfall series.
total - the sum of all previous series values. Available for waterfall series.

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

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    labels: {
      visible: true,
      template: "Value: #: value #%"
    },
    data: [1, 2, 3]
  }]
});
</script>

series.labels.to

Object

The chart series to label configuration.

The chart displays the series to labels when the series.labels.visible option is set to true or when the series.labels.to.visible option is set to true.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [{
    type: "rangeArea",
    data: [
      { from: 1, to: 2 },
      { from: 2, to: 3 },
      { from: 3, to: 4 }
    ],
    labels: {
      to: {
        visible: true,
        color: "blue",
        background: "yellow"
      }
    }
  }]
});
</script>

series.labels.visible

Boolean|Function

If set to true the chart will display the series labels. By default chart series labels are not displayed.

Default: false

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    labels: {
      visible: true
    },
    data: [1, 2, 3]
  }]
});
</script>

series.labels.visual

Function

A function that can be used to create a custom visual for the labels. The available argument fields are:

text - the label text.
rect - the kendo.geometry.Rect that defines where the visual should be rendered.
options - the label options.
createVisual - a function that can be used to get the default visual.
sender - the chart instance (may be undefined).
value - The point value.
category - The point category.
stackValue - The cumulative point value on the stack. Available only for the stackable series.
dataItem - The point dataItem.
series - The point series.
percentage - The point value that is represented as a percentage value. Available only for the Donut, Pie, and 100% stacked charts.
runningTotal - The sum of point values from the last runningTotal summary point onwards. Available for the Waterfall series.
total - The sum of all previous series values. Available for the Waterfall series.

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [ {
      labels: {
        visible: true,
        visual: function(e) {
          var center = e.rect.center();
          return new kendo.drawing.Text(e.text, [center.x, e.rect.origin.y], {
            fill: {
              color: "red"
            }
          });
        }
      },
      data: [1, 2, 3]
    }]
  });
</script>

Related Members