axisDefaults.labelsObject
The axis labels configuration.
Example - configure the axisDefaults labels
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
labels: {
font: "16px Arial",
color: "blue"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.labels.fontString(default: "12px Arial,Helvetica,sans-serif")
The font style of the labels. Accepts a valid CSS color string, for example "20px 'Courier New'".
Example - set the axisDefaults labels font
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
labels: {
font: "20px 'Courier New'"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.labels.formatString(default: "{0}")
The format used to display the labels. Uses kendo.format. Contains one placeholder ("{0}") which represents the category value.
Example - set the axisDefaults labels format
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
labels: {
format: "Value: {0:N0}"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.labels.marginNumber|Object(default: 0)
The margin of the labels. A numeric value will set all margins.
Example - set the axisDefaults labels margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
labels: {
margin: 5
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.labels.margin.bottomNumber(default: 0)
The bottom margin of the labels.
Example - set the axisDefaults labels bottom margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
labels: {
margin: {
bottom: 10
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.labels.margin.leftNumber(default: 0)
The left margin of the labels.
Example - set the axisDefaults labels left margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
labels: {
margin: {
left: 10
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.labels.margin.rightNumber(default: 0)
The right margin of the labels.
Example - set the axisDefaults labels right margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
labels: {
margin: {
right: 10
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.labels.margin.topNumber(default: 0)
The top margin of the labels.
Example - set the axisDefaults labels top margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
labels: {
margin: {
top: 10
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.labels.mirrorBoolean(default: false)
If set to true the chart will mirror the axis labels and ticks. If the labels are normally on the left side of the axis, mirroring the axis will render them to the right.
Example - enable axisDefaults labels mirroring
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
labels: {
mirror: true
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.labels.paddingObject|Number(default: 0)
The padding of the labels. A numeric value will set all paddings.
Example - set the axisDefaults labels padding as a number
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
labels: {
padding: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.labels.padding.bottomNumber(default: 0)
The bottom padding of the labels.
Example - set the axisDefaults labels bottom padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
labels: {
padding: {
bottom: 10
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.labels.padding.leftNumber(default: 0)
The left padding of the labels.
Example - set the axisDefaults labels left padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
labels: {
padding: {
left: 10
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.labels.padding.rightNumber(default: 0)
The right padding of the labels.
Example - set the axisDefaults labels right padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
labels: {
padding: {
right: 10
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.labels.padding.topNumber(default: 0)
The top padding of the labels.
Example - set the axisDefaults labels top padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
labels: {
padding: {
top: 10
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.labels.rotationNumber|String|Object(default: 0)
The rotation angle of the labels. By default the labels are not rotated. Can be set to "auto" if the axis is horizontal in which case the labels will be rotated only if the slot size is not sufficient for the entire labels.
Example - set the axisDefaults labels rotation as a number
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
labels: {
rotation: 45
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.labels.rotation.alignString(default: "end")
The alignment of the rotated labels relative to the slot center. The supported values are "end" and "center". By default the closest end of the label will be aligned to the center. If set to "center", the center of the rotated label will be aligned instead.
Example - set the axisDefaults labels rotation align
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
labels: {
rotation: {
align: "center",
angle: 45
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.labels.rotation.angleNumber|String(default: 0)
The rotation angle of the labels. By default the labels are not rotated. Can be set to "auto" if the axis is horizontal in which case the labels will be rotated only if the slot size is not sufficient for the entire labels.
Example - set the axisDefaults labels rotation angle
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
labels: {
rotation: {
angle: 90
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.labels.skipNumber(default: 0)
The number of labels to skip. By default no labels are skipped.
Example - set the axisDefaults labels skip
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
labels: {
skip: 2
}
},
series: [
{ data: [1, 2, 3, 4, 5, 6] }
]
});
</script>axisDefaults.labels.stepNumber(default: 1)
The label rendering step - render every n-th label. By default every label is rendered.
Example - set the axisDefaults labels step
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
labels: {
step: 2
}
},
series: [
{ data: [1, 2, 3, 4, 5, 6] }
]
});
</script>axisDefaults.labels.templateString|Function
The template which renders the labels.
The fields which can be used in the template are:
- value - the category value
- dataItem - the data item, in case a field has been specified. If the category does not have a corresponding item in the data then an empty object will be passed.
- format - the default format of the label
- culture - the default culture (if set) on the label
The text can be split into multiple lines by using line feed characters ("\n").
Example - set the axisDefaults label template as a string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
categories: ["2011", "2012", "2013"],
labels: {
template: "Value: #: value #"
},
},
series: [{
data: [1, 2, 3]
}]
});
</script>Example - set the axisDefaults label template as a function
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
categories: ["2011", "2012", "2013"],
labels: {
template: kendo.template("Value: #: value #")
},
},
series: [{
data: [1, 2, 3]
}]
});
</script>axisDefaults.labels.visibleBoolean(default: true)
If set to true the chart will display the axis labels. By default the axis labels are visible.
Example - hide the axisDefaults labels
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
labels: {
visible: false
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.labels.visualFunction
A function that can be used to create a custom visual for the labels. The available argument fields are:
- createVisual - a function that can be used to get the default visual.
- culture - the default culture (if set) on the label
- dataItem - the data item, in case a field has been specified
- format - the default format of the label
- options - the label options.
- rect - the
kendo.geometry.Rectthat defines where the visual should be rendered. - sender - the chart instance (may be undefined).
- text - the label text.
- value - the category value
Example - using custom visual for axisDefaults labels
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
labels: {
visual: function(e) {
var rect = new kendo.geometry.Rect(e.rect.origin, [e.rect.size.width, e.rect.size.height]);
var layout = new kendo.drawing.Layout(rect, {
orientation: "vertical",
alignContent: "center"
});
var text = new kendo.drawing.Text(e.text, e.rect.center(), {
fill: {
color: "#aa0000"
}
});
layout.append(text);
return layout;
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>