This is a migrated thread and some comments may be shown as answers.

Donut chart - use "wasted" space

3 Answers 423 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Andy
Top achievements
Rank 1
Andy asked on 16 Nov 2015, 01:34 PM

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 #%"
        }
    });
}

3 Answers, 1 is accepted

Sort by
0
Andy
Top achievements
Rank 1
answered on 16 Nov 2015, 03:16 PM
There was an error with uploading the image. Hopefully it works this time.
0
Iliana Dyankova
Telerik team
answered on 18 Nov 2015, 09:29 AM
Hi Andy,

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

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Andy
Top achievements
Rank 1
answered on 18 Nov 2015, 09:36 AM

Perfect!

Thank you so much. 

Tags
Charts
Asked by
Andy
Top achievements
Rank 1
Answers by
Andy
Top achievements
Rank 1
Iliana Dyankova
Telerik team
Share this question
or