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

Series.labels

configuration

Configures the series data labels.

series.labels

Object

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "line",
    series: [{
        data: [10, 15, 8, 12],
        labels: {
            visible: true,
            background: "yellow",
            color: "black"
        }
    }]
});
</script>

series.labels.align

String

Defines the alignment of the labels.

Available for pie series.

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

Default: "circle"

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "pie",
    series: [{
        data: [10, 15, 8, 12],
        labels: {
            align: "column",
            visible: true
        }
    }]
});
</script>

series.labels.background

String|Function

The background color of the labels.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "line",
    series: [{
        data: [10, 15, 8, 12],
        labels: {
            visible: true,
            background: "lightblue"
        }
    }]
});
</script>

series.labels.border

Object

The border of the labels.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "line",
    series: [{
        data: [10, 15, 8, 12],
        labels: {
            visible: true,
            border: {
                color: "red",
                width: 2,
                dashType: "dash"
            }
        }
    }]
});
</script>

series.labels.color

String|Function

The text color of the labels.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "line",
    series: [{
        data: [10, 15, 8, 12],
        labels: {
            visible: true,
            color: "red"
        }
    }]
});
</script>

series.labels.distance

Number

The distance of the labels.

Available for pie series.

Default: 35

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "pie",
    series: [{
        data: [10, 15, 8, 12],
        labels: {
            visible: true,
            distance: 50
        }
    }]
});
</script>

series.labels.font

String|Function

The font style of the labels.

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

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "line",
    series: [{
        data: [10, 15, 8, 12],
        labels: {
            visible: true,
            font: "16px Arial"
        }
    }]
});
</script>

series.labels.format

String|Function

The format of the labels.

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

series.labels.margin

Number|Object

The margin of the labels.

Default: { left: 5, right: 5}

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

// 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 bar, column, pie series.

"insideEnd"

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

Applicable for bar, column, pie series.

"insideBase"

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

Applicable for bar and column series.

"outsideEnd"

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

Applicable for bar, column, pie series. 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="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "line",
    series: [{
        data: [10, 15, 8, 12],
        labels: {
            visible: true,
            position: "below"
        }
    }]
});
</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 donut, pie and 100% stacked charts.
series - the data series
value - the point value. Can be a number or object containing each bound field.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "line",
    series: [{
        data: [10, 15, 8, 12],
        labels: {
            visible: true,
            template: (data) => `Value: ${data.value}`
        }
    }]
});
</script>

series.labels.visible

Boolean|Function

The visibility of the labels.

Default: false

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "line",
    series: [{
        data: [10, 15, 8, 12],
        labels: {
            visible: true
        }
    }]
});
</script>

Related Members