titleObject|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.alignString(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.backgroundString(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.borderObject
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.colorString(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.dashTypeString(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.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 chart title border width
<div id="chart"></div> <script> $("#chart").kendoChart({ title: { text: "Title", border: { width: 2 } }, series: [ { data: [1, 2, 3] } ] }); </script>title.colorString
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.descriptionString
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.fontString(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.marginNumber|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.bottomNumber(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.leftNumber(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.rightNumber(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.topNumber(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.paddingNumber|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.bottomNumber(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.leftNumber(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.rightNumber(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.topNumber(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.positionString(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.textString
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.visibleBoolean(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>In this article