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

Series.highlight.border

configuration

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

** Applicable to bubble, pie, candlestick and ohlc series. **

series.highlight.border

Object

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2000, 1, 1), open: 10, high: 15, low: 8, close: 12 },
            { date: new Date(2000, 1, 2), open: 12, high: 18, low: 10, close: 16 }
        ]
    },
    dateField: "date",
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close",
        highlight: {
            border: {
                width: 2,
                color: "red",
                opacity: 0.5
            }
        }
    }]
});
</script>

series.highlight.border.color

String

The border color.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2000, 1, 1), open: 10, high: 15, low: 8, close: 12 },
            { date: new Date(2000, 1, 2), open: 12, high: 18, low: 10, close: 16 }
        ]
    },
    dateField: "date",
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close",
        highlight: {
            border: {
                color: "red"
            }
        }
    }]
});
</script>

series.highlight.border.opacity

Number

The border opacity.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2000, 1, 1), open: 10, high: 15, low: 8, close: 12 },
            { date: new Date(2000, 1, 2), open: 12, high: 18, low: 10, close: 16 }
        ]
    },
    dateField: "date",
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close",
        highlight: {
            border: {
                opacity: 0.5
            }
        }
    }]
});
</script>

series.highlight.border.width

Number

The width of the border.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2000, 1, 1), open: 10, high: 15, low: 8, close: 12 },
            { date: new Date(2000, 1, 2), open: 12, high: 18, low: 10, close: 16 }
        ]
    },
    dateField: "date",
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close",
        highlight: {
            border: {
                width: 3
            }
        }
    }]
});
</script>