ValueAxis.notes
configurationThe value axis notes configuration.
valueAxis.notes
Object<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2023/1/1"), open: 100, high: 110, low: 95, close: 105 },
{ date: new Date("2023/1/2"), open: 105, high: 115, low: 100, close: 110 }
]
},
dateField: "date",
valueAxis: {
notes: {
position: "left",
data: [{
value: 105,
label: { text: "Important level" }
}]
}
},
series: [{
type: "candlestick",
openField: "open",
highField: "high",
lowField: "low",
closeField: "close"
}]
});
</script>valueAxis.notes.data
ArrayThe items of the notes.
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2023/1/1"), open: 100, high: 110, low: 95, close: 105 },
{ date: new Date("2023/1/2"), open: 105, high: 115, low: 100, close: 110 }
]
},
dateField: "date",
valueAxis: {
notes: {
data: [
{ value: 100, label: { text: "Low point" } },
{ value: 110, label: { text: "High point" } }
]
}
},
series: [{
type: "candlestick",
openField: "open",
highField: "high",
lowField: "low",
closeField: "close"
}]
});
</script>valueAxis.notes.icon
ObjectThe icon of the notes.
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2023/1/1"), open: 100, high: 110, low: 95, close: 105 },
{ date: new Date("2023/1/2"), open: 105, high: 115, low: 100, close: 110 }
]
},
dateField: "date",
valueAxis: {
notes: {
data: [{
value: 105,
icon: {
background: "red",
type: "circle",
size: 10,
visible: true
}
}]
}
},
series: [{
type: "candlestick",
openField: "open",
highField: "high",
lowField: "low",
closeField: "close"
}]
});
</script>valueAxis.notes.label
ObjectThe label of the notes.
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2023/1/1"), open: 100, high: 110, low: 95, close: 105 },
{ date: new Date("2023/1/2"), open: 105, high: 115, low: 100, close: 110 }
]
},
dateField: "date",
valueAxis: {
notes: {
data: [{
value: 105,
label: {
text: "Important level",
background: "yellow",
color: "black",
visible: true
}
}]
}
},
series: [{
type: "candlestick",
openField: "open",
highField: "high",
lowField: "low",
closeField: "close"
}]
});
</script>valueAxis.notes.line
ObjectThe line of the notes.
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: new Date("2023/1/1"), open: 100, high: 110, low: 95, close: 105 },
{ date: new Date("2023/1/2"), open: 105, high: 115, low: 100, close: 110 }
]
},
dateField: "date",
valueAxis: {
notes: {
data: [{
value: 105,
line: {
width: 3,
color: "red",
length: 20
}
}]
}
},
series: [{
type: "candlestick",
openField: "open",
highField: "high",
lowField: "low",
closeField: "close"
}]
});
</script>valueAxis.notes.position
StringThe position of the value 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({
dataSource: {
data: [
{ date: new Date("2023/1/1"), open: 100, high: 110, low: 95, close: 105 },
{ date: new Date("2023/1/2"), open: 105, high: 115, low: 100, close: 110 }
]
},
dateField: "date",
valueAxis: {
notes: {
position: "right",
data: [{
value: 105,
label: { text: "Important level" }
}]
}
},
series: [{
type: "candlestick",
openField: "open",
highField: "high",
lowField: "low",
closeField: "close"
}]
});
</script>Related Members
- valueAxis.notes.data - The items of the notes.
- valueAxis.notes.icon - The icon of the notes.
- valueAxis.notes.label - The label of the notes.
- valueAxis.notes.line - The line of the notes.