series.labels.fromObject
The chart series from label configuration.
The chart displays the series from labels when the series.labels.visible option is set to
trueor when the series.labels.from.visible option is set totrue.
Example - configure the series from 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: {
from: {
visible: true,
color: "red",
background: "yellow"
}
}
}]
});
</script>series.labels.from.backgroundString|Function
The background color of the from labels. Accepts a valid CSS color string, including hex and rgb.
Example - set the from 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: {
from: {
visible: true,
background: "yellow"
}
}
}]
});
</script>series.labels.from.borderObject
The border of the from labels.
Example - configure the from 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: {
from: {
visible: true,
border: {
color: "red",
width: 2,
dashType: "dash"
}
}
}
}]
});
</script>series.labels.from.border.colorString|Function(default: "black")
The color of the border. Accepts a valid CSS color string, including hex and rgb.
Example - set the from 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: {
from: {
visible: true,
border: {
color: "red",
width: 2
}
}
}
}]
});
</script>series.labels.from.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 from 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: {
from: {
visible: true,
border: {
color: "black",
width: 2,
dashType: "dash"
}
}
}
}]
});
</script>series.labels.from.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 from 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: {
from: {
visible: true,
border: {
color: "black",
width: 3
}
}
}
}]
});
</script>series.labels.from.colorString|Function
The text color of the from labels. Accepts a valid CSS color string, including hex and rgb.
Example - set the from 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: {
from: {
visible: true,
color: "red"
}
}
}]
});
</script>series.labels.from.fontString|Function(default: "12px Arial,Helvetica,sans-serif")
The font style of the from labels.
Example - set the from 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: {
from: {
visible: true,
font: "bold 16px Arial"
}
}
}]
});
</script>series.labels.from.formatString|Function(default: "{0}")
The format of the from labels. Uses kendo.format.
Example - set the from label format
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "rangeArea",
data: [
{ from: 1.5, to: 2.5 },
{ from: 2.5, to: 3.5 },
{ from: 3.5, to: 4.5 }
],
labels: {
from: {
visible: true,
format: "{0:N2}"
}
}
}]
});
</script>series.labels.from.marginNumber|Object(default: 5)
The margin of the from labels. A numeric value will set all margins.
Example - set the from 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: {
from: {
visible: true,
margin: 10
}
}
}]
});
</script>series.labels.from.margin.bottomNumber(default: 0)
The bottom margin of the from labels.
Example - set the from 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: {
from: {
visible: true,
margin: {
bottom: 10
}
}
}
}]
});
</script>series.labels.from.margin.leftNumber(default: 0)
The left margin of the from labels.
Example - set the from 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: {
from: {
visible: true,
margin: {
left: 10
}
}
}
}]
});
</script>series.labels.from.margin.rightNumber(default: 0)
The right margin of the from labels.
Example - set the from 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: {
from: {
visible: true,
margin: {
right: 10
}
}
}
}]
});
</script>series.labels.from.margin.topNumber(default: 0)
The top margin of the from labels.
Example - set the from 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: {
from: {
visible: true,
margin: {
top: 10
}
}
}
}]
});
</script>series.labels.from.paddingNumber|Object(default: 0)
The padding of the from labels. A numeric value will set all paddings.
Example - set the from 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: {
from: {
visible: true,
background: "yellow",
padding: 10
}
}
}]
});
</script>series.labels.from.padding.bottomNumber(default: 0)
The bottom padding of the from labels.
Example - set the from 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: {
from: {
visible: true,
background: "yellow",
padding: {
bottom: 10
}
}
}
}]
});
</script>series.labels.from.padding.leftNumber(default: 0)
The left padding of the from labels.
Example - set the from 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: {
from: {
visible: true,
background: "yellow",
padding: {
left: 10
}
}
}
}]
});
</script>series.labels.from.padding.rightNumber(default: 0)
The right padding of the from labels.
Example - set the from 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: {
from: {
visible: true,
background: "yellow",
padding: {
right: 10
}
}
}
}]
});
</script>series.labels.from.padding.topNumber(default: 0)
The top padding of the from labels.
Example - set the from 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: {
from: {
visible: true,
background: "yellow",
padding: {
top: 10
}
}
}
}]
});
</script>series.labels.from.positionString|Function
The position of the from 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 from 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: {
from: {
visible: true,
position: "below"
}
}
}]
});
</script>series.labels.from.templateString|Function
The template which renders the chart series from 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.
The text can be split into multiple lines by using line feed characters ("\n").
Example - set the from 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: {
from: {
visible: true,
template: (data) => `From: ${data.value.from}`
}
}
}]
});
</script>series.labels.from.visibleBoolean|Function(default: false)
If set to true the chart will display the series from labels. By default chart series from labels are not displayed.
Example - show the from 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: {
from: {
visible: true
}
}
}]
});
</script>