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

Series.overlay

configuration

The effects overlay.

series.overlay

Object

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2023, 1, 1), open: 100, high: 110, low: 90, close: 105 },
            { date: new Date(2023, 1, 2), open: 105, high: 115, low: 95, close: 110 }
        ]
    },
    categoryField: "date",
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close",
        overlay: {
            gradient: "glass"
        }
    }]
});
</script>

series.overlay.gradient

String

The gradient name.

Available options:

glass (column and candlestick series)
none

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2023, 1, 1), open: 100, high: 110, low: 90, close: 105 },
            { date: new Date(2023, 1, 2), open: 105, high: 115, low: 95, close: 110 }
        ]
    },
    categoryField: "date",
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close",
        overlay: {
            gradient: "glass"
        }
    }]
});
</script>