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