xAxis.labelsObject
The axis labels configuration.
Example - set the scatter chart x axis labels
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
labels: {
background: "green",
color: "white"
}
}
});
</script>xAxis.labels.backgroundString
The background color of the labels. Accepts a valid CSS color string, including hex and rgb.
Example - set the scatter chart x axis label background as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
labels: {
background: "#aa00bb"
}
}
});
</script>Example - set the scatter chart x axis label background as a RGB value
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
labels: {
background: "rgb(128, 0, 255)"
}
}
});
</script>Example - set the scatter chart x axis label background by name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
labels: {
background: "red"
}
}
});
</script>xAxis.labels.borderObject
The border of the labels.
Example - set the scatter chart x axis label border
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
labels: {
border: {
width: 1,
color: "green",
dashType: "dashDot"
}
}
}
});
</script>xAxis.labels.border.colorString(default: "black")
The color of the border. Accepts a valid CSS color string, including hex and rgb.
Example - set the scatter chart x axis label color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
labels: {
border: {
width: 1,
color: "green"
}
}
}
});
</script>xAxis.labels.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 - set the scatter chart x axis label border dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
labels: {
border: {
width: 1,
dashType: "dashDot"
}
}
}
});
</script>xAxis.labels.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 - set the scatter chart x axis label border dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
labels: {
border: {
width: 1
}
}
}
});
</script>xAxis.labels.colorString
The text color of the labels. Accepts a valid CSS color string, including hex and rgb.
Example - set the scatter chart x axis label color as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
labels: {
color: "#aa00bb"
}
}
});
</script>Example - set the scatter chart x axis label color as a RGB value
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
labels: {
color: "rgb(128, 0, 255)"
}
}
});
</script>Example - set the scatter chart x axis label color by name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
labels: {
color: "red"
}
}
});
</script>xAxis.labels.cultureString
The culture to use when formatting date values. See the globalization overview for more information.
xAxis.labels.dateFormatsObject
The format used to display the labels when the x values are dates. Uses kendo.format. Contains one placeholder ("{0}") which represents the category value.
The chart will choose the appropriate format for the current xAxis.baseUnit. Setting the categoryAxis.labels.format option will override the date formats.
Example - set the scatter chart x axis date formats
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "scatter",
data: [
[new Date("01/01/2013"), 2],
[new Date("01/02/2013"), 2],
[new Date("01/03/2013"), 2]
]
}
],
xAxis: {
type: "date",
labels: {
dateFormats: {
days: "M-d"
}
}
}
});
</script>xAxis.labels.dateFormats.daysString(default: "M/d")
The format used when xAxis.baseUnit is set to "days".
Example - set the days format
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "scatter",
data: [
[new Date("01/01/2013"), 2],
[new Date("01/02/2013"), 2],
[new Date("01/03/2013"), 2]
]
}
],
xAxis: {
type: "date",
baseUnit: "days",
labels: {
dateFormats: {
days: "M-d"
}
}
}
});
</script>xAxis.labels.dateFormats.hoursString(default: "HH:mm")
The format used when xAxis.baseUnit is set to "hours".
Example - set the hours format
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "scatter",
data: [
[new Date("01/01/2013"), 2],
[new Date("01/02/2013"), 2],
[new Date("01/03/2013"), 2]
]
}
],
xAxis: {
type: "date",
baseUnit: "hours",
labels: {
dateFormats: {
hours: "HH mm"
}
}
}
});
</script>xAxis.labels.dateFormats.monthsString(default: "MMM 'yy")
The format used when xAxis.baseUnit is set to "months".
Example - set the months format
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "scatter",
data: [
[new Date("01/01/2013"), 2],
[new Date("01/02/2013"), 2],
[new Date("01/03/2013"), 2]
]
}
],
xAxis: {
type: "date",
baseUnit: "months",
labels: {
dateFormats: {
months: "MMM-yy"
}
}
}
});
</script>xAxis.labels.dateFormats.weeksString(default: "M/d")
The format used when xAxis.baseUnit is set to "weeks".
Example - set the weeks format
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "scatter",
data: [
[new Date("01/01/2013"), 2],
[new Date("01/02/2013"), 2],
[new Date("01/03/2013"), 2]
]
}
],
xAxis: {
type: "date",
baseUnit: "weeks",
labels: {
dateFormats: {
weeks: "M-d"
}
}
}
});
</script>xAxis.labels.dateFormats.yearsString(default: "yyyy")
The format used when xAxis.baseUnit is set to "years".
Example - set the years format
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "scatter",
data: [
[new Date("01/01/2013"), 2],
[new Date("01/02/2013"), 2],
[new Date("01/03/2013"), 2]
]
}
],
xAxis: {
type: "date",
baseUnit: "years",
labels: {
dateFormats: {
years: "yy"
}
}
}
});
</script>xAxis.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 scatter chart x axis label font
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
labels: {
font: "20px sans-serif"
}
}
});
</script>xAxis.labels.formatString
The format used to display the labels. Uses kendo.format. Contains one placeholder ("{0}") which represents the category value.
Example - set the scatter chart x axis label format
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
labels: {
format: "{0:C}"
}
}
});
</script>xAxis.labels.marginNumber|Object
The margin of the labels. A numeric value will set all margins.
Example - set the scatter chart x axis label margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
labels: {
margin: 10
}
}
});
</script>xAxis.labels.margin.bottomNumber
The bottom margin of the labels.
Example - set the scatter chart x axis label bottom margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
labels: {
margin: {
bottom: 10
}
}
}
});
</script>xAxis.labels.margin.leftNumber
The left margin of the labels.
Example - set the scatter chart x axis label left margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
labels: {
margin: {
left: 10
}
}
}
});
</script>xAxis.labels.margin.rightNumber
The right margin of the labels.
Example - set the scatter chart x axis label right margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
labels: {
margin: {
right: 10
}
}
}
});
</script>xAxis.labels.margin.topNumber
The top margin of the labels.
Example - set the scatter chart x axis label top margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
labels: {
margin: {
top: 10
}
}
}
});
</script>xAxis.labels.mirrorBoolean
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.
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
labels: {
mirror: true
}
}
});
</script>xAxis.labels.paddingNumber|Object(default: 0)
The padding of the labels. A numeric value will set all paddings.
Example - set the scatter chart x axis label padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
labels: {
padding: 10
}
}
});
</script>xAxis.labels.padding.bottomNumber(default: 0)
The bottom padding of the labels.
Example - set the scatter chart x axis label bottom padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
labels: {
padding: {
bottom: 10
}
}
}
});
</script>xAxis.labels.padding.leftNumber(default: 0)
The left padding of the labels.
Example - set the scatter chart x axis label left padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
labels: {
padding: {
left: 10
}
}
}
});
</script>xAxis.labels.padding.rightNumber(default: 0)
The right padding of the labels.
Example - set the scatter chart x axis label right padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
labels: {
padding: {
right: 10
}
}
}
});
</script>xAxis.labels.padding.topNumber(default: 0)
The top padding of the labels.
Example - set the scatter chart x axis label top padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
labels: {
padding: {
top: 10
}
}
}
});
</script>xAxis.labels.positionString(default: "onAxis")
The position of the axis labels. By default, labels are positioned next to the axis.
- When
positionis set toend, the labels are placed at the end of the crossing axis—
typically, at the top or right end of the Chart unless the crossing axis was reversed.
- When
positionis set tostart, the labels are placed at the start of the crossing axis—
typically, at the left or bottom end of the Chart unless the crossing axis was reversed.
Example - position the X axis labels at the start of the Y axis
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
labels: {
position: 'start'
}
}
});
</script>xAxis.labels.rotationNumber|String|Object(default: 0)
The rotation angle of the labels. By default the labels are not rotated. Can be set to "auto" in which case the labels will be rotated only if the slot size is not sufficient for the entire labels.
Example - set the scatter chart x axis label rotation
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
labels: {
rotation: 90
}
}
});
</script>Example - enable auto rotation for the x axis labels
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "scatter",
data: [
[new Date("01/01/2013"), 2],
[new Date("01/02/2013"), 2],
[new Date("01/03/2013"), 2]
]
}
],
xAxis: {
type: "date",
labels: {
rotation: "auto",
format: "F"
}
}
});
</script>xAxis.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 - align the rotated x axis labels
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "scatter",
data: [
[new Date("01/01/2013"), 2],
[new Date("01/02/2013"), 2],
[new Date("01/03/2013"), 2]
]
}
],
xAxis: {
type: "date",
labels: {
rotation: {
angle: -45,
align: "center"
}
}
}
});
</script>xAxis.labels.rotation.angleNumber|String(default: 0)
The rotation angle of the labels. By default the labels are not rotated. Can be set to "auto" in which case the labels will be rotated only if the slot size is not sufficient for the entire labels.
Example - set the scatter chart x axis label rotation angle
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
labels: {
rotation: {
angle: 90
}
}
}
});
</script>xAxis.labels.skipNumber(default: 1)
The number of labels to skip.
Example - skip scatter chart x axis labels
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
labels: {
skip: 2
}
}
});
</script>xAxis.labels.stepNumber(default: 1)
The label rendering step - render every n-th label. By default every label is rendered.
Example - render every odd x axis label
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
labels: {
step: 2
}
}
});
</script>xAxis.labels.templateString|Function
The template which renders the labels.
The fields which can be used in the template are:
- value - the category value
The text can be split into multiple lines by using line feed characters ("\n").
Example - set the scatter chart x axis label template as a string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "scatter",
data: [ [1, 2] ]
}
],
xAxis: {
labels: {
template: "X: #: value #"
}
}
});
</script>Example - set the scatter chart x axis label template as a function
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "scatter",
data: [ [1, 2] ]
}
],
xAxis: {
labels: {
template: kendo.template("X: #: value #")
}
}
});
</script>xAxis.labels.visibleBoolean(default: true)
If set to true the chart will display the x axis labels. By default the x axis labels are visible.
Example - hide the scatter chart x axis labels
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "scatter",
data: [ [1, 2] ]
}
],
xAxis: {
labels: {
visible: false
}
}
});
</script>xAxis.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
- 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 the labels
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "scatter",
data: [ [1, 2] ]
}
],
xAxis: {
labels: {
visual: function(e) {
return new kendo.drawing.Text(e.text, e.rect.origin, {
fill: {
color: "red"
}
});
}
}
}
});
</script>