Kendo Donut Chart With Borders Example

This article is an example of a Kendo Chart Component with borders. The framework used is Kendo UI for jQuery.

Suppose we have a highly customizable widget that displays a donut Kendo Chart with borders and background colors. Let's just imagine that there is an admin page where you can input the desired background color and border for the widget. Okay? So, we'll have something like below.

Kendo Chart Overlapping Borders

As you can see, the borders are being overlapped by the chart. This does not look good. Now this can easily be fixed by setting the chartArea.background to transparent. Like what you see below. But the tricky part is this is a highly customizable widget wherein the the container and the donut Kendo Chart area can have different colors. What are we going to do?

Kendo Chart Transparent Chart Area

Here is our solution. You can edit the code below using any text editor but I prefer Visual Studio Code. Make sure you are connected to the Internet because the code pulls the Kendo library from the Telerik CDN. Take note that this is just a demonstration code and you'll need to purchase a license if you are going to use Kendo UI for jQuery for more than just evaluation purposes.

We'll need to implement the render function. In this function, we find the SVG of the chart and apply the border styling as appropriate. We should have something like below. As you can see the chart area color is different from the caption area background color. The borders are not overlapped as well. Great!

Kendo Chart with Borders

There you have it. A quick and simple example of a donut Kendo Chart with borders.