title Object|String
The chart title configuration options or text.
Example - set the chart title as a string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: "Title",
series: [
{ data: [1, 2] }
]
});
</script>
Example - configure the chart title
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
align: "left"
},
series: [
{ data: [1, 2] }
]
});
</script>
title.align String
(default: "center")
The alignment of the title.
- "center" - the text is aligned to the middle.
- "left" - the text is aligned to the left.
- "right" - the text is aligned to the right.
Example - configure the chart title alignment
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
align: "left"
},
series: [
{ data: [1, 2] }
]
});
</script>
title.background String
(default: "white")
The background color of the title. Accepts a valid CSS color string, including hex and rgb.
Example - configure the chart title alignment
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
background: "green"
},
series: [
{ data: [1, 2] }
]
});
</script>
title.border Object
The border of the title.
Example - set the chart title border
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
border: {
color: "green",
width: 2
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
title.border.color String
(default: "black")
The color of the border. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart title border color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
border: {
color: "green",
width: 2
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
title.border.dashType String
(default: "solid")
The dash type of the chart title 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 chart title border dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
border: {
dashType: "dashDot",
width: 2
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
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 chart title border width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
border: {
width: 2
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
title.color String
The text color of the title. Accepts a valid CSS color string, including hex and rgb.
Example - set the title color as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Chart Title",
color: "#aa00bb"
},
series: [{
data: [1, 2, 3]
}]
});
</script>
title.description String
The accessible description of the Chart. The description is announced by screen readers when the Chart is focused.
Example - set the chart description
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Fibonacci numbers"
description: "A column chart displaying the first 10 Fibonacci numbers",
position: "bottom"
},
series: [
{
type: 'column',
data: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
}
]
});
</script>
title.font String
(default: "16px Arial,Helvetica,sans-serif")
The font of the title.
Example - set the chart title font
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
font: "20px sans-serif"
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
title.margin Number|Object
(default: 5)
The margin of the title. A numeric value will set all margins.
Example - set the chart title margin as a number
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
margin: 10
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
title.margin.bottom Number
(default: 0)
The bottom margin of the title.
Example - set the chart title bottom margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
margin: {
bottom: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
title.margin.left Number
(default: 0)
The left margin of the title.
Example - set the chart title left margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
margin: {
left: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
title.margin.right Number
(default: 0)
The right margin of the title.
Example - set the chart title right margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
margin: {
right: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
title.margin.top Number
(default: 0)
The top margin of the title.
Example - set the chart title top margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
margin: {
top: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
title.padding Number|Object
(default: 5)
The padding of the title. A numeric value will set all margins.
Example - set the chart title padding as a number
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
padding: 10
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
title.padding.bottom Number
(default: 0)
The bottom padding of the title.
Example - set the chart title bottom padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
padding: {
bottom: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
title.padding.left Number
(default: 0)
The left padding of the title.
Example - set the chart title left padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
padding: {
left: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
title.padding.right Number
(default: 0)
The right padding of the title.
Example - set the chart title right padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
padding: {
right: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
title.padding.top Number
(default: 0)
The top padding of the title.
Example - set the chart title top padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
padding: {
top: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
title.position String
(default: "top")
The position of the title.
- "bottom" - the title is positioned on the bottom.
- "top" - the title is positioned on the top.
Example - set the chart title position
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
position: "bottom"
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
title.text String
The text of the chart title. You can also set the text directly for a title with default options.
The text can be split into multiple lines by using line feed characters ("\n").
Example - set the chart title position
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
position: "bottom"
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
title.visible Boolean
(default: true)
If set to true
the chart will display the title. By default the title will be displayed.
Example - hide the title
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
visible: false
},
series: [
{ data: [1, 2, 3] }
]
});
</script>