kendo ui chart legends overlapping with chart

Question

i have a kendo ui datawiz(chart) component which i use it in mobile and i have a problem displaying the cart fully when there is lots of data..the legend seems to be overlapping with the chart..below is the code that i'm using..is there any configuration that i need to change so that the legend does not overlap with the chart..

$("#chart").kendoChart({
                    title: {
                        text: applicationData.selectedKPI.descr,
                        color: '#00337f',
                        font: "bold 16px  Segoe UI,sans-serif"

                    },
                    seriesDefaults: {
                        type: applicationData.selectedKPI.chartType
                    },
                    chartArea: {
                        background: '#c5deca'
                    },
                    legend: {
                        visible: true,
                        position: "bottom",
                        offsetX: 20,
                        offsetY: 15,
                        labels: {
                            //font: "9px Arial,Helvetica,sans-serif"
                        },

                    },
                    dataSource: {
                        data: applicationData.selectedKPI.chartData
                    },
                    series: [{
                        field: "series",
                        startAngle: 40,
                        categoryField: "categories",
                        labels: {
                            visible: true,
                            background: "transparent",
                            //position: "outsideEnd",  
                            //template: "#= value#",
                            format: applicationData.selectedKPI.valAxisFmt,
                            padding: -10,
                            margin: 10
                            //font: "9px Arial,Helvetica,sans-serif"                            
                        }
                    }],
                    categoryAxis: {
                        categories: applicationData.selectedKPI.chartCategories,
                        majorGridLines: {
                            visible: false
                        },
                        labels: {
                            rotation: getCatRot(applicationData.selectedKPI.chartType)
                        }
                    },
                    valueAxis: {
                        labels: {
                            step: 3,
                            rotation: getValRot(applicationData.selectedKPI.chartType),
                            format: applicationData.selectedKPI.valAxisFmt
                        }
                    },
                    tooltip: {
                        visible: true,
                        format: "{0}"

                    }
                }).data("kendoChart");

i have faced this problem,and the solution that i came up with was to implement chart drilling.When clicked upon a certain area i used to get data related to that area and refresh the chart. — Surya Deepak

Vaibhav Vaibhav · Accepted Answer · 2014-08-11T11:26:05

You can just add some rotation to the chart legends. Instead of showing legends into horizontal line you can move them to some angle like 320.The piece of code you need to use for that, is just add following property to labels object like this:

legend: {
    visible: true,
    position: "bottom",
    offsetX: 20,
    offsetY: 15,
    labels: {
        //font: "9px Arial,Helvetica,sans-serif"
    }
}

kendo ui chart legends overlapping with chart

2 Answers