axisDefaults.titleObject
The title configuration of the axis.
The axisDefaults.title.text option must be set in order to display the title.
Example - configure the axisDefaults title
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
title: {
text: "Axis Title",
color: "blue"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.title.backgroundString
The background color of the title. Accepts a valid CSS color string, including hex and rgb.
Example - set the axisDefaults title background
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
title: {
text: "Axis Title",
background: "lightgray"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.title.borderObject
The border of the title.
Example - configure the axisDefaults title border
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
title: {
text: "Axis Title",
border: {
color: "red",
width: 2
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.title.border.colorString(default: "black")
The color of the border. Accepts a valid CSS color string, including hex and rgb.
Example - set the axisDefaults title border color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
title: {
text: "Axis Title",
border: {
color: "green",
width: 1
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.title.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 axisDefaults title border dashType
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
title: {
text: "Axis Title",
border: {
dashType: "dash",
width: 1
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.title.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 axisDefaults title border width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
title: {
text: "Axis Title",
border: {
width: 3,
color: "black"
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.title.colorString
The text color of the title. Accepts a valid CSS color string, including hex and rgb.
Example - set the axisDefaults title color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
title: {
text: "Axis Title",
color: "red"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.title.fontString(default: "16px Arial,Helvetica,sans-serif")
The font style of the title.
Example - set the axisDefaults title font
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
title: {
text: "Axis Title",
font: "20px Arial"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.title.marginNumber|Object(default: 5)
The margin of the title. A numeric value will set all margins.
Example - set the axisDefaults title margin as a number
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
title: {
text: "Axis Title",
margin: 20
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.title.margin.bottomNumber(default: 0)
The bottom margin of the title.
Example - set the axisDefaults title bottom margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
title: {
text: "Axis Title",
margin: {
bottom: 15
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.title.margin.leftNumber(default: 0)
The left margin of the title.
Example - set the axisDefaults title left margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
title: {
text: "Axis Title",
margin: {
left: 15
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.title.margin.rightNumber(default: 0)
The right margin of the title.
Example - set the axisDefaults title right margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
title: {
text: "Axis Title",
margin: {
right: 15
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.title.margin.topNumber(default: 0)
The top margin of the title.
Example - set the axisDefaults title top margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
title: {
text: "Axis Title",
margin: {
top: 15
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.title.paddingNumber|Object(default: 0)
The padding of the title. A numeric value will set all paddings.
Example - set the axisDefaults title padding as a number
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
title: {
text: "Axis Title",
padding: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.title.padding.bottomNumber(default: 0)
The bottom padding of the title.
Example - set the axisDefaults title bottom padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
title: {
text: "Axis Title",
padding: {
bottom: 10
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.title.padding.leftNumber(default: 0)
The left padding of the title.
Example - set the axisDefaults title left padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
title: {
text: "Axis Title",
padding: {
left: 10
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.title.padding.rightNumber(default: 0)
The right padding of the title.
Example - set the axisDefaults title right padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
title: {
text: "Axis Title",
padding: {
right: 10
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.title.padding.topNumber(default: 0)
The top padding of the title.
Example - set the axisDefaults title top padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
title: {
text: "Axis Title",
padding: {
top: 10
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.title.positionString(default: "center")
The position of the title.
The supported values are:
- "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 - set the axisDefaults title position
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
title: {
text: "Axis Title",
position: "top"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.title.rotationNumber(default: 0)
The rotation angle of the title. By default the title is not rotated.
Example - set the axisDefaults title rotation
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
title: {
text: "Axis Title",
rotation: 45
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.title.textString
The text of the title.
The text can be split into multiple lines by using line feed characters ("\n").
Example - set the axisDefaults title text
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
title: {
text: "Custom Axis Title"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.title.visibleBoolean(default: true)
If set to true the chart will display the axis title. By default the axis title is visible.
Example - hide the axisDefaults title
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
title: {
text: "Axis Title",
visible: false
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>axisDefaults.title.visualFunction
A function that can be used to create a custom visual for the title. The available argument fields are:
- text - the label text.
- rect - the
kendo.geometry.Rectthat defines where the visual should be rendered. - sender - the chart instance (may be undefined).
- options - the label options.
- createVisual - a function that can be used to get the default visual.
Example - using custom visual for axisDefaults title
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
title: {
text: "Axis Title",
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>In this article