series.notes.iconObject
The icon of the notes.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: "2013/01/01", value: 40 },
{ date: "2013/01/02", value: 42 }
]
},
series: [{
field: "value",
notes: {
icon: {
background: "red",
type: "circle",
size: 15
},
data: [{
value: 41
}]
}
}],
categoryAxis: {
field: "date"
}
});
</script>series.notes.icon.backgroundString
The background color of the notes icon.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
dataSource: {
data: [
{ date: "2013/01/01", value: 40 },
{ date: "2013/01/02", value: 42 }
]
},
series: [{
field: "value",
notes: {
icon: {
background: "yellow"
},
data: [{
value: 41
}]
}
}],
categoryAxis: {
field: "date"
}
});
</script>series.notes.icon.borderObject
The border of the icon.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
series: [{
type: "candlestick",
data: [[new Date(2023, 0, 1), 100, 110, 95, 105]],
notes: {
data: [{
value: new Date(2023, 0, 1),
icon: {
border: {
color: "#ff0000",
width: 2
}
}
}]
}
}]
});
</script>series.notes.icon.border.colorString
The border color of the icon.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
series: [{
type: "candlestick",
data: [[new Date(2023, 0, 1), 100, 110, 95, 105]],
notes: {
data: [{
value: new Date(2023, 0, 1),
icon: {
border: {
color: "#ff0000"
}
}
}]
}
}]
});
</script>series.notes.icon.border.widthNumber
The border width of the icon.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
series: [{
type: "candlestick",
data: [[new Date(2023, 0, 1), 100, 110, 95, 105]],
notes: {
data: [{
value: new Date(2023, 0, 1),
icon: {
border: {
width: 3
}
}
}]
}
}]
});
</script>series.notes.icon.sizeNumber
The size of the icon.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
series: [{
type: "candlestick",
data: [[new Date(2023, 0, 1), 100, 110, 95, 105]],
notes: {
data: [{
value: new Date(2023, 0, 1),
icon: {
size: 20
}
}]
}
}]
});
</script>series.notes.icon.typeString(default: "circle")
The icon shape.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
series: [{
type: "candlestick",
data: [[new Date(2023, 0, 1), 100, 110, 95, 105]],
notes: {
data: [{
value: new Date(2023, 0, 1),
icon: {
type: "square"
}
}]
}
}]
});
</script>The supported values are:
- "circle" - the marker shape is circle.
- "square" - the marker shape is square.
- "triangle" - the marker shape is triangle.
- "cross" - the marker shape is cross.
series.notes.icon.visibleBoolean(default: "true")
The icon visibility.
Example
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
series: [{
type: "candlestick",
data: [[new Date(2023, 0, 1), 100, 110, 95, 105]],
notes: {
data: [{
value: new Date(2023, 0, 1),
icon: {
visible: false
}
}]
}
}]
});
</script>