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

State

configuration

Specifies the state of the ChartWizard component. If a state object is provided, the ChartWizard will neglect the dataSource and the creation of an initial state and will use this state instance instead.

In order to work as expected, the CharWizard requires the state object to have defined data and series fields.

state

Object

<div id="chartwizard"></div>
<script>
    $("#chartwizard").kendoChartWizard({
        window: {
                visible: true
            },
            state: {
                columns: [
                    "Product Name",
                    "Quantity",
                    "Price",
                    "Tax",
                    "Total"
                ],
                data: [
                        [{
                            field: "Product Name",
                            value: "Calzone"
                        },{
                            field: "Quantity",
                            value: 1
                        },{
                            field: "Price",
                            value: 12.39
                        },{
                            field: "Tax",
                            value: 2.48
                        },{
                            field: "Total",
                            value: 14.87
                        }],
                        [{
                            field: "Product Name",
                            value: "Neapolitana"
                        },{
                            field: "Quantity",
                            value: 2
                        },{
                            field: "Price",
                            value: 7.39
                        },{
                            field: "Tax",
                            value: 1.23
                        },{
                            field: "Total",
                            value: 8.62
                        }]
                    ],
                series: [
                    {
                        name: "Quantity",
                        type: "bar",
                        data: [
                            1
                        ],
                        stack: false,
                        labels: {
                            visible: false
                        },
                        id: 0
                    },
                    {
                        name: "Price",
                        type: "bar",
                        data: [
                            12.39
                        ],
                        stack: false,
                        labels: {
                            visible: false
                        },
                        id: 1
                    },
                    {
                        name: "Tax",
                        type: "bar",
                        data: [
                            2.48
                        ],
                        stack: false,
                        labels: {
                            visible: false
                        },
                        id: 2
                    },
                    {
                        name: "Total",
                        type: "bar",
                        data: [
                            14.87
                        ],
                        stack: false,
                        labels: {
                            visible: false
                        },
                        id: 3
                    }
                ],
                initialSeries: [
                    {
                        name: "Quantity",
                        type: "bar",
                        data: [
                            1
                        ],
                        stack: false,
                        labels: {
                            visible: false
                        },
                        id: 0
                    },
                    {
                        name: "Price",
                        type: "bar",
                        data: [
                            12.39
                        ],
                        stack: false,
                        labels: {
                            visible: false
                        },
                        id: 1
                    },
                    {
                        name: "Tax",
                        type: "bar",
                        data: [
                            2.48
                        ],
                        stack: false,
                        labels: {
                            visible: false
                        },
                        id: 2
                    },
                    {
                        name: "Total",
                        type: "bar",
                        data: [
                            14.87
                        ],
                        stack: false,
                        labels: {
                            visible: false
                        },
                        id: 3
                    }
                ],
                categoryAxis: [
                    {
                        categories: [
                            "Calzone"
                        ],
                        labels: {
                            visible: true,
                            rotation: "auto"
                        }
                    }
                ],
                valueAxis: [
                    {
                        labels: {
                            visible: true,
                            rotation: "auto"
                        }
                    }
                ],
                area: {
                    margin: {}
                },
                title: {
                    text: ""
                },
                subtitle: {
                    text: ""
                },
                stack: false,
                seriesType: "bar",
                legend: {
                    visible: true,
                    position: "bottom"
                },
                categoryField: "Product Name",
                chartArea: {
                    margin: {}
                }
            }
        });
</script>

state.area

Object

The chart area configuration options. Represents the entire visible area of the chart.

Default: (required)

<div id="chart-wizard"></div>
<script>
$("#chart-wizard").kendoChartWizard({
    state: {
        area: {
            background: "#f5f5f5",
            margin: {
                top: 20,
                right: 15,
                bottom: 25,
                left: 30
            }
        }
    }
});
</script>

state.categoryAxis

Array

The category axis configuration options.

Default: (required)

<div id="chart-wizard"></div>
<script>
$("#chart-wizard").kendoChartWizard({
    state: {
        categoryAxis: {
            labels: {
                color: "#333",
                font: "12px Arial",
                rotation: 45
            },
            title: {
                text: "Categories",
                color: "#666"
            }
        }
    }
});
</script>

state.categoryField

String

The field which represents the configuration of the series.categoryField.

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

state.columns

Array

Specifies the columns to be used for the ChartWizard component. An array of strings should be provided.

<div id="chart-wizard"></div>
<script>
$("#chart-wizard").kendoChartWizard({
    state: {
        columns: [
            "Product Name",
            "Sales",
            "Profit",
            "Region"
        ]
    }
});
</script>

state.data

Array

Specifies the data to be visualized in ChartWizard component.

ChartWizard component needs a specific type of data(ChartWizardDataRow) to work as expected. This type of data, which is an array consists of single or multiple arrays of Objects, which have the field and value properties.

<div id="chart-wizard"></div>
<script>
$("#chart-wizard").kendoChartWizard({
    state: {
        data: [
            [
                { field: "Product", value: "Widget A" },
                { field: "Sales", value: 1000 },
                { field: "Profit", value: 250 }
            ],
            [
                { field: "Product", value: "Widget B" },
                { field: "Sales", value: 1500 },
                { field: "Profit", value: 400 }
            ]
        ]
    }
});
</script>

state.initialSeries

Array

The initial series configuration of the chart.

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

Object

The chart legend configuration options.

<div id="chart-wizard"></div>
<script>
$("#chart-wizard").kendoChartWizard({
    state: {
        legend: {
            position: "bottom",
            visible: true,
            labels: {
                color: "#333",
                font: "12px Arial"
            }
        }
    }
});
</script>

state.series

Array

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.

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

String

The series type of the chart.

The supported series types are:

'column'
'bar'
'line'
'pie'
'scatter'

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

state.stack

Boolean|Object

The stack configuration of the series.

Default: false

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

state.subtitle

Object

The chart subtitle configuration options or text.

<div id="chart-wizard"></div>
<script>
$("#chart-wizard").kendoChartWizard({
    state: {
        subtitle: {
            text: "Q1-Q4 2023",
            color: "#666",
            font: "14px Arial"
        }
    }
});
</script>

state.title

Object|String

The chart title configuration options or text.

<div id="chart-wizard"></div>
<script>
$("#chart-wizard").kendoChartWizard({
    state: {
        title: {
            text: "Sales Report",
            color: "#333",
            font: "16px Arial"
        }
    }
});
</script>

state.valueAxis

Array

The value axis configuration options.

If set to true the category axis direction will be reversed. By default categories are listed from left to right and from bottom to top.

<div id="chart-wizard"></div>
<script>
$("#chart-wizard").kendoChartWizard({
    state: {
        valueAxis: {
            labels: {
                color: "#666",
                font: "12px Arial",
                format: "{0:C}"
            },
            title: {
                text: "Values",
                color: "#333"
            },
            reverse: false
        }
    }
});
</script>

state.valueField

String

The field which represents the configuration of the series.valueField.

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

Related Members