This article is an example of a donut Kendo Chart Component. The framework used is Kendo UI for jQuery. Strangely enough, a 0% value isn't displayed by a donut Kendo Chart but is displayed by a pie Kendo Chart. In this example, we will make the donut Kendo Chart display the 0% value.
Before we go straight to the solution, let us see the problem first. Set the "North America" value to 0, value: 0 and make sure the type is "donut", type: "donut".
We should have something like below:
 |
| Donut Kendo Chart Missing 0% |
Now, keep everything the same and change the type to pie, type: "pie" and we should have something like below:
 |
| Pie Kendo Chart Showing 0% |
See the difference? On a pie Kendo Chart, 0% is shown. On a donut Kendo Chart, 0% isn't shown. Even though they have the same values. Don't ask me why because I don't know the reason behind it. Fortunately, we can trick the Kendo Chart into showing the 0% value.
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.
| <!-- https://jpllosa.blogspot.com/ --> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Kendo Donut Chart With 0% Example</title> | |
| <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css" /> | |
| <script src="https://kendo.cdn.telerik.com/2021.2.616/js/jquery.min.js"></script> | |
| <script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script> | |
| </head> | |
| <body> | |
| <div id="chart"></div> | |
| <script> | |
| $(document).ready(function() { | |
| $("#chart").kendoChart({ | |
| theme: 'material', | |
| title: { | |
| position: "bottom", | |
| text: "Share of Internet Population Growth" | |
| }, | |
| legend: { | |
| visible: true | |
| }, | |
| seriesDefaults: { | |
| type: "donut", | |
| // type: "pie", // kendo-pie-chart-showing-0-percent.png | |
| startAngle: 150 | |
| }, | |
| series: [{ | |
| name: "2012", | |
| data: [{ | |
| category: "Asia", | |
| value: 53.8, | |
| },{ | |
| category: "Europe", | |
| value: 16.1, | |
| },{ | |
| category: "Latin America", | |
| value: 11.3, | |
| },{ | |
| category: "Africa", | |
| value: 9.6, | |
| },{ | |
| category: "Middle East", | |
| value: 5.2, | |
| },{ | |
| category: "North America", | |
| // value: 0, // kendo-donut-chart-missing-0-percent.png | |
| value: 0.001, | |
| }], | |
| labels: { | |
| visible: true, | |
| background: "transparent", | |
| position: "outsideEnd", | |
| template: "#= category #: \n #= kendo.toString(value, '0.0') + '%'#", | |
| }, | |
| }], | |
| tooltip: { | |
| visible: true, | |
| template: "#= value!=0.001 ? value : '0' #", | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
The trick is to change the value to something way below zero. In our example it is 0.001. So we set "North America" to value: 0.001. And then handle the tool tip and label by adding some template logic. Don't forget to set type: "donut". This is how it looks now:
 |
| Donut Kendo Chart Showing 0% |
There you have it. A quick and simple example of a Kendo Donut Chart with 0%.
