categoryAxis.plotBandsArray
The plot bands of the category axis.
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: {
plotBands: [{
from: new Date("2012/01/02"),
to: new Date("2012/01/04"),
color: "#ffcccc",
opacity: 0.5
}]
},
series: [{
type: "candlestick",
field: "close"
}]
});
</script>categoryAxis.plotBands.fromNumber
The start position of the plot band in axis units.
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: {
plotBands: [{
from: new Date("2012/01/02"),
to: new Date("2012/01/04"),
color: "#ffcccc"
}]
},
series: [{
type: "candlestick",
field: "close"
}]
});
</script>categoryAxis.plotBands.toNumber
The end position of the plot band in axis units.
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: {
plotBands: [{
from: new Date("2012/01/02"),
to: new Date("2012/01/04"),
color: "#ffcccc"
}]
},
series: [{
type: "candlestick",
field: "close"
}]
});
</script>categoryAxis.plotBands.colorString
The color of the plot band.
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: {
plotBands: [{
from: new Date("2012/01/02"),
to: new Date("2012/01/04"),
color: "#ff6800"
}]
},
series: [{
type: "candlestick",
field: "close"
}]
});
</script>categoryAxis.plotBands.opacityNumber
The opacity of the plot band.
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: {
plotBands: [{
from: new Date("2012/01/02"),
to: new Date("2012/01/04"),
color: "#ff6800",
opacity: 0.3
}]
},
series: [{
type: "candlestick",
field: "close"
}]
});
</script>In this article