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

Series.labels

configuration

Configures the series data labels.

series.labels

Object

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

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2000, 1, 1), open: 10, high: 15, low: 8, close: 12 },
            { date: new Date(2000, 1, 2), open: 12, high: 18, low: 10, close: 16 }
        ]
    },
    dateField: "date",
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close",
        labels: {
            visible: true,
            background: "yellow",
            color: "black"
        }
    }]
});
</script>

series.labels.background

String|Function

The background color of the labels.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2000, 1, 1), open: 10, high: 15, low: 8, close: 12 },
            { date: new Date(2000, 1, 2), open: 12, high: 18, low: 10, close: 16 }
        ]
    },
    dateField: "date",
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close",
        labels: {
            visible: true,
            background: "lightblue"
        }
    }]
});
</script>

series.labels.border

Object

The border of the labels.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2000, 1, 1), open: 10, high: 15, low: 8, close: 12 },
            { date: new Date(2000, 1, 2), open: 12, high: 18, low: 10, close: 16 }
        ]
    },
    dateField: "date",
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close",
        labels: {
            visible: true,
            border: {
                color: "red",
                width: 1
            }
        }
    }]
});
</script>

series.labels.color

String|Function

The text color of the labels.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2000, 1, 1), open: 10, high: 15, low: 8, close: 12 },
            { date: new Date(2000, 1, 2), open: 12, high: 18, low: 10, close: 16 }
        ]
    },
    dateField: "date",
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close",
        labels: {
            visible: true,
            color: "red"
        }
    }]
});
</script>

series.labels.font

String|Function

The font style of the labels.

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

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2000, 1, 1), open: 10, high: 15, low: 8, close: 12 },
            { date: new Date(2000, 1, 2), open: 12, high: 18, low: 10, close: 16 }
        ]
    },
    dateField: "date",
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close",
        labels: {
            visible: true,
            font: "16px Arial"
        }
    }]
});
</script>

series.labels.format

String|Function

The format of the labels.

pseudo

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

series.labels.margin

Number|Object

The margin of the labels.

Default: { left: 5, right: 5}

pseudo

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

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

series.labels.position

String|Function

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

Default: "above"

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2000, 1, 1), open: 10, high: 15, low: 8, close: 12 },
            { date: new Date(2000, 1, 2), open: 12, high: 18, low: 10, close: 16 }
        ]
    },
    dateField: "date",
    series: [{
        type: "line",
        field: "close",
        labels: {
            visible: true,
            position: "above"
        }
    }]
});
</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 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 initialization
    $("#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]
         }
    });

series.labels.visible

Boolean|Function

The visibility of the labels.

Default: false

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2000, 1, 1), open: 10, high: 15, low: 8, close: 12 },
            { date: new Date(2000, 1, 2), open: 12, high: 18, low: 10, close: 16 }
        ]
    },
    dateField: "date",
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close",
        labels: {
            visible: true
        }
    }]
});
</script>

Related Members