navigator.paneObject
The navigator pane configuration.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
background: "lightblue",
border: {
color: "navy",
width: 2
}
}
}
});
</script>navigator.pane.backgroundString
The background color of the pane. Accepts a valid CSS color string, including hex and rgb.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
background: "lightgray"
}
}
});
</script>navigator.pane.borderObject
The border of the navigator pane.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
border: {
color: "red",
width: 2,
dashType: "dash"
}
}
}
});
</script>navigator.pane.border.colorString(default: "black")
The color of the border. Accepts a valid CSS color string, including hex and rgb.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
border: {
color: "green"
}
}
}
});
</script>navigator.pane.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
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
border: {
dashType: "dot"
}
}
}
});
</script>navigator.pane.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
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
border: {
width: 3
}
}
}
});
</script>navigator.pane.heightNumber
The navigator pane height in pixels.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
height: 150
}
}
});
</script>navigator.pane.marginNumber|Object(default: 0)
The margin of the pane. A numeric value will set all margins.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
margin: {
top: 10,
bottom: 15,
left: 5,
right: 5
}
}
}
});
</script>navigator.pane.margin.bottomNumber(default: 0)
The bottom margin of the navigator pane.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
margin: {
bottom: 20
}
}
}
});
</script>navigator.pane.margin.leftNumber(default: 0)
The left margin of the navigator pane.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
margin: {
left: 15
}
}
}
});
</script>navigator.pane.margin.rightNumber(default: 0)
The right margin of the navigator pane.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
margin: {
right: 10
}
}
}
});
</script>navigator.pane.margin.topNumber(default: 0)
The top margin of the navigator pane.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
margin: {
top: 25
}
}
}
});
</script>navigator.pane.nameString
The unique name of the navigator pane.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
name: "navigatorPane"
},
series: [{
type: "line",
field: "value",
categoryField: "date"
}]
},
dataSource: {
data: [
{ date: new Date("2016/01/01"), value: 1 },
{ date: new Date("2016/01/02"), value: 2 }
]
}
});
</script>navigator.pane.paddingNumber|Object(default: 0)
The padding of the pane. A numeric value will set all paddings.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
padding: 10
},
series: [{
type: "line",
field: "value",
categoryField: "date"
}]
},
dataSource: {
data: [
{ date: new Date("2016/01/01"), value: 1 },
{ date: new Date("2016/01/02"), value: 2 }
]
}
});
</script>navigator.pane.padding.bottomNumber(default: 0)
The bottom padding of the navigator pane.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
padding: {
bottom: 10
}
},
series: [{
type: "line",
field: "value",
categoryField: "date"
}]
},
dataSource: {
data: [
{ date: new Date("2016/01/01"), value: 1 },
{ date: new Date("2016/01/02"), value: 2 }
]
}
});
</script>navigator.pane.padding.leftNumber(default: 0)
The left padding of the navigator pane.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
padding: {
left: 10
}
},
series: [{
type: "line",
field: "value",
categoryField: "date"
}]
},
dataSource: {
data: [
{ date: new Date("2016/01/01"), value: 1 },
{ date: new Date("2016/01/02"), value: 2 }
]
}
});
</script>navigator.pane.padding.rightNumber(default: 0)
The right padding of the navigator pane.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
padding: {
right: 10
}
},
series: [{
type: "line",
field: "value",
categoryField: "date"
}]
},
dataSource: {
data: [
{ date: new Date("2016/01/01"), value: 1 },
{ date: new Date("2016/01/02"), value: 2 }
]
}
});
</script>navigator.pane.padding.topNumber(default: 0)
The top padding of the navigator pane.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
padding: {
top: 10
}
},
series: [{
type: "line",
field: "value",
categoryField: "date"
}]
},
dataSource: {
data: [
{ date: new Date("2016/01/01"), value: 1 },
{ date: new Date("2016/01/02"), value: 2 }
]
}
});
</script>navigator.pane.titleString|Object
The title configuration of the navigator pane.
The panes.title.text option must be set in order to display the title.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
title: {
text: "Navigator Pane Title"
}
},
series: [{
type: "line",
field: "value",
categoryField: "date"
}]
},
dataSource: {
data: [
{ date: new Date("2016/01/01"), value: 1 },
{ date: new Date("2016/01/02"), value: 2 }
]
}
});
</script>navigator.pane.title.backgroundString
The background color of the title. Accepts a valid CSS color string, including hex and rgb.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
title: {
text: "Navigator Pane Title",
background: "lightblue"
}
},
series: [{
type: "line",
field: "value",
categoryField: "date"
}]
},
dataSource: {
data: [
{ date: new Date("2016/01/01"), value: 1 },
{ date: new Date("2016/01/02"), value: 2 }
]
}
});
</script>navigator.pane.title.borderObject
The border of the title.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
title: {
text: "Navigator Pane Title",
border: {
color: "red",
width: 2
}
}
},
series: [{
type: "line",
field: "value",
categoryField: "date"
}]
},
dataSource: {
data: [
{ date: new Date("2016/01/01"), value: 1 },
{ date: new Date("2016/01/02"), value: 2 }
]
}
});
</script>navigator.pane.title.border.colorString(default: "black")
The color of the border. Accepts a valid CSS color string, including hex and rgb.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
title: {
text: "Navigator Pane Title",
border: {
color: "red",
width: 2
}
}
},
series: [{
type: "line",
field: "value",
categoryField: "date"
}]
},
dataSource: {
data: [
{ date: new Date("2016/01/01"), value: 1 },
{ date: new Date("2016/01/02"), value: 2 }
]
}
});
</script>navigator.pane.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
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
title: {
text: "Navigator Pane Title",
border: {
color: "red",
dashType: "dash",
width: 2
}
}
},
series: [{
type: "line",
field: "value",
categoryField: "date"
}]
},
dataSource: {
data: [
{ date: new Date("2016/01/01"), value: 1 },
{ date: new Date("2016/01/02"), value: 2 }
]
}
});
</script>navigator.pane.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
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
title: {
text: "Navigator Pane Title",
border: {
color: "red",
width: 3
}
}
},
series: [{
type: "line",
field: "value",
categoryField: "date"
}]
},
dataSource: {
data: [
{ date: new Date("2016/01/01"), value: 1 },
{ date: new Date("2016/01/02"), value: 2 }
]
}
});
</script>navigator.pane.title.colorString
The text color of the title. Accepts a valid CSS color string, including hex and rgb.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
title: {
text: "Navigator Pane Title",
color: "red"
}
},
series: [{
type: "line",
field: "value",
categoryField: "date"
}]
},
dataSource: {
data: [
{ date: new Date("2016/01/01"), value: 1 },
{ date: new Date("2016/01/02"), value: 2 }
]
}
});
</script>navigator.pane.title.fontString(default: "16px Arial,Helvetica,sans-serif")
The font style of the title.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
title: {
text: "Navigator Pane Title",
font: "bold 18px Arial"
}
},
series: [{
type: "line",
field: "value",
categoryField: "date"
}]
},
dataSource: {
data: [
{ date: new Date("2016/01/01"), value: 1 },
{ date: new Date("2016/01/02"), value: 2 }
]
}
});
</script>navigator.pane.title.marginNumber|Object(default: 5)
The margin of the title. A numeric value will set all margins.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
title: {
text: "Navigator Pane Title",
margin: 10
}
},
series: [{
type: "line",
field: "value",
categoryField: "date"
}]
},
dataSource: {
data: [
{ date: new Date("2016/01/01"), value: 1 },
{ date: new Date("2016/01/02"), value: 2 }
]
}
});
</script>navigator.pane.title.margin.bottomNumber(default: 0)
The bottom margin of the title.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
title: {
text: "Navigator Pane Title",
margin: {
bottom: 10
}
}
},
series: [{
type: "line",
field: "value",
categoryField: "date"
}]
},
dataSource: {
data: [
{ date: new Date("2016/01/01"), value: 1 },
{ date: new Date("2016/01/02"), value: 2 }
]
}
});
</script>navigator.pane.title.margin.leftNumber(default: 0)
The left margin of the title.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
title: {
text: "Navigator Pane Title",
margin: {
left: 15
}
}
},
series: [{
type: "line",
field: "value",
categoryField: "date"
}]
},
dataSource: {
data: [
{ date: new Date("2016/01/01"), value: 1 },
{ date: new Date("2016/01/02"), value: 2 }
]
}
});
</script>navigator.pane.title.margin.rightNumber(default: 0)
The right margin of the title.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
title: {
text: "Navigator Pane Title",
margin: {
right: 15
}
}
},
series: [{
type: "line",
field: "value",
categoryField: "date"
}]
},
dataSource: {
data: [
{ date: new Date("2016/01/01"), value: 1 },
{ date: new Date("2016/01/02"), value: 2 }
]
}
});
</script>navigator.pane.title.margin.topNumber(default: 0)
The top margin of the title.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
title: {
text: "Navigator Pane Title",
margin: {
top: 15
}
}
},
series: [{
type: "line",
field: "value",
categoryField: "date"
}]
},
dataSource: {
data: [
{ date: new Date("2016/01/01"), value: 1 },
{ date: new Date("2016/01/02"), value: 2 }
]
}
});
</script>navigator.pane.title.positionString(default: "center")
The position of the title.
The supported values are:
- "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
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
title: {
text: "Navigator Pane Title",
position: "left"
}
},
series: [{
type: "line",
field: "value",
categoryField: "date"
}]
},
dataSource: {
data: [
{ date: new Date("2016/01/01"), value: 1 },
{ date: new Date("2016/01/02"), value: 2 }
]
}
});
</script>navigator.pane.title.textString
The text of the title.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
title: {
text: "Navigator Pane Title"
}
},
series: [{
type: "line",
field: "value",
categoryField: "date"
}]
},
dataSource: {
data: [
{ date: new Date("2016/01/01"), value: 1 },
{ date: new Date("2016/01/02"), value: 2 }
]
}
});
</script>navigator.pane.title.visibleBoolean(default: true)
If set to true the chart will display the pane title. By default the pane title is visible.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
pane: {
title: {
text: "Navigator Pane Title",
visible: false
}
},
series: [{
type: "line",
field: "value",
categoryField: "date"
}]
},
dataSource: {
data: [
{ date: new Date("2016/01/01"), value: 1 },
{ date: new Date("2016/01/02"), value: 2 }
]
}
});
</script>