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

PlotArea

configuration

The plot area configuration options. This is the area containing the plotted series.

plotArea

Object

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    plotArea: {
        background: "lightgray",
        opacity: 0.8,
        border: {
            color: "red",
            width: 2,
            dashType: "dash"
        },
        margin: 10
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

plotArea.background

String

The background color of the plot area.

Default: "white"

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

plotArea.border

Object

The border of the plot area.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    plotArea: {
        border: {
            color: "blue",
            width: 3,
            dashType: "dot"
        }
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

plotArea.margin

Number|Object

The margin of the plot area.

Default: 5

// sets the top, right, bottom and left margin to 3px.
margin: 3

// sets the top and left margin to 1px
// margin right and bottom are with 5px (by default)
margin: { top: 1, left: 1 }

plotArea.opacity

Number

The background opacity of the plot area.

Default: 1

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