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

Series

configuration

Array of series definitions.

The series type is determined by the value of the type field. If a type value is missing, the type is assumed to be the one specified in seriesDefaults.

Each series type has a different set of options.

**Info:**Some options accept function as argument. They will be evaluated for each point (supplied as parameter). The theme/seriesDefaults value will be used if no value is returned.

series

Array

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

series.aggregate

String|Function

The aggregate function to apply for date series.

This function is used when a category (an year, month, etc.) contains two or more points. The function return value is displayed instead of the individual points.

The supported values are:

"avg" - the average of all values for the date period.
"count" - the number of values for the date period.
"max" - the highest value for the date period.
"min" - the lowest value for the date period.
"sum" - the sum of all values for the date period. Defaults to 0 if no data points are defined.
"sumOrNull" - the sum of all values for the date period. Defaults to null if no data points are defined.
"first" - the first value
function(values, series, dataItems, category) - user-defined aggregate function. Returns single value or data item.
object - (compound aggregate)Applicable to "candlestick" and ohlc "series". Specifies the aggregate for each data item field.

Default: "max"

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    categoryAxis: {
        type: "date",
        categories: [
            new Date("2023/01/01"),
            new Date("2023/01/01"),
            new Date("2023/01/02"),
            new Date("2023/01/02")
        ]
    },
    series: [{
        aggregate: "avg",
        data: [10, 15, 8, 12]
    }]
});
</script>

series.axis

String

The name of the value axis to use.

Applicable to area, bar, column and line series

Default: "primary"

<div id="sparkline"></div>
<script>
 $("#sparkline").kendoSparkline({
    valueAxis: [{ name: "first" }],
    series: [
      {
        type: "column",
        data: [200, 450, 300, 125],
        color: function (point) {
          if (point.value > 300) {
            // Colorize matching points
            return "#f00";
          }

          // Use default theme color
        },
        axis: "first",
      },
    ],
  });
</script>

series.border

Object

The border of the points.

Applicable to bar, column and pie series

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

series.categoryField

String

The data field containing the point category name.

Applicable to pie series.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "pie",
    dataSource: [
        { category: "Apples", value: 10 },
        { category: "Oranges", value: 15 },
        { category: "Bananas", value: 8 }
    ],
    series: [{
        categoryField: "category",
        field: "value"
    }]
});
</script>

series.color

String|Function

The series base color. The supported values are:

CSS color string, including hex and rgb
function(point) - user-defined function that will be evaluated for each point. Returning undefined will assume the default series color.

$("#sparkline").kendoSparkline({
     series: [{
         type: "column",
         data: [200, 450, 300, 125],
         color: "#ff0000"
     }]
});
</script>

<span id="sparkline"></span>
<script>
$("#sparkline").kendoSparkline({
     series: [{
         type: "column",
         data: [200, 450, 300, 125],
         color: function(point) {
            if (point.value > 300) {
                // Colorize matching points
                return "#f00";
            }

            // Use default theme color
         }
     }]
});
</script>

series.colorField

String

The data field containing the point color.

Applicable for bar, column and pie series.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    dataSource: [
        { value: 10, color: "red" },
        { value: 15, color: "blue" },
        { value: 8, color: "green" }
    ],
    series: [{
        field: "value",
        colorField: "color"
    }]
});
</script>

series.connectors

Object

The label connectors options.

Applicable to pie series.

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

series.currentField

String

The data field containing the current value.

Available for bullet and verticalBullet series.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    series: [{
        type: "bullet",
        currentField: "current",
        data: [
            { current: 10, target: 15 },
            { current: 8, target: 12 }
        ]
    }]
});
</script>

series.dashType

String

The series line dash type.

Applicable only to line series

"solid"

Specifies a solid line.

"dot"

Specifies a line consisting of dots.

"dash"

Specifies a line consisting of dashes.

"longDash"

Specifies a line consisting of a repeating pattern of long-dash.

"dashDot"

Specifies a line consisting of a repeating pattern of dash-dot.

"longDashDot"

Specifies a line consisting of a repeating pattern of long-dash-dot.

"longDashDotDot"

Specifies a line consisting of a repeating pattern of long-dash-dot-dot.

Default: "solid"

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

series.data

Array

Array of data items. The data item type can be either a:

Array of objects. Each point is bound to the specified series fields.
Array of numbers. Available for area, bar, column, pie and line series.

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

series.explodeField

String

The data field containing a Boolean value that indicates if the sector is exploded.

