navigator.categoryAxis.notes.line - API Reference - Kendo UI StockChart

navigator.categoryAxis.notes.line`Object`

The line of the notes.

Example

<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>

navigator.categoryAxis.notes.line.width`Number`

The line width of the notes.

Example

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            notes: {
                line: {
                    width: 3
                },
                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>

navigator.categoryAxis.notes.line.color`String`

The line color of the notes.

Example

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            notes: {
                line: {
                    color: "red"
                },
                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>

navigator.categoryAxis.notes.line.length`Number`

The length of the connecting lines in pixels.

Example

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        categoryAxis: {
            notes: {
                line: {
                    length: 30
                },
                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>