Kendo UI Chart Legend Overlaps with the Plot area and the pie numbers

I kept running into an issue where the chart kept drawing over itself. Basically, the chart would draw the lines and numbers that extend from the pie area and overlap the legend at the bottom. It did it when I had it on the right as well. This is stupid, and stupid I had to use a workaround, but here is the workaround.

My style. Edit as you need for yours.

        .chart-wrapper, .chart-wrapper .k-chart
        {
            height: 300px;
            width: 325px;
            margin-bottom: 20px;
        }

The code I had to add to my chart create:

 $(phaseContainerId).kendoChart({
                title: {
                    position: "bottom",
                    visible: false

                },
                legend: {
                    visible: true,
                    offsetX: -0,
                    offsetY: 20,
                    position: 'bottom'
                }
                ,........

I also added the following to avoid clipping, which can happen.

 chartArea: {
                    background: "",
                    margin: { top: 30, left: 5, right: 5, bottom: 15 }, padding: { top: 10, left: 10, right: 10, bottom: 10 }
                },

Notice the offset. That moves the legend around. You may need to play with the numbers depending on your font and other design choices.

Happy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *