state Object

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.

Example - configure the initial state of the ChartWizard

Open In Dojo
<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>
In this article