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

ChartArea

configuration

The chart area configuration options. This is the entire visible area of the chart.

chartArea

Object

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5],
    chartArea: {
        background: "#f0f0f0",
        opacity: 0.8,
        border: {
            color: "#ff0000",
            width: 2
        }
    }
});
</script>

chartArea.background

String

The background color of the chart area.

Default: "white"

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5],
    chartArea: {
        background: "#ffe0e0"
    }
});
</script>

chartArea.border

Object

The border of the chart area.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5],
    chartArea: {
        border: {
            color: "#00ff00",
            width: 3,
            dashType: "dash"
        }
    }
});
</script>

chartArea.height

Number

The height of the chart area.

Default: 400

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5],
    chartArea: {
        height: 300
    }
});
</script>

chartArea.margin

Number|Object

The margin of the chart area.

Default: 2

// 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 }

chartArea.opacity

Number

The background opacity of the chart area.

Default: 1

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5],
    chartArea: {
        opacity: 0.5
    }
});
</script>

chartArea.width

Number

The width of the chart area.

Default: 600

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5],
    chartArea: {
        width: 500
    }
});
</script>

Related Members