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

Series.line

configuration

Line options.

** Applicable to area, candlestick and ohlc series. **

series.line

String | 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",
        line: {
            color: "#ff6800",
            width: 2
        }
    }]
});
</script>

series.line.color

String

The line color.

<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",
        line: {
            color: "#ff6800"
        }
    }]
});
</script>

series.line.opacity

Number

The line opacity.

Default: 1

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

series.line.style

String

The supported values are:

"normal" - The values will be connected with straight line.
"step" - The values will be connected with a line with right angle.
"smooth" - The values will be connected with a smooth line.

The default value is "normal".

The style option is supported when series.type is set to "area".

Default: "normal"

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date(2023, 1, 1), value: 100 },
            { date: new Date(2023, 1, 2), value: 105 },
            { date: new Date(2023, 1, 3), value: 98 }
        ]
    },
    categoryField: "date",
    series: [{
        type: "area",
        field: "value",
        line: {
            style: "smooth"
        }
    }]
});
</script>

series.line.width

String

The line width.

Default: 4

<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",
        line: {
            width: 3
        }
    }]
});
</script>