How to customize the kendo UI Donut Chart?

Question

I am trying to customize some aspects of the donut chart that I am populating with the following ASP.NET razor code:

@(Html.Kendo().Chart()
        .Name("chart")
        .ChartArea(chartArea => chartArea
            .Background("transparent"))
        .SeriesDefaults(series =>
            series.Donut().StartAngle(0)
        )
        .Series(series =>
        {
        series.Donut(new dynamic[] {
                new {category = "Asia", value = 25.0, color = "#124324" },
                new {category = "Europe",value = 25.0, color = "#90cc38"},
                new {category = "Latin America",value = 25.0, color = "#068c35"},
                new {category = "Africa",value = 25.0, color = "#006634"}
            }) ...

I searched the documentation and I can't find how to customize the following:

• Create a gap between each category
• Setting a border color per category

How to customize these aspects?

Answer 1

I finally found out how to customize these aspects.

Creating a gap between categories

By setting the explode property to true on each category it is possible to create a gap.

series.Donut(new dynamic[] {
                new {category = "Asia", value = 25.0, color = "#124324" , explode = true},
                new {category = "Europe",value = 25.0, color = "#90cc38", explode = true},
                new {category = "Latin America",value = 25.0, color = "#068c35", explode = true},
                new {category = "Africa",value = 25.0, color = "#006634", explode = true}
            }) ...

Note that this not an ideal solution since it does not allow to control the size of the gap.

Specific Border Color for each category

The javascript version of the code for the chart can be used as follows:

$("#chart").kendoChart({
                title: {
                    position: "bottom",
                    text: "Chart Title",
                },
                ...
                seriesDefaults: {
                    margin: 0,
                    type: "donut",
                    border: {
                        width: 1,
                        color: function (point) {
                            //Example
                            var color_data = {"cat1" : "blue", "cat2": "red"};
                            return color_data[point.category];
                        }
                    }
                }
                ...

The seriesDefault.border.color property can be set with a function that takes the relevant category object as an argument, it is possible then to implement logic that returns the appropriate color for each category.