Available for pie series

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    series: [{
        type: "pie",
        explodeField: "exploded",
        data: [
            { value: 10, exploded: false },
            { value: 15, exploded: true },
            { value: 8, exploded: false }
        ]
    }]
});
</script>

series.field

String

The data field containing the series value.

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

series.gap

Number

The distance between category clusters.

Applicable for bar and column series.

Default: 1.5

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

series.highlight

Object

Configures the appearance of highlighted points.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    series: [{
        highlight: {
            visible: true,
            color: "yellow",
            opacity: 0.8,
            border: {
                width: 2,
                color: "red"
            }
        },
        data: [10, 15, 8, 12]
    }]
});
</script>

series.labels

Object

Configures the series data labels.

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

series.line

String | Object

Line options.

Applicable to area series.

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

series.markers

Object

Marker options.

Applicable to area and line series

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "line",
    series: [{
        data: [10, 15, 8, 12],
        markers: {
            visible: true,
            background: "blue",
            size: 8,
            type: "circle"
        }
    }]
});
</script>

series.missingValues

String

The behavior for handling missing values. The supported values are:

"gap" - the plot stops before the missing point and continues after it.
"interpolate" - the value is interpolated from neighboring points.
"zero" - the value is assumed to be zero.

The default value is "interpolate", except for "area" and stacked series which default to "zero".

The missingValues option is supported when series.type is set to "area", "line", "scatterLine", "radarLine", "radarArea", "polarLine" or "polarArea".

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    type: "line",
    missingValues: "gap",
    data: [1, 3, null, 4, 5]
  }]
});
</script>

series.name

String

The series name.

The name can also be a template which sets the name of the series when bound to grouped data source.

The fields which can be used in the template are:

series - the series options
group - the data group
group.field - the name of the field used for grouping
group.value - the field value for this group.

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

series.negativeColor

String

Color to use for bars with negative values.

Applicable only to bar and column series.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "column",
    series: [{
        data: [10, -5, 8, -12],
        negativeColor: "red"
    }]
});
</script>

series.notes

Object

The series notes configuration.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    type: "line",
    series: [{
        data: [10, 15, 8, 12],
        notes: {
            data: [{
                value: 15,
                text: "Peak Value"
            }],
            icon: {
                background: "orange"
            }
        }
    }]
});
</script>

series.opacity

Number

The series opacity.

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

series.overlay

Object

The effects overlay.

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

series.padding

Number

The padding around the chart (equal on all sides).

Available for pie series.

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

series.size

Number

The size (or radius) of the series in pixels. If not specified, the available space is split evenly between the series.

Available for only.

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

series.spacing

Number

Space between points as proportion of the point width.

Available for bar and column series.

Default: 0.4

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

series.stack

Boolean|String|Object

A Boolean value indicating if the series should be stacked. A string value is interpreted as series.stack.group.

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

Stack settings of the first series are applied to the rest of the series.

Default: false

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

series.startAngle

Number

The start angle of the first segment.

Available for pie series.

Default: 90

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

series.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 "line".

Default: "normal"

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

series.target

Object

The target of the bullet chart.

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

series.targetField

String

The data field containing the target value.

Available for bullet and verticalBullet series.

Available for pie series

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    series: [{
        type: "bullet",
        targetField: "target",
        currentField: "current",
        data: [
            { current: 10, target: 15 },
            { current: 8, target: 12 }
        ]
    }]
});
</script>

series.tooltip

Object

The data point tooltip configuration options.

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

series.type

String

The type of the series. Available types:

area
column (synonym: bar)
line
pie
bullet

Default: "line"

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

series.width

Number

The line width.

Available for line series

Default: 0.5

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

series.zIndex

Number

An optional Z-index that can be used to change the default stacking order of series.

The series with the highest Z-index will be placed on top.

Series with no Z-index will use the default stacking order based on series type. For example line series will be on top with bar and area following below.

<div id="sparkline"></div>
<script>
    $("#sparkline").kendoSparkline({
      series: [{
        type: "line",
        zIndex: 1,
        color: "grey",
        data: [1, 2, 1, 1, 2, 1]
      }, {
        type: "line",
        color: "blue",
        zIndex: 3,
        data: [2, 2, 2, 2, 2, 2]
      }, {
        type: "area",
        color: "red",
        zIndex: 2,
        data: [0, 2, 0, 0, 2, 0]
      }]
    });
</script>

Related Members