valueAxis.majorGridLinesObject
Configures the major grid lines. These are the lines that are an extension of the major ticks through the body of the chart.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: "2012/01/01", open: 10, high: 15, low: 8, close: 12, volume: 1000 },
{ date: "2012/01/02", open: 12, high: 18, low: 10, close: 15, volume: 1200 }
]
},
dateField: "date",
valueAxis: {
majorGridLines: {
color: "green",
width: 2,
visible: true
}
},
series: [{
type: "candlestick",
openField: "open",
highField: "high",
lowField: "low",
closeField: "close"
}]
});
</script>valueAxis.majorGridLines.colorString(default: "black")
The color of the lines.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: "2012/01/01", open: 10, high: 15, low: 8, close: 12, volume: 1000 },
{ date: "2012/01/02", open: 12, high: 18, low: 10, close: 15, volume: 1200 }
]
},
dateField: "date",
valueAxis: {
majorGridLines: {
color: "red"
}
},
series: [{
type: "candlestick",
openField: "open",
highField: "high",
lowField: "low",
closeField: "close"
}]
});
</script>valueAxis.majorGridLines.visibleBoolean(default: true)
The visibility of the lines.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: "2012/01/01", open: 10, high: 15, low: 8, close: 12, volume: 1000 },
{ date: "2012/01/02", open: 12, high: 18, low: 10, close: 15, volume: 1200 }
]
},
dateField: "date",
valueAxis: {
majorGridLines: {
visible: false
}
},
series: [{
type: "candlestick",
openField: "open",
highField: "high",
lowField: "low",
closeField: "close"
}]
});
</script>valueAxis.majorGridLines.widthNumber(default: 1)
The width of the lines.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: "2012/01/01", open: 10, high: 15, low: 8, close: 12, volume: 1000 },
{ date: "2012/01/02", open: 12, high: 18, low: 10, close: 15, volume: 1200 }
]
},
dateField: "date",
valueAxis: {
majorGridLines: {
width: 3
}
},
series: [{
type: "candlestick",
openField: "open",
highField: "high",
lowField: "low",
closeField: "close"
}]
});
</script>valueAxis.majorGridLines.stepNumber(default: 1)
The step of the value axis major grid lines.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: "2012/01/01", open: 10, high: 15, low: 8, close: 12, volume: 1000 },
{ date: "2012/01/02", open: 12, high: 18, low: 10, close: 15, volume: 1200 },
{ date: "2012/01/03", open: 15, high: 20, low: 12, close: 18, volume: 1500 }
]
},
dateField: "date",
valueAxis: {
majorGridLines: {
step: 2
}
},
series: [{
type: "candlestick",
openField: "open",
highField: "high",
lowField: "low",
closeField: "close"
}]
});
</script>valueAxis.majorGridLines.skipNumber(default: 0)
The skip of the value axis major grid lines.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: "2012/01/01", open: 10, high: 15, low: 8, close: 12, volume: 1000 },
{ date: "2012/01/02", open: 12, high: 18, low: 10, close: 15, volume: 1200 },
{ date: "2012/01/03", open: 15, high: 20, low: 12, close: 18, volume: 1500 }
]
},
dateField: "date",
valueAxis: {
majorGridLines: {
skip: 1
}
},
series: [{
type: "candlestick",
openField: "open",
highField: "high",
lowField: "low",
closeField: "close"
}]
});
</script>In this article