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:

                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 *

This site uses Akismet to reduce spam. Learn how your comment data is processed.