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

Series.line

configuration

Line options.

Applicable to area series.

series.line

String | Object

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "area",
    series: [{
        data: [10, 15, 8, 12],
        line: {
            color: "blue",
            width: 3,
            style: "smooth"
        }
    }]
});
</script>

series.line.color

String

The line color.

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

series.line.opacity

Number

The line opacity.

Default: 1

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "area",
    series: [{
        data: [10, 15, 8, 12],
        line: {
            opacity: 0.5
        }
    }]
});
</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="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "area",
    series: [{
        data: [10, 15, 8, 12],
        line: {
            style: "smooth"
        }
    }]
});
</script>

series.line.width

String

The line width.

Default: 0.5

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "area",
    series: [{
        data: [10, 15, 8, 12],
        line: {
            width: 4
        }
    }]
});
</script>