navigator.categoryAxis.labelsObject
The axis labels configuration.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date("2016/01/01"),
open: 41.62,
high: 41.69,
low: 39.81,
close: 40.12,
volume: 2632000
}]
},
navigator: {
categoryAxis: {
labels: {
color: "red",
font: "12px Arial"
}
}
}
});
</script>navigator.categoryAxis.labels.backgroundString
The background color of the labels. Accepts a valid CSS color string, including hex and rgb.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date("2016/01/01"),
open: 41.62,
high: 41.69,
low: 39.81,
close: 40.12,
volume: 2632000
}]
},
navigator: {
categoryAxis: {
labels: {
background: "yellow"
}
}
}
});
</script>navigator.categoryAxis.labels.borderObject
The border of the labels.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date("2016/01/01"),
open: 41.62,
high: 41.69,
low: 39.81,
close: 40.12,
volume: 2632000
}]
},
navigator: {
categoryAxis: {
labels: {
border: {
color: "red",
width: 1
}
}
}
}
});
</script>navigator.categoryAxis.labels.border.colorString(default: "black")
The color of the border. Accepts a valid CSS color string, including hex and rgb.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date("2016/01/01"),
open: 41.62,
high: 41.69,
low: 39.81,
close: 40.12,
volume: 2632000
}]
},
navigator: {
categoryAxis: {
labels: {
border: {
color: "red",
width: 1
}
}
}
}
});
</script>navigator.categoryAxis.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
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date("2016/01/01"),
open: 41.62,
high: 41.69,
low: 39.81,
close: 40.12,
volume: 2632000
}]
},
navigator: {
categoryAxis: {
labels: {
border: {
dashType: "dash",
width: 1
}
}
}
}
});
</script>navigator.categoryAxis.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
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date("2016/01/01"),
open: 41.62,
high: 41.69,
low: 39.81,
close: 40.12,
volume: 2632000
}]
},
navigator: {
categoryAxis: {
labels: {
border: {
width: 2,
color: "red"
}
}
}
}
});
</script>navigator.categoryAxis.labels.colorString
The text color of the labels. Accepts a valid CSS color string, including hex and rgb.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date("2016/01/01"),
open: 41.62,
high: 41.69,
low: 39.81,
close: 40.12,
volume: 2632000
}]
},
navigator: {
categoryAxis: {
labels: {
color: "blue"
}
}
}
});
</script>navigator.categoryAxis.labels.cultureString
The culture to use when formatting date values. See the globalization overview for more information.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date("2016/01/01"),
open: 41.62,
high: 41.69,
low: 39.81,
close: 40.12,
volume: 2632000
}]
},
navigator: {
categoryAxis: {
labels: {
culture: "en-US"
}
}
}
});
</script>navigator.categoryAxis.labels.dateFormatsObject
The format used to display the labels when the categories are dates. Uses kendo.format. Contains one placeholder ("{0}") which represents the category value.
The chart will choose the appropriate format for the current categoryAxis.baseUnit. Setting the categoryAxis.labels.format option will override the date formats.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date("2016/01/01"),
open: 41.62,
high: 41.69,
low: 39.81,
close: 40.12,
volume: 2632000
}]
},
navigator: {
categoryAxis: {
labels: {
dateFormats: {
days: "dd/MM/yyyy",
months: "MMM yyyy"
}
}
}
}
});
</script>navigator.categoryAxis.labels.dateFormats.daysString(default: "M/d")
The format used when categoryAxis.baseUnit is set to "days".
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date("2016/01/01"),
open: 41.62,
high: 41.69,
low: 39.81,
close: 40.12,
volume: 2632000
}]
},
navigator: {
categoryAxis: {
baseUnit: "days",
labels: {
dateFormats: {
days: "dd/MM/yyyy"
}
}
}
}
});
</script>navigator.categoryAxis.labels.dateFormats.hoursString(default: "HH:mm")
The format used when categoryAxis.baseUnit is set to "hours".
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date("2016/01/01"),
open: 41.62,
high: 41.69,
low: 39.81,
close: 40.12,
volume: 2632000
}]
},
navigator: {
categoryAxis: {
baseUnit: "hours",
labels: {
dateFormats: {
hours: "HH:mm:ss"
}
}
}
}
});
</script>navigator.categoryAxis.labels.dateFormats.monthsString(default: "MMM 'yy")
The format used when categoryAxis.baseUnit is set to "months".
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date("2016/01/01"),
open: 41.62,
high: 41.69,
low: 39.81,
close: 40.12,
volume: 2632000
}]
},
navigator: {
categoryAxis: {
baseUnit: "months",
labels: {
dateFormats: {
months: "MMMM yyyy"
}
}
}
}
});
</script>navigator.categoryAxis.labels.dateFormats.weeksString(default: "M/d")
The format used when categoryAxis.baseUnit is set to "weeks".
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date("2016/01/01"),
open: 41.62,
high: 41.69,
low: 39.81,
close: 40.12,
volume: 2632000
}]
},
navigator: {
categoryAxis: {
baseUnit: "weeks",
labels: {
dateFormats: {
weeks: "dd/MM"
}
}
}
}
});
</script>navigator.categoryAxis.labels.dateFormats.yearsString(default: "yyyy")
The format used when categoryAxis.baseUnit is set to "years".
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date("2016/01/01"),
open: 41.62,
high: 41.69,
low: 39.81,
close: 40.12,
volume: 2632000
}]
},
navigator: {
categoryAxis: {
baseUnit: "years",
labels: {
dateFormats: {
years: "yyyy"
}
}
}
}
});
</script>navigator.categoryAxis.labels.fontString(default: "12px Arial,Helvetica,sans-serif")
The font style of the labels.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date("2016/01/01"),
open: 41.62,
high: 41.69,
low: 39.81,
close: 40.12,
volume: 2632000
}]
},
navigator: {
categoryAxis: {
labels: {
font: "14px Arial"
}
}
}
});
</script>navigator.categoryAxis.labels.formatString(default: "{0}")
The format used to display the labels. Uses kendo.format. Contains one placeholder ("{0}") which represents the category value.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date("2016/01/01"),
open: 41.62,
high: 41.69,
low: 39.81,
close: 40.12,
volume: 2632000
}]
},
navigator: {
categoryAxis: {
labels: {
format: "MMM yyyy"
}
}
}
});
</script>navigator.categoryAxis.labels.marginNumber|Object(default: 0)
The margin of the labels. A numeric value will set all margins.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
categoryAxis: {
labels: {
margin: 10
}
}
},
series: [{
type: "line",
field: "value",
categoryField: "date",
data: [
{ value: 1, date: new Date(2012, 1, 1) },
{ value: 2, date: new Date(2012, 1, 2) }
]
}]
});
</script>navigator.categoryAxis.labels.margin.bottomNumber(default: 0)
The bottom margin of the labels.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
categoryAxis: {
labels: {
margin: {
bottom: 15
}
}
}
},
series: [{
type: "line",
field: "value",
categoryField: "date",
data: [
{ value: 1, date: new Date(2012, 1, 1) },
{ value: 2, date: new Date(2012, 1, 2) }
]
}]
});
</script>navigator.categoryAxis.labels.margin.leftNumber(default: 0)
The left margin of the labels.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
categoryAxis: {
labels: {
margin: {
left: 15
}
}
}
},
series: [{
type: "line",
field: "value",
categoryField: "date",
data: [
{ value: 1, date: new Date(2012, 1, 1) },
{ value: 2, date: new Date(2012, 1, 2) }
]
}]
});
</script>navigator.categoryAxis.labels.margin.rightNumber(default: 0)
The right margin of the labels.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
categoryAxis: {
labels: {
margin: {
right: 15
}
}
}
},
series: [{
type: "line",
field: "value",
categoryField: "date",
data: [
{ value: 1, date: new Date(2012, 1, 1) },
{ value: 2, date: new Date(2012, 1, 2) }
]
}]
});
</script>navigator.categoryAxis.labels.margin.topNumber(default: 0)
The top margin of the labels.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
categoryAxis: {
labels: {
margin: {
top: 15
}
}
}
},
series: [{
type: "line",
field: "value",
categoryField: "date",
data: [
{ value: 1, date: new Date(2012, 1, 1) },
{ value: 2, date: new Date(2012, 1, 2) }
]
}]
});
</script>navigator.categoryAxis.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
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
categoryAxis: {
labels: {
mirror: true
}
}
},
series: [{
type: "line",
field: "value",
categoryField: "date",
data: [
{ value: 1, date: new Date(2012, 1, 1) },
{ value: 2, date: new Date(2012, 1, 2) }
]
}]
});
</script>navigator.categoryAxis.labels.paddingObject|Number(default: 0)
The padding of the labels. A numeric value will set all paddings.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
categoryAxis: {
labels: {
padding: 10
}
}
},
series: [{
type: "line",
field: "value",
categoryField: "date",
data: [
{ value: 1, date: new Date(2012, 1, 1) },
{ value: 2, date: new Date(2012, 1, 2) }
]
}]
});
</script>navigator.categoryAxis.labels.padding.bottomNumber(default: 0)
The bottom padding of the labels.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
categoryAxis: {
labels: {
padding: {
bottom: 8
}
}
}
},
series: [{
type: "line",
field: "value",
categoryField: "date",
data: [
{ value: 1, date: new Date(2012, 1, 1) },
{ value: 2, date: new Date(2012, 1, 2) }
]
}]
});
</script>navigator.categoryAxis.labels.padding.leftNumber(default: 0)
The left padding of the labels.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
categoryAxis: {
labels: {
padding: {
left: 8
}
}
}
},
series: [{
type: "line",
field: "value",
categoryField: "date",
data: [
{ value: 1, date: new Date(2012, 1, 1) },
{ value: 2, date: new Date(2012, 1, 2) }
]
}]
});
</script>navigator.categoryAxis.labels.padding.rightNumber(default: 0)
The right padding of the labels.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
categoryAxis: {
labels: {
padding: {
right: 8
}
}
}
},
series: [{
type: "line",
field: "value",
categoryField: "date",
data: [
{ value: 1, date: new Date(2012, 1, 1) },
{ value: 2, date: new Date(2012, 1, 2) }
]
}]
});
</script>navigator.categoryAxis.labels.padding.topNumber(default: 0)
The top padding of the labels.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
categoryAxis: {
labels: {
padding: {
top: 8
}
}
}
},
series: [{
type: "line",
field: "value",
categoryField: "date",
data: [
{ value: 1, date: new Date(2012, 1, 1) },
{ value: 2, date: new Date(2012, 1, 2) }
]
}]
});
</script>navigator.categoryAxis.labels.rotationNumber(default: 0)
The rotation angle of the labels. By default the labels are not rotated.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
categoryAxis: {
labels: {
rotation: 45
}
}
},
series: [{
type: "line",
field: "value",
categoryField: "date",
data: [
{ value: 1, date: new Date(2012, 1, 1) },
{ value: 2, date: new Date(2012, 1, 2) }
]
}]
});
</script>navigator.categoryAxis.labels.skipNumber(default: 0)
The number of labels to skip. By default no labels are skipped.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
categoryAxis: {
labels: {
skip: 2
}
}
},
series: [{
type: "line",
field: "value",
categoryField: "date",
data: [
{ value: 1, date: new Date(2012, 1, 1) },
{ value: 2, date: new Date(2012, 1, 2) },
{ value: 3, date: new Date(2012, 1, 3) },
{ value: 4, date: new Date(2012, 1, 4) }
]
}]
});
</script>navigator.categoryAxis.labels.stepNumber(default: 1)
The label rendering step - render every n-th label. By default every label is rendered.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
categoryAxis: {
labels: {
step: 2
}
}
},
series: [{
type: "line",
field: "value",
categoryField: "date",
data: [
{ value: 1, date: new Date(2012, 1, 1) },
{ value: 2, date: new Date(2012, 1, 2) },
{ value: 3, date: new Date(2012, 1, 3) },
{ value: 4, date: new Date(2012, 1, 4) }
]
}]
});
</script>navigator.categoryAxis.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 for the category
- format - the default format of the label
- culture - the default culture (if set) on the label
- index - the 0-based index of the current label
- count - the total number of labels on the axis
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
categoryAxis: {
labels: {
template: (data) => `Label: ${data.value}`
}
}
},
series: [{
type: "line",
field: "value",
categoryField: "date",
data: [
{ value: 1, date: new Date(2012, 1, 1) },
{ value: 2, date: new Date(2012, 1, 2) }
]
}]
});
</script>navigator.categoryAxis.labels.visibleBoolean(default: true)
If set to true the chart will display the category axis labels. By default the category axis labels are visible.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
categoryAxis: {
labels: {
visible: false
}
}
},
series: [{
type: "line",
field: "value",
categoryField: "date",
data: [
{ value: 1, date: new Date(2012, 1, 1) },
{ value: 2, date: new Date(2012, 1, 2) }
]
}]
});
</script>In this article