CategoryAxis.notes
configurationThe category axis notes configuration.
categoryAxis.notes
Object<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: 16, volume: 1500 }
]
},
dateField: "date",
categoryAxis: {
notes: {
data: [{ value: new Date("2012/01/01"), text: "Important date" }],
icon: {
background: "red",
size: 10
}
}
},
series: [{
type: "candlestick",
openField: "open",
highField: "high",
lowField: "low",
closeField: "close"
}]
});
</script>The items of the notes.
<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: 16, volume: 1500 },
{ date: "2012/01/03", open: 16, high: 20, low: 14, close: 18, volume: 2000 }
]
},
dateField: "date",
categoryAxis: {
notes: {
data: [
{ value: new Date("2012/01/01"), text: "Start date" },
{ value: new Date("2012/01/03"), text: "End date" }
]
}
},
series: [{
type: "candlestick",
openField: "open",
highField: "high",
lowField: "low",
closeField: "close"
}]
});
</script>categoryAxis.notes.icon
ObjectThe icon of the notes.
<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: 16, volume: 1500 }
]
},
dateField: "date",
categoryAxis: {
notes: {
data: [{ value: new Date("2012/01/01"), text: "Important date" }],
icon: {
background: "red",
size: 15,
type: "square"
}
}
},
series: [{
type: "candlestick",
openField: "open",
highField: "high",
lowField: "low",
closeField: "close"
}]
});
</script>categoryAxis.notes.label
ObjectThe label of the notes.
<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: 16, volume: 1500 }
]
},
dateField: "date",
categoryAxis: {
notes: {
data: [{ value: new Date("2012/01/01"), text: "Important date" }],
label: {
background: "yellow",
color: "black"
}
}
},
series: [{
type: "candlestick",
openField: "open",
highField: "high",
lowField: "low",
closeField: "close"
}]
});
</script>categoryAxis.notes.line
ObjectThe line of the notes.
<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: 16, volume: 1500 }
]
},
dateField: "date",
categoryAxis: {
notes: {
data: [{ value: new Date("2012/01/01"), text: "Important date" }],
line: {
width: 3,
color: "red"
}
}
},
series: [{
type: "candlestick",
openField: "open",
highField: "high",
lowField: "low",
closeField: "close"
}]
});
</script>The position of the category axis note.
<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: 16, volume: 1500 }
]
},
dateField: "date",
categoryAxis: {
notes: {
position: "top",
data: [{ value: new Date("2012/01/01"), text: "Important date" }]
}
},
series: [{
type: "candlestick",
openField: "open",
highField: "high",
lowField: "low",
closeField: "close"
}]
});
</script>- "top" - The note is positioned on the top.
- "bottom" - The note is positioned on the bottom.
- "left" - The note is positioned on the left.
- "right" - The note is positioned on the right.
Related Members
- categoryAxis.notes.data - The items of the notes.
- categoryAxis.notes.icon - The icon of the notes.
- categoryAxis.notes.label - The label of the notes.
- categoryAxis.notes.line - The line of the notes.