Kendo UI JQuery 100% stacked horizontal chart weird issue.. if 1 of the series value 80 or more the size proportions get messed up. If the value is less than 80, then everything is fine.

[sharanraj]

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

[sharanraj]

Fixed by adding min: 0 to valueAxes

 

valueAxes: {
              min: 0,
            visible: false,
            majorGridLines: {
            visible: false,
            }
}