New to Kendo UI for jQuery? Start a free 30-day trial

Navigator.series.highlight.border

configuration

The border of highlighted points. The color is computed automatically from the base point color.

navigator.series.highlight.border

Object

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        series: [{
            type: "candlestick",
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close",
            categoryField: "date",
            highlight: {
                border: {
                    width: 2,
                    color: "red"
                }
            }
        }]
    },
    dataSource: {
        data: [
            { date: new Date("2016/01/01"), open: 1, high: 3, low: 0.5, close: 2 },
            { date: new Date("2016/01/02"), open: 2, high: 4, low: 1.5, close: 3 }
        ]
    }
});
</script>

navigator.series.highlight.border.color

String

The border color.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        series: [{
            type: "candlestick",
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close",
            categoryField: "date",
            highlight: {
                border: {
                    color: "red",
                    width: 2
                }
            }
        }]
    },
    dataSource: {
        data: [
            { date: new Date("2016/01/01"), open: 1, high: 3, low: 0.5, close: 2 },
            { date: new Date("2016/01/02"), open: 2, high: 4, low: 1.5, close: 3 }
        ]
    }
});
</script>

navigator.series.highlight.border.opacity

Number

The border opacity.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        series: [{
            type: "candlestick",
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close",
            categoryField: "date",
            highlight: {
                border: {
                    opacity: 0.5,
                    width: 2
                }
            }
        }]
    },
    dataSource: {
        data: [
            { date: new Date("2016/01/01"), open: 1, high: 3, low: 0.5, close: 2 },
            { date: new Date("2016/01/02"), open: 2, high: 4, low: 1.5, close: 3 }
        ]
    }
});
</script>

navigator.series.highlight.border.width

Number

The width of the border.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    navigator: {
        series: [{
            type: "candlestick",
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close",
            categoryField: "date",
            highlight: {
                border: {
                    width: 3
                }
            }
        }]
    },
    dataSource: {
        data: [
            { date: new Date("2016/01/01"), open: 1, high: 3, low: 0.5, close: 2 },
            { date: new Date("2016/01/02"), open: 2, high: 4, low: 1.5, close: 3 }
        ]
    }
});
</script>