[Solved] Donut chart - use "wasted" space

[Andy]

I have a defined amount of space for a column chart and a donut chart. The column chart uses the available space properly but the donut doesn't scale to 100% percent of the height nor width.

I've highlighted the available area on the attached screenshot. Is there anything else I have to disable in order to use all the space?

 Here's to javascript code I use to create the chart:

function createDonutChart(chartId, green, red) {
    $("#" + chartId).kendoChart({
        legend: {
            visible: false
        },
        chartArea: {
            background: "",
            margin: 0
        },
        seriesDefaults: {
            labels: {
                visible: false
            },
            type: "donut",
            holeSize: 50,
            overlay: { "gradient": "none" },
            startAngle: 90
        },
        series: [{
            name: "Availability",
            data: [{
                category: "Available",
                value: green,
                color: "#34ae93"
            }, {
                category: "Unavailable",
                value: red,
                color: "#bb0d4a"
            }],
        }],
        tooltip: {
            visible: true,
            template: "#= category #: #= value #%"
        }
    });
}

[Andy]

There was an error with uploading the image. Hopefully it works this time.

[Iliana Dyankova]

Hi Andy,

To achieve you should set series.padding For your convenience here is a dojo.

Regards,
Iliana Nikolova
Telerik

 

 

[Andy]

Perfect!

Thank you so much.