series.labels.toObject
The chart series to label configuration.
The chart displays the series to labels when the series.labels.visible option is set to
trueor when the series.labels.to.visible option is set totrue.
Example - configure the series to labels
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
data: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 }
],
labels: {
to: {
visible: true,
color: "blue",
background: "yellow"
}
}
}]
});
</script>series.labels.to.backgroundString|Function
The background color of the to labels. Accepts a valid CSS color string, including hex and rgb.
Example - set the to label background color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
data: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 }
],
labels: {
to: {
visible: true,
background: "lightblue"
}
}
}]
});
</script>series.labels.to.borderObject
The border of the to labels.
Example - configure the to label border
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
data: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 }
],
labels: {
to: {
visible: true,
border: {
color: "blue",
width: 2,
dashType: "dash"
}
}
}
}]
});
</script>series.labels.to.border.colorString|Function(default: "black")
The color of the border. Accepts a valid CSS color string, including hex and rgb.
Example - set the to label border color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
data: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 }
],
labels: {
to: {
visible: true,
border: {
color: "#ff0000",
width: 2
}
}
}
}]
});
</script>series.labels.to.border.dashTypeString|Function(default: "solid")
The dash type of the border.
The following dash types are supported:
- "dash" - a line consisting of dashes
- "dashDot" - a line consisting of a repeating pattern of dash-dot
- "dot" - a line consisting of dots
- "longDash" - a line consisting of a repeating pattern of long-dash
- "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
- "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
- "solid" - a solid line
Example - set the to label border dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
data: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 }
],
labels: {
to: {
visible: true,
border: {
color: "blue",
width: 2,
dashType: "dashDot"
}
}
}
}]
});
</script>series.labels.to.border.widthNumber|Function(default: 0)
The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.
Example - set the to label border width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
data: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 }
],
labels: {
to: {
visible: true,
border: {
color: "blue",
width: 3
}
}
}
}]
});
</script>series.labels.to.colorString|Function
The text color of the to labels. Accepts a valid CSS color string, including hex and rgb.
Example - set the to label color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
data: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 }
],
labels: {
to: {
visible: true,
color: "#ff6600"
}
}
}]
});
</script>series.labels.to.fontString|Function(default: "12px Arial,Helvetica,sans-serif")
The font style of the to labels.
Example - set the to label font
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
data: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 }
],
labels: {
to: {
visible: true,
font: "16px Arial"
}
}
}]
});
</script>series.labels.to.formatString|Function(default: "{0}")
The format of the to labels. Uses kendo.format.
Format placeholders:
- {0} - the value
Example - set the to label format
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
data: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 }
],
labels: {
to: {
visible: true,
format: "To: {0}"
}
}
}]
});
</script>series.labels.to.marginNumber|Object(default: 5)
The margin of the to labels. A numeric value will set all margins.
Example - set the to label margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
data: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 }
],
labels: {
to: {
visible: true,
margin: 10
}
}
}]
});
</script>series.labels.to.margin.bottomNumber(default: 0)
The bottom margin of the to labels.
Example - set the to label bottom margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
data: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 }
],
labels: {
to: {
visible: true,
margin: {
bottom: 15
}
}
}
}]
});
</script>series.labels.to.margin.leftNumber(default: 0)
The left margin of the to labels.
Example - set the to label left margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
data: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 }
],
labels: {
to: {
visible: true,
margin: {
left: 20
}
}
}
}]
});
</script>series.labels.to.margin.rightNumber(default: 0)
The right margin of the to labels.
Example - set the to label right margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
data: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 }
],
labels: {
to: {
visible: true,
margin: {
right: 10
}
}
}
}]
});
</script>series.labels.to.margin.topNumber(default: 0)
The top margin of the to labels.
Example - set the to label top margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
data: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 }
],
labels: {
to: {
visible: true,
margin: {
top: 8
}
}
}
}]
});
</script>series.labels.to.paddingNumber|Object(default: 0)
The padding of the to labels. A numeric value will set all paddings.
Example - set the to label padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
data: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 }
],
labels: {
to: {
visible: true,
padding: 5,
background: "lightgray"
}
}
}]
});
</script>series.labels.to.padding.bottomNumber(default: 0)
The bottom padding of the to labels.
Example - set the to label bottom padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
data: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 }
],
labels: {
to: {
visible: true,
padding: {
bottom: 8
},
background: "lightgray"
}
}
}]
});
</script>series.labels.to.padding.leftNumber(default: 0)
The left padding of the to labels.
Example - set the to label left padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
data: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 }
],
labels: {
to: {
visible: true,
padding: {
left: 12
},
background: "lightgray"
}
}
}]
});
</script>series.labels.to.padding.rightNumber(default: 0)
The right padding of the to labels.
Example - set the to label right padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
data: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 }
],
labels: {
to: {
visible: true,
padding: {
right: 6
},
background: "lightgray"
}
}
}]
});
</script>series.labels.to.padding.topNumber(default: 0)
The top padding of the to labels.
Example - set the to label top padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
data: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 }
],
labels: {
to: {
visible: true,
padding: {
top: 10
},
background: "lightgray"
}
}
}]
});
</script>series.labels.to.positionString|Function
The position of the to labels.
- "center" - the label is positioned at the point center.
- "insideBase" - the label is positioned inside, near the base of the bar.
- "insideEnd" - the label is positioned inside, near the end of the point.
- "outsideEnd" - the label is positioned outside, near the end of the point.
- "above" - the label is positioned at the top of the marker. Applicable for "rangeArea" and "verticalRangeArea" series.
- "below" - the label is positioned at the bottom of the marker. Applicable for "rangeArea" and "verticalRangeArea" series.
- "left" - the label is positioned to the left of the marker. Applicable for "rangeArea" and "verticalRangeArea" series.
- "right" - the label is positioned to the right of the marker. Applicable for "rangeArea" and "verticalRangeArea" series.
Example - set the to label position
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
data: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 }
],
labels: {
to: {
visible: true,
position: "above"
}
}
}]
});
</script>series.labels.to.templateString|Function
The template which renders the chart series to label.
The fields which can be used in the template are:
- category - the category name.
- dataItem - the original data item used to construct the point. Will be null if binding to array.
- series - the data series
- value - the point value. An object containing from and to values.
Example - set the to label template
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
data: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 }
],
labels: {
to: {
visible: true,
template: (data) => `To: ${data.value.to}`
}
}
}]
});
</script>The text can be split into multiple lines by using line feed characters ("\n").
series.labels.to.visibleBoolean|Function(default: false)
If set to true the chart will display the series to labels. By default chart series to labels are not displayed.
Example - show the to labels
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
data: [
{ from: 1, to: 2 },
{ from: 2, to: 3 },
{ from: 3, to: 4 }
],
labels: {
to: {
visible: true
}
}
}]
});
</script>In this article