Legend.title
configurationThe legend title configuration options or text.
legend.title
Object<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
series: [
{
type: "candlestick",
data: [
{
date: new Date(2024, 0, 1),
open: 150.25,
high: 152.8,
low: 149.5,
close: 152.3,
},
{
date: new Date(2024, 0, 2),
open: 152.5,
high: 154.2,
low: 151.8,
close: 153.75,
},
{
date: new Date(2024, 0, 3),
open: 153.8,
high: 155.4,
low: 152.9,
close: 154.2,
},
],
openField: "open",
highField: "high",
lowField: "low",
closeField: "close",
dateField: "date",
name: "Stock Price",
color: "#03a9f4",
downColor: "#f44336",
},
],
legend: {
title: {
text: "Legend Title",
color: "blue"
}
},
navigator: {
series: {
type: "line",
data: [
{
date: new Date(2024, 0, 1),
open: 150.25,
high: 152.8,
low: 149.5,
close: 152.3,
},
{
date: new Date(2024, 0, 2),
open: 152.5,
high: 154.2,
low: 151.8,
close: 153.75,
},
{
date: new Date(2024, 0, 3),
open: 153.8,
high: 155.4,
low: 152.9,
close: 154.2,
},
],
field: "close",
dateField: "date",
color: "#ff9800",
},
},
});
</script>legend.title.align
StringThe 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.
Default: "center"
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
series: [
{
type: "candlestick",
data: [
{
date: new Date(2024, 0, 1),
open: 150.25,
high: 152.8,
low: 149.5,
close: 152.3,
},
{
date: new Date(2024, 0, 2),
open: 152.5,
high: 154.2,
low: 151.8,
close: 153.75,
},
{
date: new Date(2024, 0, 3),
open: 153.8,
high: 155.4,
low: 152.9,
close: 154.2,
},
],
openField: "open",
highField: "high",
lowField: "low",
closeField: "close",
dateField: "date",
name: "Stock Price",
color: "#03a9f4",
downColor: "#f44336",
},
],
legend: {
title: {
text: "Legend Title",
align: "left"
}
},
navigator: {
series: {
type: "line",
data: [
{
date: new Date(2024, 0, 1),
open: 150.25,
high: 152.8,
low: 149.5,
close: 152.3,
},
{
date: new Date(2024, 0, 2),
open: 152.5,
high: 154.2,
low: 151.8,
close: 153.75,
},
{
date: new Date(2024, 0, 3),
open: 153.8,
high: 155.4,
low: 152.9,
close: 154.2,
},
],
field: "close",
dateField: "date",
color: "#ff9800",
},
},
});
</script>legend.title.background
StringThe background color of the title. Accepts a valid CSS color string, including hex and rgb.
Default: "white"
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
series: [
{
type: "candlestick",
data: [
{
date: new Date(2024, 0, 1),
open: 150.25,
high: 152.8,
low: 149.5,
close: 152.3,
},
{
date: new Date(2024, 0, 2),
open: 152.5,
high: 154.2,
low: 151.8,
close: 153.75,
},
{
date: new Date(2024, 0, 3),
open: 153.8,
high: 155.4,
low: 152.9,
close: 154.2,
},
],
openField: "open",
highField: "high",
lowField: "low",
closeField: "close",
dateField: "date",
name: "Stock Price",
color: "#03a9f4",
downColor: "#f44336",
},
],
legend: {
title: {
text: "Legend Title",
background: "lightblue"
}
},
navigator: {
series: {
type: "line",
data: [
{
date: new Date(2024, 0, 1),
open: 150.25,
high: 152.8,
low: 149.5,
close: 152.3,
},
{
date: new Date(2024, 0, 2),
open: 152.5,
high: 154.2,
low: 151.8,
close: 153.75,
},
{
date: new Date(2024, 0, 3),
open: 153.8,
high: 155.4,
low: 152.9,
close: 154.2,
},
],
field: "close",
dateField: "date",
color: "#ff9800",
},
},
});
</script>legend.title.border
ObjectThe border of the title.
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
series: [
{
type: "candlestick",
data: [
{
date: new Date(2024, 0, 1),
open: 150.25,
high: 152.8,
low: 149.5,
close: 152.3,
},
{
date: new Date(2024, 0, 2),
open: 152.5,
high: 154.2,
low: 151.8,
close: 153.75,
},
{
date: new Date(2024, 0, 3),
open: 153.8,
high: 155.4,
low: 152.9,
close: 154.2,
},
],
openField: "open",
highField: "high",
lowField: "low",
closeField: "close",
dateField: "date",
name: "Stock Price",
color: "#03a9f4",
downColor: "#f44336",
},
],
legend: {
title: {
text: "Legend Title",
border: {
color: "red",
width: 2
}
}
},
navigator: {
series: {
type: "line",
data: [
{
date: new Date(2024, 0, 1),
open: 150.25,
high: 152.8,
low: 149.5,
close: 152.3,
},
{
date: new Date(2024, 0, 2),
open: 152.5,
high: 154.2,
low: 151.8,
close: 153.75,
},
{
date: new Date(2024, 0, 3),
open: 153.8,
high: 155.4,
low: 152.9,
close: 154.2,
},
],
field: "close",
dateField: "date",
color: "#ff9800",
},
},
});
</script>legend.title.color
StringThe text color of the title. Accepts a valid CSS color string, including hex and rgb.
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
series: [
{
type: "candlestick",
data: [
{
date: new Date(2024, 0, 1),
open: 150.25,
high: 152.8,
low: 149.5,
close: 152.3,
},
{
date: new Date(2024, 0, 2),
open: 152.5,
high: 154.2,
low: 151.8,
close: 153.75,
},
{
date: new Date(2024, 0, 3),
open: 153.8,
high: 155.4,
low: 152.9,
close: 154.2,
},
],
openField: "open",
highField: "high",
lowField: "low",
closeField: "close",
dateField: "date",
name: "Stock Price",
color: "#03a9f4",
downColor: "#f44336",
},
],
legend: {
title: {
text: "Legend Title",
color: "purple"
}
},
navigator: {
series: {
type: "line",
data: [
{
date: new Date(2024, 0, 1),
open: 150.25,
high: 152.8,
low: 149.5,
close: 152.3,
},
{
date: new Date(2024, 0, 2),
open: 152.5,
high: 154.2,
low: 151.8,
close: 153.75,
},
{
date: new Date(2024, 0, 3),
open: 153.8,
high: 155.4,
low: 152.9,
close: 154.2,
},
],
field: "close",
dateField: "date",
color: "#ff9800",
},
},
});
</script>legend.title.font
StringThe font of the title.
Default: "16px Arial,Helvetica,sans-serif"
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
series: [
{
type: "candlestick",
data: [
{
date: new Date(2024, 0, 1),
open: 150.25,
high: 152.8,
low: 149.5,
close: 152.3,
},
{
date: new Date(2024, 0, 2),
open: 152.5,
high: 154.2,
low: 151.8,
close: 153.75,
},
{
date: new Date(2024, 0, 3),
open: 153.8,
high: 155.4,
low: 152.9,
close: 154.2,
},
],
openField: "open",
highField: "high",
lowField: "low",
closeField: "close",
dateField: "date",
name: "Stock Price",
color: "#03a9f4",
downColor: "#f44336",
},
],
legend: {
title: {
text: "Legend Title",
font: "18px Verdana"
}
},
navigator: {
series: {
type: "line",
data: [
{
date: new Date(2024, 0, 1),
open: 150.25,
high: 152.8,
low: 149.5,
close: 152.3,
},
{
date: new Date(2024, 0, 2),
open: 152.5,
high: 154.2,
low: 151.8,
close: 153.75,
},
{
date: new Date(2024, 0, 3),
open: 153.8,
high: 155.4,
low: 152.9,
close: 154.2,
},
],
field: "close",
dateField: "date",
color: "#ff9800",
},
},
});
</script>legend.title.margin
Number|ObjectThe margin of the title. A numeric value will set all margins.
Default: 5
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
series: [
{
type: "candlestick",
data: [
{
date: new Date(2024, 0, 1),
open: 150.25,
high: 152.8,
low: 149.5,
close: 152.3,
},
{
date: new Date(2024, 0, 2),
open: 152.5,
high: 154.2,
low: 151.8,
close: 153.75,
},
{
date: new Date(2024, 0, 3),
open: 153.8,
high: 155.4,
low: 152.9,
close: 154.2,
},
],
openField: "open",
highField: "high",
lowField: "low",
closeField: "close",
dateField: "date",
name: "Stock Price",
color: "#03a9f4",
downColor: "#f44336",
},
],
legend: {
title: {
text: "Legend Title",
margin: 10
}
},
navigator: {
series: {
type: "line",
data: [
{
date: new Date(2024, 0, 1),
open: 150.25,
high: 152.8,
low: 149.5,
close: 152.3,
},
{
date: new Date(2024, 0, 2),
open: 152.5,
high: 154.2,
low: 151.8,
close: 153.75,
},
{
date: new Date(2024, 0, 3),
open: 153.8,
high: 155.4,
low: 152.9,
close: 154.2,
},
],
field: "close",
dateField: "date",
color: "#ff9800",
},
},
});
</script>legend.title.padding
Number|ObjectThe padding of the title. A numeric value will set all margins.
Default: 5
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date(2016, 0, 1),
close: 41,
volume: 2632000
}, {
date: new Date(2016, 0, 2),
close: 42,
volume: 2631000
}]
},
series: [{
field: "close",
name: "Price"
}],
legend: {
visible: true,
title: {
text: "Stock Chart",
padding: 10
}
}
});
</script>legend.title.position
StringThe position of the title.
- "bottom" - the title is positioned on the bottom.
- "top" - the title is positioned on the top.
Default: "top"
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date(2016, 0, 1),
close: 41,
volume: 2632000
}, {
date: new Date(2016, 0, 2),
close: 42,
volume: 2631000
}]
},
series: [{
field: "close",
name: "Price"
}],
legend: {
visible: true,
title: {
text: "Stock Chart",
position: "bottom"
}
}
});
</script>legend.title.text
StringThe text of the legend 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").
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date(2016, 0, 1),
close: 41,
volume: 2632000
}, {
date: new Date(2016, 0, 2),
close: 42,
volume: 2631000
}]
},
series: [{
field: "close",
name: "Price"
}],
legend: {
visible: true,
title: {
text: "Stock Performance\nYearly Data"
}
}
});
</script>legend.title.visible
BooleanIf set to true the chart will display the title. By default the title will be displayed.
Default: true
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [{
date: new Date(2016, 0, 1),
close: 41,
volume: 2632000
}, {
date: new Date(2016, 0, 2),
close: 42,
volume: 2631000
}]
},
series: [{
field: "close",
name: "Price"
}],
legend: {
visible: true,
title: {
text: "Stock Chart",
visible: false
}
}
});
</script>Related Members
- legend.title.border - The border of the title.
- legend.title.margin - The margin of the title. A numeric value will set all margins.
- legend.title.padding - The padding of the title. A numeric value will set all margins.