navigator.categoryAxis.minorGridLinesObject
The configuration of the minor grid lines. These are the lines that are an extension of the minor ticks through the body of the chart.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
categoryAxis: {
minorGridLines: {
color: "lightgray",
visible: true
}
}
},
series: [{
type: "line",
field: "value",
categoryField: "date",
data: [
{ value: 1, date: new Date(2012, 1, 1) },
{ value: 2, date: new Date(2012, 1, 2) }
]
}]
});
</script>navigator.categoryAxis.minorGridLines.colorString(default: "black")
The color of the minor grid lines. Accepts a valid CSS color string, including hex and rgb.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
categoryAxis: {
minorGridLines: {
color: "gray",
visible: true
}
}
},
series: [{
type: "line",
field: "value",
categoryField: "date",
data: [
{ value: 1, date: new Date(2012, 1, 1) },
{ value: 2, date: new Date(2012, 1, 2) }
]
}]
});
</script>navigator.categoryAxis.minorGridLines.dashTypeString(default: "solid")
The dash type of the minor grid lines.
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: {
categoryAxis: {
minorGridLines: {
dashType: "dot",
visible: true
}
}
},
series: [{
type: "line",
field: "value",
categoryField: "date",
data: [
{ value: 1, date: new Date(2012, 1, 1) },
{ value: 2, date: new Date(2012, 1, 2) }
]
}]
});
</script>navigator.categoryAxis.minorGridLines.visibleBoolean(default: false)
If set to true the chart will display the minor grid lines. By default the minor grid lines are visible.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
categoryAxis: {
minorGridLines: {
visible: true
}
}
},
series: [{
type: "line",
field: "value",
categoryField: "date",
data: [
{ value: 1, date: new Date(2012, 1, 1) },
{ value: 2, date: new Date(2012, 1, 2) }
]
}]
});
</script>navigator.categoryAxis.minorGridLines.widthNumber(default: 1)
The width of the category axis minor grid lines in pixels.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
categoryAxis: {
minorGridLines: {
width: 2,
visible: true
}
}
},
series: [{
type: "line",
field: "value",
categoryField: "date",
data: [
{ value: 1, date: new Date(2012, 1, 1) },
{ value: 2, date: new Date(2012, 1, 2) }
]
}]
});
</script>navigator.categoryAxis.minorGridLines.stepNumber(default: 1)
The step of the category axis minor grid lines.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
categoryAxis: {
minorGridLines: {
step: 2,
visible: true
}
}
},
series: [{
type: "line",
field: "value",
categoryField: "date",
data: [
{ value: 1, date: new Date(2012, 1, 1) },
{ value: 2, date: new Date(2012, 1, 2) },
{ value: 3, date: new Date(2012, 1, 3) },
{ value: 4, date: new Date(2012, 1, 4) }
]
}]
});
</script>navigator.categoryAxis.minorGridLines.skipNumber(default: 0)
The skip of the category axis minor grid lines.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
categoryAxis: {
minorGridLines: {
skip: 1,
visible: true
}
}
},
series: [{
type: "line",
field: "value",
categoryField: "date",
data: [
{ value: 1, date: new Date(2012, 1, 1) },
{ value: 2, date: new Date(2012, 1, 2) },
{ value: 3, date: new Date(2012, 1, 3) },
{ value: 4, date: new Date(2012, 1, 4) }
]
}]
});
</script>In this article