Kendo, TypeScript definition bug:

Question

I am creating a Kendo Chart within a TypeScript file using the syntax shown below (taken from http://demos.telerik.com/kendo-ui/bar-charts/index):

function createChart() {
            $("#chart").kendoChart({
                title: {
                    text: "Site Visitors Stats \n /thousands/"
                },
                legend: {
                    visible: false
                },
                seriesDefaults: {
                    type: "bar"
                },
                series: [{
                    name: "Total Visits",
                    data: [56000, 63000, 74000, 91000, 117000, 138000]
                }, {
                    name: "Unique visitors",
                    data: [52000, 34000, 23000, 48000, 67000, 83000]
                }],
                valueAxis: {
                    max: 140000,
                    line: {
                        visible: false
                    },
                    minorGridLines: {
                        visible: true
                    },
                    labels: {
                        rotation: "auto"
                    }
                },
                categoryAxis: {
                    categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
                    majorGridLines: {
                        visible: false
                    }
                },
                tooltip: {
                    visible: true,
                    template: "#= series.name #: #= value #"
                }
            });
        }

When I do this, I get the following error, which seems to indicate that ChartOptions is expected to be an array:

"Error 70 Argument of type '{ title: { text: string; }; legend: { visible: boolean; }; seriesDefaults: { type: string; }; ser...' is not assignable to parameter of type 'ChartOptions'. Types of property 'categoryAxis' are incompatible. Type '{ [x: number]: undefined; categories: string[]; majorGridLines: { visible: boolean; }; }' is not assignable to type 'ChartCategoryAxisItem[]'. Property 'length' is missing in type '{ [x: number]: undefined; categories: string[]; majorGridLines: { visible: boolean; }; }'."

If I modify the createChart function as shown below, the error goes away, but the chart does not render:

function createChart() {
            $("#chart").kendoChart([{ //Notice opening array bracket
                title: {
                    text: "Site Visitors Stats \n /thousands/"
                },
                legend: {
                    visible: false
                },
                seriesDefaults: {
                    type: "bar"
                },
                series: [{
                    name: "Total Visits",
                    data: [56000, 63000, 74000, 91000, 117000, 138000]
                }, {
                    name: "Unique visitors",
                    data: [52000, 34000, 23000, 48000, 67000, 83000]
                }],
                valueAxis: {
                    max: 140000,
                    line: {
                        visible: false
                    },
                    minorGridLines: {
                        visible: true
                    },
                    labels: {
                        rotation: "auto"
                    }
                },
                categoryAxis: {
                    categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
                    majorGridLines: {
                        visible: false
                    }
                },
                tooltip: {
                    visible: true,
                    template: "#= series.name #: #= value #"
                }
            }]); // And closing array
        }

Has anyone else encountered this issue? Seems to me to be a bug in the definition file?

JTW JTW · Accepted Answer · 2015-07-13T15:51:58

I was able to resolve the issue by defining the valueAxis and categoryAxis values as arrays as shown below:

function createChart() {
            $("#chart").kendoChart({
                title: {
                    text: "Site Visitors Stats \n /thousands/"
                },
                legend: {
                    visible: false
                },
                seriesDefaults: {
                    type: "bar"
                },
                series: [{
                    name: "Total Visits",
                    data: [56000, 63000, 74000, 91000, 117000, 138000]
                }, {
                    name: "Unique visitors",
                    data: [52000, 34000, 23000, 48000, 67000, 83000]
                }],
                valueAxis: [{
                    max: 140000,
                    line: {
                        visible: false
                    },
                    minorGridLines: {
                        visible: true
                    },
                    labels: {
                        rotation: "auto"
                    }
                }],
                categoryAxis: [{
                    categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
                    majorGridLines: {
                        visible: false
                    }
                }],
                tooltip: {
                    visible: true,
                    template: "#= series.name #: #= value #"
                }
            });
        }

Kendo, TypeScript definition bug:

2 Answers