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

SeriesDefaults.labels

configuration

Configures the series data labels.

seriesDefaults.labels

Object

pseudo

    $("#chart").kendoChart({
        seriesDefault: {
            // adjust the default label appearence for all series
            labels: {
                // set the margin on all sides to 1
                margin: 1,
                // format the labels as currency
                format: "C"
            }
        },
        //...
    });

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.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
  dataSource: {
    data: [
      { value: 1, date: new Date(2012, 1, 1)},
      { value: 2, date: new Date(2012, 1, 2)}
    ]
  },
  dateField: "date",
  seriesDefaults: {
    labels: {
      template: "#= value #%",
      ariaTemplate: "The value for #= series.name # on #= category # is #= value #",
      visible: true
    }
  },
  series: [
    {
      field: "value",
      name: "Series 1"
    }
  ]
});
</script>

seriesDefaults.labels.background

String

The background color of the labels. Any valid CSS color string will work here, including hex and rgb.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dateField: "date",
    seriesDefaults: {
         labels: {
            background: "#ff0000",
            visible: true
        }
      },
    series: [{
        type: "column",
      	color: "yellow",
        data: [
            { date: new Date(2000, 1, 1), value: 300 },
            { date: new Date(2000, 1, 2), value: 200 }
        ]
    }]
});
</script>

seriesDefaults.labels.border

Object

The border of the labels.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dateField: "date",
    seriesDefaults: {
         labels: {
            border: {
                color: "#ff0000",
                width: 2
            },
            visible: true
        }
      },
    series: [{
        type: "column",
      	color: "yellow",
        data: [
            { date: new Date(2000, 1, 1), value: 300 },
            { date: new Date(2000, 1, 2), value: 200 }
        ]
    }]
});
</script>

seriesDefaults.labels.color

String

The text color of the labels. Any valid CSS color string will work here, including hex and rgb.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dateField: "date",
    seriesDefaults: {
         labels: {
            color: "#ff0000",
            visible: true
        }
      },
    series: [{
        type: "column",
      	color: "yellow",
        data: [
            { date: new Date(2000, 1, 1), value: 300 },
            { date: new Date(2000, 1, 2), value: 200 }
        ]
    }]
});
</script>

seriesDefaults.labels.font

String

The font style of the labels. labels

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

pseudo

    $("#chart").kendoChart({
        seriesDefault: {
            // adjust the default label appearence for all series
            labels: {
                // set the font size to 14px
                font: "14px Arial,Helvetica,sans-serif"
            }
        },
        //...
    });

seriesDefaults.labels.format

String

The format of the labels.

pseudo

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

seriesDefaults.labels.margin

Number|Object

The margin of the labels.

Default: 0

pseudo

    $("#chart).kendoChart({
         labels: {
             // sets the top, right, bottom and left margin to 3px.
             margin: 3
         },
         //...
    });

    $("#chart").kendoChart({
         labels: {
             // sets the top and left margin to 1px
             // margin right and bottom are with 0px (by default)
             margin: { top: 1, left: 1 }
         },
         //...
    });

seriesDefaults.labels.padding

Number|Object

The padding of the labels.

Default: 0

pseudo

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

seriesDefaults.labels.template

String | Function

The label template. Template variables:

value - the point value
category - the category name
series - the data series
dataItem - the original data item used to construct the point. Will be null if binding to array.

pseudo

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

seriesDefaults.labels.visible

Boolean

The visibility of the labels.

Default: false

pseudo

    $("#chart").kendoChart({
        seriesDefault: {
            labels: {
                // hide all the series labels by default
                visible: true
            },
            //...
        }
    });

Related Members