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

Series.highlight

configuration

Configures the appearance of highlighted points.

series.highlight

Object

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date(2016, 0, 1),
            close: 41
        }, {
            date: new Date(2016, 0, 2),
            close: 42
        }]
    },
    series: [{
        type: "line",
        field: "close",
        name: "Price",
        highlight: {
            visible: true,
            color: "red",
            opacity: 0.8
        }
    }]
});
</script>

series.highlight.border

Object

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

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

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

String

The highlight color.

** Available only for pie series **

<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: {
            color: "yellow"
        }
    }]
});
</script>

series.highlight.line

Object

Line options for highlighted points. The color is computed automatically from the base point color.

** Available only for candlestick series **

<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: {
            line: {
                width: 2,
                color: "red",
                opacity: 0.8
            }
        }
    }]
});
</script>

series.highlight.opacity

Number

The opacity of the highlighted points.

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

<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: {
            opacity: 0.7
        }
    }]
});
</script>

series.highlight.visible

Boolean

A value indicating if the series points should be highlighted.

Default: true

<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: {
            visible: true
        }
    }]
});
</script>

Series.highlight

series.highlight

series.highlight.border

series.highlight.color

series.highlight.line

series.highlight.opacity

series.highlight.visible

Related Members