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

State.series

configuration

The configuration of the chart series.

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.

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.

state.series

Array

<div id="chart-wizard"></div>
<script>
$("#chart-wizard").kendoChartWizard({
    state: {
        series: [{
            name: "Sales",
            data: [100, 150, 200],
            type: "column"
        }, {
            name: "Profit",
            data: [20, 30, 40],
            type: "line"
        }]
    }
});
</script>

state.series.categoryField

String

The data item field which contains the category name or date.

The points will be rendered in chronological order if the category is a date.

Default: "category"

<div id="chart-wizard"></div>
<script>
$("#chart-wizard").kendoChartWizard({
    state: {
        series: [{
            categoryField: "month",
            data: [
                { month: "Jan", value: 100 },
                { month: "Feb", value: 150 }
            ]
        }]
    }
});
</script>

state.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.

<div id="chart-wizard"></div>
<script>
$("#chart-wizard").kendoChartWizard({
    state: {
        series: [{
            color: "#ff6600",
            data: [100, 150, 200]
        }]
    }
});
</script>

state.series.data

Array

The array of data items which represent the series data.

Can be set to :

Array of objects. Each point is bound to the field specified via the series.field option.
Array of numbers. Supported when the series.type option is set to "bar", "column", "pie", or "line".
Array of arrays of numbers. Supported when the series.type option is set to "scatter".
Scatter and scatter line series need arrays of two values - X value and Y value

<div id="chart-wizard"></div>
<script>
$("#chart-wizard").kendoChartWizard({
    state: {
        series: [{
            data: [
                { quarter: "Q1", sales: 100 },
                { quarter: "Q2", sales: 150 },
                { quarter: "Q3", sales: 200 }
            ]
        }]
    }
});
</script>

The data item field which contains the series value. The field name should be a valid Javascript identifier and should contain only alphanumeric characters (or "$" or "_"), and may not start with a digit.

Default: "value"

<div id="chart-wizard"></div>
<script>
$("#chart-wizard").kendoChartWizard({
    state: {
        series: [{
            field: "revenue",
            name: "Monthly Revenue"
        }]
    }
});
</script>

state.series.labels

Object

The chart series label configuration.

The chart displays the series labels when the series.labels.visible option is set to true.

<div id="chart-wizard"></div>
<script>
$("#chart-wizard").kendoChartWizard({
    state: {
        series: [{
            labels: {
                visible: true,
                format: "{0:C}",
                color: "blue"
            }
        }]
    }
});
</script>

state.series.name

String

The name of the chart series which is visible in the legend.

<div id="chart-wizard"></div>
<script>
$("#chart-wizard").kendoChartWizard({
    state: {
        series: [{
            name: "Monthly Sales",
            data: [100, 150, 200]
        }]
    }
});
</script>

state.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", or "line". All series in the stack must be of the same type.

Stack settings of the first series are inherited as a default value by the rest of the series, in case they are not overridden.

Default: false

<div id="chart-wizard"></div>
<script>
$("#chart-wizard").kendoChartWizard({
    state: {
        series: [{
            stack: {
                type: "100%"
            }
        }]
    }
});
</script>

state.series.type

String

The type of the series.

The supported values are:

Default: "column"

<div id="chart-wizard"></div>
<script>
$("#chart-wizard").kendoChartWizard({
    state: {
        series: [{
            type: "line",
            data: [100, 150, 200]
        }]
    }
});
</script>

state.series.width

Number

The line width.

The width option is supported when series.type is set to "line".

<div id="chart-wizard"></div>
<script>
$("#chart-wizard").kendoChartWizard({
    state: {
        series: [{
            type: "line",
            width: 4,
            data: [100, 150, 200]
        }]
    }
});
</script>

Related Members