What I want to achieve is changing the colour of a group on a series based on its category. I have an example below.

So if "Group 1" had a sub group value of "B" the colour is set based on that combination. And that colour might be different to "Group 2" + "B".

So I have data in this format 

{

name: health

data:[[1,2],[2,2],[3,4]]

type:"area"

visible:true

},

{

name: health2

data:[[1,2],[2,2],[3,4]]

type:"line"

visible:true

}
I have attached a screenshot of what i want to achieve need guidance to do this I'm new to kendo .

While following the telerik example of how to set the position of the x and x axis labels on a chart (link below) Visual Studio gives me an error "'position' does not exist in type 'ChartYAxisItemLabels'".

 I checked the kendo.all.d.ts (version v2023.1.314) file that is referenced by my project and the interface is defined as follows:

    interface ChartYAxisItemLabels {
        background?: string | undefined;
        border?: ChartYAxisItemLabelsBorder | undefined;
        color?: string | undefined;
        culture?: string | undefined;
        dateFormats?: ChartYAxisItemLabelsDateFormats | undefined;
        font?: string | undefined;
        format?: string | undefined;
        margin?: number | ChartYAxisItemLabelsMargin | undefined;
        mirror?: boolean | undefined;
        padding?: number | ChartYAxisItemLabelsPadding | undefined;
        rotation?: number | ChartYAxisItemLabelsRotation | undefined;
        skip?: number | undefined;
        step?: number | undefined;
        template?: string|Function | undefined;
        visible?: boolean | undefined;
        visual?: Function | undefined;
    }

Adding the following line to the interface resolves the VS error and allows the TypeScript to compile and, when implemented, does move the axis labels to the "start" position just like in the telerik dojo example.

        position?: string | undefined;

My question is; Why is the position setting not provided on the TypeScript interface to begin with?

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/xaxis.labels#xaxislabelsposition

Hi,

I have a licensed kendo 2019 version in my application. Since Kendo provides individual scripts to include rather than the entire library ,I have the required  Chart Scripts in my ASP.NET MVC application.

I have upgraded the version from 2019 to the latest 2023.1.314. The 2023 upgrade includes a lot of breaking changes that includes a bunch of individual .js files. In summary, now it only needs to have:

• Theme based css (default-main.css)
• Jquery (The current version in my application is 3.6.4)
• kendo.all.min.js

Including the above 3 works as expected. However ,when using just the individual scripts for charts rather than the whole set of library which is a huge file, the kendo.drawing.js file breaks .Attachment includes the snapshot for the error.

So the question is, with the 2023 upgrade, Do I have to use kendo.all.min.js rather than using the individual scripts for just the components I have?

Hi, I have a problem like this the image,

how can I fix this labels overlap issue,'m using kendo jquery ui

Thanks...

My chart as below:

$("#myChart).kendoChart({
                chartArea: {
                    height: 50
                },
                seriesDefaults: {
                    spacing: 0,
                    gap: 0,
                    margin: 0,
                    padding: 0,
                    type: "bar",
                    stack: {
                        type: "100%"
                    }
                },
                series: [
                    {
                        labels: {
                            visible: true,
                            position: "center",
                            font: "bold 16px arial",
                            color: "black",
                            format: "{0}%",
                            template: "# if (value == 0) { #### } else if (value < 7) { ##=value## } else { ##=value#%# } #",
                            background: null
                        },
                        data: [80],
                        color: "#11fa00"
                    }, {
                        labels: {
                            visible: true,
                            position: "center",
                            font: "bold 16px arial",
                            color: "black",
                            format: "{0}%",
                            template: "# if (value == 0) { #### } else if (value < 7) { ##=value## } else { ##=value#%# } #",
                            background: null
                        },
                        data: [0],
                        color: "#0026ff"
                    }, {
                        labels: {
                            visible: true,
                            position: "center",
                            font: "bold 16px arial",
                            color: "black",
                            format: "{0}%",
                            template: "# if (value == 0) { #### } else if (value < 7) { ##=value## } else { ##=value#%# } #",
                            background: null
                        },
                        data: [0],
                        color: "yellow"
                    }, {
                        labels: {
                            visible: true,
                            position: "center",
                            font: "bold 16px arial",
                            color: "black",
                            format: "{0}%",
                            template: "# if (value == 0) { #### } else if (value < 7) { ##=value## } else { ##=value#%# } #",
                            background: null
                        },
                        data: [20],
                        color: "red"
                    }
                ],
                valueAxis: {
                    min: 0,
                    max: 1,
                    line: {
                        visible: false
                    },
                    minorGridLines: {
                        visible: false
                    }
                },
                categoryAxis: {
                    line: {
                        visible: false
                    },
                    minorGridLines: {
                        visible: false
                    }
                },
                valueAxes: {
                    visible: false,
                    majorGridLines: {
                        visible: false,
                    }
                }
            });

Please help me understand what is the difference and why this issue is happening. Thanks

Hey there, 

I am using Data query APIs to groupBy my data by priorities:

  this.piechartData = groupBy(chartData, [{field:"priority"}]);

Then I want to count the items per priority value to build the piechart. However, the aggregate="count" is not working for me. 

Is there

a way around to do this?

I used this approach for barcharts and linecharts before and it worked.

Regards,

Nazareth