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="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    series: [{
        highlight: {
            visible: true,
            color: "yellow",
            opacity: 0.8,
            border: {
                width: 2,
                color: "red"
            }
        },
        data: [10, 15, 8, 12]
    }]
});
</script>

series.highlight.border

Object

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

Applicable to pie series.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    series: [{
        type: "pie",
        highlight: {
            border: {
                width: 3,
                color: "blue",
                opacity: 0.7
            }
        },
        data: [10, 15, 8]
    }]
});
</script>

series.highlight.color

String

The highlight color.

Available only for pie series

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    series: [{
        type: "pie",
        highlight: {
            color: "lightgreen"
        },
        data: [10, 15, 8]
    }]
});
</script>

series.highlight.opacity

Number

The opacity of the highlighted points.

Applicable to pie series.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "pie",
    series: [{
        data: [10, 15, 8, 12],
        highlight: {
            opacity: 0.5
        }
    }]
});
</script>

series.highlight.visible

Boolean

A value indicating if the series points should be highlighted.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    series: [{
        highlight: {
            visible: false
        },
        data: [10, 15, 8, 12]
    }]
});
</script>