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

SeriesDefaults

configuration

Default values for each series.

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

The area configuration options. The default options for all area series. For more details see the series options.

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

The default options for all bar series. For more details see the series options.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "bar",
    seriesDefaults: {
        bar: {
            color: "orange",
            border: {
                width: 1,
                color: "black"
            }
        }
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

The border of the series.

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

The column configuration options. The default options for all column series. For more details see the series options.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    seriesDefaults: {
        column: {
            color: "purple",
            border: {
                width: 1,
                color: "black"
            }
        }
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

The distance between category clusters.

Default: 1.5

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    seriesDefaults: {
        gap: 0.5
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

Configures the series data labels.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    seriesDefaults: {
        labels: {
            visible: true,
            background: "yellow",
            color: "black"
        }
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

The line configuration options. The default options for all line series. For more details see the series options.

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

The effects overlay.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    seriesDefaults: {
        overlay: {
            gradient: "glass"
        }
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

The pie configuration options. The default options for all pie series. For more details see the series options.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "pie",
    seriesDefaults: {
        pie: {
            border: {
                width: 2,
                color: "black"
            }
        }
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

Space between bars.

Default: 0.4

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    seriesDefaults: {
        spacing: 0.1
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>
Boolean|Object

A Boolean value indicating if the series should be stacked.

The stack options is supported when series.type is set to "bar", "column", "line", "area", "verticalLine", "verticalArea", "radarLine", "radarArea" and "radarColumn".

Default: false

<span id="sparkline"></span>
<script>
$("#sparkline").kendoSparkline({
  seriesDefaults: {
    stack: true
  },
  series: [
    { data: [ 1, 2 , 3] },
    { data: [ 4, 5 , 6] }
  ]
});
</script>

The data point tooltip configuration options.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    seriesDefaults: {
        tooltip: {
            visible: true,
            background: "yellow",
            color: "black"
        }
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

The type of the series. Available types:

  • area
  • column (synonym: bar)
  • line
  • pie
  • bullet
<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    seriesDefaults: {
        type: "column"
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>