valueAxis.title Object
The title configuration of the value axis.
The valueAxis.title.text option must be set in order to display the title.
Example - set the value axis title
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
title: {
text: "Years",
background: "green",
border: {
width: 1,
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
valueAxis.title.background String
The background color of the title. Accepts a valid CSS color string, including hex and rgb.
Example - set the value axis title background
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
title: {
text: "Years",
background: "green"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
valueAxis.title.border Object
The border of the title.
Example - set the value axis title border
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
border: {
color: "green",
dashType: "dashDot",
width: 1
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
valueAxis.title.border.color String
(default: "black")
The color of the border. Accepts a valid CSS color string, including hex and rgb.
Example - set the value axis title border color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
border: {
color: "green",
width: 1
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
valueAxis.title.border.dashType String
(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 value axis title border dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
border: {
dashType: "dashDot",
width: 1
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
valueAxis.title.border.width Number
(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 value axis title border width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
border: {
width: 1
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
valueAxis.title.color String
The text color of the title. Accepts a valid CSS color string, including hex and rgb.
Example - set the value axis title color as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
title: {
text: "Years",
color: "#aa00bb"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the value axis title color as a RGB value
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
title: {
text: "Years",
color: "rgb(128, 0, 255)"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the value axis title color by name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
title: {
text: "Years",
color: "green"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
valueAxis.title.font String
(default: "16px Arial,Helvetica,sans-serif")
The font style of the title.
Example - set the value axis title font
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
font: "20px sans-serif",
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
valueAxis.title.margin Number|Object
(default: 5)
The margin of the title. A numeric value will set all margins.
Example - set the value axis title margin as a number
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
margin: 20
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
valueAxis.title.margin.bottom Number
(default: 0)
The bottom margin of the title.
Example - set the value axis title bottom margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
margin: {
bottom: 20
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
valueAxis.title.margin.left Number
(default: 0)
The left margin of the title.
Example - set the value axis title left margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
margin: {
left: 20
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
valueAxis.title.margin.right Number
(default: 0)
The right margin of the title.
Example - set the value axis title right margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
margin: {
right: 20
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
valueAxis.title.margin.top Number
(default: 0)
The top margin of the title.
Example - set the value axis title top margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
margin: {
top: 20
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
valueAxis.title.padding Number|Object
(default: 0)
The padding of the title. A numeric value will set all paddings.
Example - set the value axis title padding as a number
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
padding: 20
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
valueAxis.title.padding.bottom Number
(default: 0)
The bottom padding of the title.
Example - set the value axis title bottom padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
padding: {
bottom: 20
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
valueAxis.title.padding.left Number
(default: 0)
The left padding of the title.
Example - set the value axis title left padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
padding: {
left: 20
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
valueAxis.title.padding.right Number
(default: 0)
The right padding of the title.
Example - set the value axis title right padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
padding: {
right: 20
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
valueAxis.title.padding.top Number
(default: 0)
The top padding of the title.
Example - set the value axis title top padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
padding: {
top: 20
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
valueAxis.title.position String
(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 value axis title position
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
title: {
text: "Years",
position: "left"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
valueAxis.title.rotation Number
(default: 0)
The rotation angle of the title. By default the title is not rotated.
Example - rotate the value axis title
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
rotation: 90
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
valueAxis.title.text String
The text of the title.
The text can be split into multiple lines by using line feed characters ("\n").
Example - set the value axis title text
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years"
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
valueAxis.title.visible Boolean
(default: true)
If set to true
the chart will display the value axis title. By default the value axis title is visible.
Example - hide the value axis title
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
visible: false
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
valueAxis.title.visual Function
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.Rect
that 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 the title
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
visual: function(e) {
return new kendo.drawing.Text(e.text, e.rect.origin, {
fill: {
color: "red"
}
});
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>