categoryAxis.minorGridLinesObject
Configures 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({
dataSource: {
data: [
{ date: new Date("2012/01/01"), close: 300, volume: 40000 },
{ date: new Date("2012/01/02"), close: 310, volume: 50000 },
{ date: new Date("2012/01/03"), close: 320, volume: 45000 }
]
},
dateField: "date",
categoryAxis: {
minorGridLines: {
visible: true,
color: "#f0f0f0",
width: 1
}
},
series: [{
type: "candlestick",
field: "close"
}]
});
</script>Note that minor grid lines are not visible by default, therefore none of these settings will take effect with the minor grid lines visibility being set to true.
categoryAxis.minorGridLines.colorString(default: "black")
The color of the lines. Any valid CSS color string will work here, including hex and rgb.
Note that this setting has no effect if the visibility of the minor grid lines is not set to true.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2012/01/01"), close: 300, volume: 40000 },
{ date: new Date("2012/01/02"), close: 310, volume: 50000 },
{ date: new Date("2012/01/03"), close: 320, volume: 45000 }
]
},
dateField: "date",
categoryAxis: {
minorGridLines: {
visible: true,
color: "#ff6800"
}
},
series: [{
type: "candlestick",
field: "close"
}]
});
</script>categoryAxis.minorGridLines.dashTypeString(default: "solid")
The dash type of the grid lines.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2012/01/01"), close: 300, volume: 40000 },
{ date: new Date("2012/01/02"), close: 310, volume: 50000 },
{ date: new Date("2012/01/03"), close: 320, volume: 45000 }
]
},
dateField: "date",
categoryAxis: {
minorGridLines: {
visible: true,
dashType: "dash"
}
},
series: [{
type: "candlestick",
field: "close"
}]
});
</script>"solid"
Specifies a solid line.
"dot"
Specifies a line consisting of dots.
"dash"
Specifies a line consisting of dashes.
"longDash"
Specifies a line consisting of a repeating pattern of long-dash.
"dashDot"
Specifies a line consisting of a repeating pattern of dash-dot.
"longDashDot"
Specifies a line consisting of a repeating pattern of long-dash-dot.
"longDashDotDot"
Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
categoryAxis.minorGridLines.visibleBoolean(default: false)
The visibility of the lines.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2012/01/01"), close: 300, volume: 40000 },
{ date: new Date("2012/01/02"), close: 310, volume: 50000 },
{ date: new Date("2012/01/03"), close: 320, volume: 45000 }
]
},
dateField: "date",
categoryAxis: {
minorGridLines: {
visible: true
}
},
series: [{
type: "candlestick",
field: "close"
}]
});
</script>categoryAxis.minorGridLines.widthNumber
The width of the lines.
Note that this setting has no effect if the visibility of the minor grid lines is not set to true.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2012/01/01"), close: 300, volume: 40000 },
{ date: new Date("2012/01/02"), close: 310, volume: 50000 },
{ date: new Date("2012/01/03"), close: 320, volume: 45000 }
]
},
dateField: "date",
categoryAxis: {
minorGridLines: {
visible: true,
width: 2
}
},
series: [{
type: "candlestick",
field: "close"
}]
});
</script>categoryAxis.minorGridLines.stepNumber(default: 1)
The step of the category axis minor grid lines.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2012/01/01"), close: 300, volume: 40000 },
{ date: new Date("2012/01/02"), close: 310, volume: 50000 },
{ date: new Date("2012/01/03"), close: 320, volume: 45000 },
{ date: new Date("2012/01/04"), close: 330, volume: 55000 },
{ date: new Date("2012/01/05"), close: 340, volume: 60000 }
]
},
dateField: "date",
categoryAxis: {
minorGridLines: {
visible: true,
step: 2
}
},
series: [{
type: "candlestick",
field: "close"
}]
});
</script>categoryAxis.minorGridLines.skipNumber(default: 0)
The skip of the category axis minor grid lines.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2012/01/01"), close: 300, volume: 40000 },
{ date: new Date("2012/01/02"), close: 310, volume: 50000 },
{ date: new Date("2012/01/03"), close: 320, volume: 45000 },
{ date: new Date("2012/01/04"), close: 330, volume: 55000 },
{ date: new Date("2012/01/05"), close: 340, volume: 60000 }
]
},
dateField: "date",
categoryAxis: {
minorGridLines: {
visible: true,
skip: 1
}
},
series: [{
type: "candlestick",
field: "close"
}]
});
</script>