Navigator.categoryAxis.notes
configurationThe category axis notes configuration.
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
categoryAxis: {
notes: {
position: "top",
icon: {
background: "red",
size: 10
},
label: {
text: "Important Date"
},
data: [{
value: new Date("2012/01/15"),
text: "Event"
}]
}
}
},
dataSource: {
data: [
{ date: new Date("2012/01/01"), value: 1 },
{ date: new Date("2012/01/15"), value: 2 },
{ date: new Date("2012/02/01"), value: 3 }
]
},
dateField: "date",
valueField: "value"
});
</script>The items of the notes.
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
categoryAxis: {
notes: {
data: [{
value: new Date("2012/01/15"),
text: "Important event"
}, {
value: new Date("2012/01/25"),
text: "Another event"
}]
}
}
},
dataSource: {
data: [
{ date: new Date("2012/01/01"), value: 1 },
{ date: new Date("2012/01/15"), value: 2 },
{ date: new Date("2012/02/01"), value: 3 }
]
},
dateField: "date",
valueField: "value"
});
</script>The icon of the notes.
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
categoryAxis: {
notes: {
icon: {
background: "red",
size: 10,
type: "circle",
border: {
color: "blue",
width: 2
}
},
data: [{
value: new Date("2012/01/15"),
text: "Note"
}]
}
}
},
dataSource: {
data: [
{ date: new Date("2012/01/01"), value: 1 },
{ date: new Date("2012/01/15"), value: 2 },
{ date: new Date("2012/02/01"), value: 3 }
]
},
dateField: "date",
valueField: "value"
});
</script>The label of the notes.
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
categoryAxis: {
notes: {
label: {
background: "red",
color: "white",
font: "12px Arial",
format: "{0:d}",
visible: true
},
data: [{
value: new Date("2012/01/15"),
text: "Note"
}]
}
}
},
dataSource: {
data: [
{ date: new Date("2012/01/01"), value: 1 },
{ date: new Date("2012/01/15"), value: 2 },
{ date: new Date("2012/02/01"), value: 3 }
]
},
dateField: "date",
valueField: "value"
});
</script>The line of the notes.
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
categoryAxis: {
notes: {
line: {
width: 3,
color: "red",
length: 20
},
data: [{
value: new Date("2012/01/15"),
text: "Note"
}]
}
}
},
dataSource: {
data: [
{ date: new Date("2012/01/01"), value: 1 },
{ date: new Date("2012/01/15"), value: 2 },
{ date: new Date("2012/02/01"), value: 3 }
]
},
dateField: "date",
valueField: "value"
});
</script>The position of the category axis note.
- "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.
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
navigator: {
categoryAxis: {
notes: {
position: "top",
data: [{
value: new Date("2012/01/15"),
text: "Top positioned note"
}]
}
}
},
dataSource: {
data: [
{ date: new Date("2012/01/01"), value: 1 },
{ date: new Date("2012/01/15"), value: 2 },
{ date: new Date("2012/02/01"), value: 3 }
]
},
dateField: "date",
valueField: "value"
});
</script>Related Members
- navigator.categoryAxis.notes.data - The items of the notes.
- navigator.categoryAxis.notes.icon - The icon of the notes.
- navigator.categoryAxis.notes.label - The label of the notes.
- navigator.categoryAxis.notes.line - The line of the notes.