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

State.initialSeries

configuration

The initial series configuration of the chart.

state.initialSeries

Array

<div id="chart-wizard"></div>
<script>
$("#chart-wizard").kendoChartWizard({
    state: {
        initialSeries: [{
            name: "Sales",
            data: [
                { category: "Jan", value: 100 },
                { category: "Feb", value: 150 },
                { category: "Mar", value: 200 }
            ],
            field: "value",
            categoryField: "category",
            type: "column"
        }]
    }
});
</script>

state.initialSeries.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: {
        initialSeries: {
            categoryField: "month",
            field: "sales"
        }
    }
});
</script>

state.initialSeries.color

String

The series base color. The supported values are:

<div id="chart-wizard"></div>
<script>
$("#chart-wizard").kendoChartWizard({
    state: {
        initialSeries: {
            color: "#ff6800",
            field: "sales"
        }
    }
});
</script>

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.

state.initialSeries.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: {
        initialSeries: {
            data: [
                { category: "Q1", value: 100 },
                { category: "Q2", value: 150 },
                { category: "Q3", value: 200 },
                { category: "Q4", value: 180 }
            ]
        }
    }
});
</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: {
        initialSeries: {
            field: "sales",
            data: [
                { month: "Jan", sales: 100 },
                { month: "Feb", sales: 150 }
            ]
        }
    }
});
</script>

state.initialSeries.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: {
        initialSeries: {
            labels: {
                visible: true,
                format: "{0:C}",
                color: "red"
            }
        }
    }
});
</script>

state.initialSeries.name

String

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

<div id="chart-wizard"></div>
<script>
$("#chart-wizard").kendoChartWizard({
    state: {
        initialSeries: {
            name: "Sales Data",
            field: "sales"
        }
    }
});
</script>

state.initialSeries.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: {
        initialSeries: {
            stack: {
                type: "100%"
            }
        }
    }
});
</script>

state.initialSeries.type

String

The type of the series.

The supported values are:

Default: "column"

<div id="chart-wizard"></div>
<script>
$("#chart-wizard").kendoChartWizard({
    state: {
        initialSeries: {
            type: "line"
        }
    }
});
</script>

state.initialSeries.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: {
        initialSeries: {
            type: "line",
            width: 3
        }
    }
});
</script>

Related Members