categoryAxis.titleObject
The title of the category axis.
Example
<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
data: [1, 2, 3, 4, 5],
categoryAxis: {
title: {
text: "Categories",
color: "#ff0000",
font: "14px Arial"
}
}
});
</script>categoryAxis.title.backgroundString
The background color of the title. Any valid CSS color string will work here, including hex and rgb.
Example
<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
data: [1, 2, 3, 4, 5],
categoryAxis: {
title: {
text: "Categories",
background: "#ffe0e0"
}
}
});
</script>categoryAxis.title.borderObject
The border of the title.
Example
<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
data: [1, 2, 3, 4, 5],
categoryAxis: {
title: {
text: "Categories",
border: {
color: "#ff0000",
width: 2,
dashType: "dash"
}
}
}
});
</script>categoryAxis.title.border.colorString(default: "black")
The color of the border. Any valid CSS color string will work here, including hex and rgb.
Example
<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
data: [1, 2, 3, 4, 5],
categoryAxis: {
title: {
text: "Categories",
border: {
color: "#00ff00"
}
}
}
});
</script>categoryAxis.title.border.dashTypeString(default: "solid")
The dash type of the border.
"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
Example
<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
data: [1, 2, 3, 4, 5],
categoryAxis: {
title: {
text: "Categories",
border: {
dashType: "dash"
}
}
}
});
</script>categoryAxis.title.border.widthNumber(default: 0)
The width of the border.
Example
<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
data: [1, 2, 3, 4, 5],
categoryAxis: {
title: {
text: "Categories",
border: {
width: 3
}
}
}
});
</script>categoryAxis.title.colorString
The text color of the title. Any valid CSS color string will work here, including hex and rgb.
Example
<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
data: [1, 2, 3, 4, 5],
categoryAxis: {
title: {
text: "Categories",
color: "#0000ff"
}
}
});
</script>categoryAxis.title.fontString(default: "16px Arial,Helvetica,sans-serif")
The font style of the title.
Example
<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
data: [1, 2, 3, 4, 5],
categoryAxis: {
title: {
text: "Categories",
font: "18px Verdana"
}
}
});
</script>categoryAxis.title.marginNumber|Object(default: 5)
The margin of the title.
Example
<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
data: [1, 2, 3, 4, 5],
categoryAxis: {
title: {
text: "Categories",
margin: 10
}
}
});
</script>categoryAxis.title.positionString(default: "center")
The position of the title.
"top"
The axis title is positioned on the top (applicable to vertical axis)
"bottom"
The axis title is positioned on the bottom (applicable to vertical axis)
"left"
The axis title is positioned on the left (applicable to horizontal axis)
"right"
The axis title is positioned on the right (applicable to horizontal axis)
"center"
The axis title is positioned in the center
Example
<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
data: [1, 2, 3, 4, 5],
categoryAxis: {
title: {
text: "Categories",
position: "left"
}
}
});
</script>categoryAxis.title.rotationNumber(default: 0)
The rotation angle of the title.
Example
<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
data: [1, 2, 3, 4, 5],
categoryAxis: {
title: {
text: "Categories",
rotation: 45
}
}
});
</script>categoryAxis.title.textString
The text of the title.
Example
<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
data: [1, 2, 3, 4, 5],
categoryAxis: {
title: {
text: "Custom Category Title"
}
}
});
</script>categoryAxis.title.visibleBoolean(default: true)
The visibility of the title.
Example
<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
data: [1, 2, 3, 4, 5],
categoryAxis: {
title: {
text: "Categories",
visible: false
}
}
});
</script>