seriesDefaults.labels.toObject
The chart series to label configuration.
The chart displays the series labels when the seriesDefaults.labels.visible option is set to
trueor when the seriesDefaults.labels.to.visible option is set totrue.
Example
<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.to.backgroundString
The background color of the to labels. Accepts a valid CSS color string, including hex and rgb.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeColumn",
data: [[5, 10], [7, 15], [9, 20]],
labels: {
to: {
background: "lightblue",
visible: true
}
}
}]
});
</script>seriesDefaults.labels.to.borderObject
The border of the to labels.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeColumn",
data: [[5, 10], [7, 15], [9, 20]],
labels: {
to: {
border: {
color: "red",
width: 2
},
visible: true
}
}
}]
});
</script>seriesDefaults.labels.to.border.colorString(default: "black")
The color of the border. Accepts a valid CSS color string, including hex and rgb.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeColumn",
data: [[5, 10], [7, 15], [9, 20]],
labels: {
to: {
border: {
color: "blue"
},
visible: true
}
}
}]
});
</script>seriesDefaults.labels.to.border.dashTypeString(default: "solid")
The dash type of the border.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeColumn",
data: [[5, 10], [7, 15], [9, 20]],
labels: {
to: {
border: {
color: "red",
dashType: "dash"
},
visible: true
}
}
}]
});
</script>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
seriesDefaults.labels.to.border.widthNumber(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
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeColumn",
data: [[5, 10], [7, 15], [9, 20]],
labels: {
to: {
border: {
color: "red",
width: 3
},
visible: true
}
}
}]
});
</script>seriesDefaults.labels.to.colorString
The text color of the to labels. Accepts a valid CSS color string, including hex and rgb.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeColumn",
data: [[5, 10], [7, 15], [9, 20]],
labels: {
to: {
color: "red",
visible: true
}
}
}]
});
</script>seriesDefaults.labels.to.fontString(default: "12px Arial,Helvetica,sans-serif")
The font style of the to labels.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeColumn",
data: [[5, 10], [7, 15], [9, 20]],
labels: {
to: {
font: "16px bold Arial",
visible: true
}
}
}]
});
</script>seriesDefaults.labels.to.formatString(default: "{0}")
The format of the to labels. Uses kendo.format.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeColumn",
data: [[5, 10], [7, 15], [9, 20]],
labels: {
to: {
format: "Value: {0}",
visible: true
}
}
}]
});
</script>seriesDefaults.labels.to.marginNumber|Object(default: 0)
The margin of the to labels. A numeric value will set all margins.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeColumn",
data: [[5, 10], [7, 15], [9, 20]],
labels: {
to: {
margin: 10,
background: "lightblue",
visible: true
}
}
}]
});
</script>seriesDefaults.labels.to.margin.bottomNumber(default: 0)
The bottom margin of the to labels.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeColumn",
data: [[5, 10], [7, 15], [9, 20]],
labels: {
to: {
margin: {
bottom: 15
},
background: "lightblue",
visible: true
}
}
}]
});
</script>seriesDefaults.labels.to.margin.leftNumber(default: 0)
The left margin of the to labels.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeColumn",
data: [[5, 10], [7, 15], [9, 20]],
labels: {
to: {
margin: {
left: 15
},
background: "lightblue",
visible: true
}
}
}]
});
</script>seriesDefaults.labels.to.margin.rightNumber(default: 0)
The right margin of the to labels.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeColumn",
data: [[5, 10], [7, 15], [9, 20]],
labels: {
to: {
margin: {
right: 15
},
background: "lightblue",
visible: true
}
}
}]
});
</script>seriesDefaults.labels.to.margin.topNumber(default: 0)
The top margin of the to labels.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeColumn",
data: [[5, 10], [7, 15], [9, 20]],
labels: {
to: {
margin: {
top: 15
},
background: "lightblue",
visible: true
}
}
}]
});
</script>seriesDefaults.labels.to.paddingNumber|Object(default: 0)
The padding of the to labels. A numeric value will set all paddings.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeColumn",
data: [[5, 10], [7, 15], [9, 20]],
labels: {
to: {
padding: 10,
background: "lightblue",
visible: true
}
}
}]
});
</script>seriesDefaults.labels.to.padding.bottomNumber(default: 0)
The bottom padding of the to labels.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeColumn",
data: [[5, 10], [7, 15], [9, 20]],
labels: {
to: {
padding: {
bottom: 15
},
background: "lightblue",
visible: true
}
}
}]
});
</script>seriesDefaults.labels.to.padding.leftNumber(default: 0)
The left padding of the to labels.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeColumn",
data: [[5, 10], [7, 15], [9, 20]],
labels: {
to: {
padding: {
left: 15
},
background: "lightblue",
visible: true
}
}
}]
});
</script>seriesDefaults.labels.to.padding.rightNumber(default: 0)
The right padding of the to labels.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeColumn",
data: [[5, 10], [7, 15], [9, 20]],
labels: {
to: {
padding: {
right: 15
},
background: "lightblue",
visible: true
}
}
}]
});
</script>seriesDefaults.labels.to.padding.topNumber(default: 0)
The top padding of the to labels.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeColumn",
data: [[5, 10], [7, 15], [9, 20]],
labels: {
to: {
padding: {
top: 15
},
background: "lightblue",
visible: true
}
}
}]
});
</script>seriesDefaults.labels.to.templateString|Function
The template which renders the chart series to label.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeColumn",
data: [[5, 10], [7, 15], [9, 20]],
labels: {
to: {
template: (data) => `Max: ${data.value}`,
visible: true
}
}
}]
});
</script>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").
seriesDefaults.labels.to.visibleBoolean(default: false)
If set to true the chart will display the series to labels. By default chart series to labels are not displayed.
Example
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeColumn",
data: [[1, 5], [2, 7], [3, 4]],
labels: {
to: {
visible: true
}
}
}]
});
</script>