Configures the series data labels.

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.

Example

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
  dataSource: {
    data: [
      { value: 1, category: "One", date: new Date(2012, 1, 1)},
      { value: 2, category: "Two", date: new Date(2012, 1, 2)}
    ],
    group: { field: "category" }
  },
  dateField: "date",
  navigator: {
    series: [
      {
        field: "value",
        name: "Value: #: group.value #",
        visibleInLegend: true,
        labels: {
          ariaTemplate: "The value for #= e.series.name # in #= e.category # is #= e.value #",
          visible: true
        }
      }
    ]
  },
  legend: {
    visible: true,
    position: "bottom"
  }
});
</script>

The background color of the labels.

The border of the labels.

The color of the border.

The dash type of the border.

"solid"

Specifies a solid line.

"dot"

Specifies a line consisting of dots.

"dash"

Specifies a line consisting of dashes.

"longDash"

Specifies a line consisting of a repeating pattern of long-dash.

"dashDot"

Specifies a line consisting of a repeating pattern of dash-dot.

"longDashDot"

Specifies a line consisting of a repeating pattern of long-dash-dot.

"longDashDotDot"

Specifies a line consisting of a repeating pattern of long-dash-dot-dot.

The width of the border.

The text color of the labels.

The font style of the labels.

The format of the labels.

Example

    //sets format of the labels
    format: "C"

The margin of the labels.

Example

    // sets the top, right, bottom and left margin to 3px.
    margin: 3


    // sets the top and bottom margin to 1px
    // margin left and right are with 5px (by default)
    margin: { top: 1, bottom: 1 }

The padding of the labels.

Example

    // sets the top, right, bottom and left padding to 3px.
    padding: 3


    // sets the top and left padding to 1px
    // padding right and bottom are with 0px (by default)
    padding: { top: 1, left: 1 }

Defines the position of the labels.

"above"

The label is positioned at the top of the marker.

** Applicable for area and line series. **

"center"

The label is positioned at the point center.

** Applicable for column series only. **

"insideEnd"

The label is positioned inside, near the end of the point.

** Applicable for column series only. **

"insideBase"

The label is positioned inside, near the base of the bar.

** Applicable for column series. **

"outsideEnd"

The label is positioned outside, near the end of the bar.

** Applicable for column series only. Not applicable for stacked series. **

"right"

The label is positioned to the right of the marker.

** Applicable for area and line series. **

"below"

The label is positioned at the bottom of the marker.

** Applicable for area and line series. **

"left"

The label is positioned to the left of the marker.

** Applicable for area and line series. **

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

Example

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

The visibility of the labels.

In this article