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

SeriesDefaults.labels

configuration

The chart series label configuration.

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

seriesDefaults.labels

Object

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

seriesDefaults.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"
         },
         seriesDefaults: {
              type: "area",
              labels: {
                  template: "#= value #%",
                  ariaTemplate: "The value for #= series.name # in #= category # is #= value #",
                  visible: true
              }
          },
         series: [
             {
                 name: "Series 1",
                 data: [200, 450, 300, 125]
             }
         ],
         categoryAxis: {
             categories: [2000, 2001, 2002, 2003]
         }
    });

seriesDefaults.labels.background

String

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

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

seriesDefaults.labels.border

Object

The border of the labels.

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

seriesDefaults.labels.color

String

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

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

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

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

seriesDefaults.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({
  seriesDefaults: {
    labels: {
      visible: true,
      font: "20px sans-serif"
    }
  },
  series: [
    { data: [1, 2] }
  ]
});
</script>

seriesDefaults.labels.format

String

The format of the labels. Uses kendo.format.

Default: "{0}"

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

seriesDefaults.labels.from

Object

The chart series from label configuration.

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

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  seriesDefaults: {
    type: "rangeColumn",
    labels: {
      from: {
        visible: true,
        color: "blue"
      }
    }
  },
  series: [{
    data: [[1, 3], [2, 5], [3, 7]]
  }]
});
</script>

seriesDefaults.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({
  seriesDefaults: {
    labels: {
      margin: 10
    }
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

seriesDefaults.labels.padding

Number|Object

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

Default: 0

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

seriesDefaults.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 and pyramid 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({
  seriesDefaults: {
    labels: {
      visible: true,
      position: "insideBase"
    }
  },
  series: [ {
    data: [1, 2, 3]
  }]
});
</script>

seriesDefaults.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",
          labels: {
            visible: true,
            rotation: 310
          }
        },
        series: [
           { data: [1, 2, 3] }
         ]
    });
  </script>

seriesDefaults.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, funnel, pyramid, 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 for donut, funnel, pyramid and pie series.
series - the data 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({
  seriesDefaults: {
    labels: {
      visible: true,
      template: "Value: #: value #%"
    }
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

seriesDefaults.labels.to

Object

The chart series to label configuration.

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

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  seriesDefaults: {
    type: "rangeColumn",
    labels: {
      to: {
        visible: true,
        color: "red"
      }
    }
  },
  series: [{
    data: [[1, 3], [2, 5], [3, 7]]
  }]
});
</script>

seriesDefaults.labels.visible

Boolean

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({
  seriesDefaults: {
    labels: {
      visible: true
    }
  },
  series: [{
    data: [1, 2, 3]
  }]
});
</script>

seriesDefaults.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({
    seriesDefaults: {
      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"
            }
          });
        }
      }
    },
    series: [{
      data: [1, 2, 3]
    }]
  });
</script>

Related Members