Aligning pie chart to top of the control

[Jason]

Hi there,

I'm in the process of evaluating KendoUI controls as a replacement for what we're using currently and am just now looking at the pie chart control (have a need in a current project). The problem I'm running into is I need to have 3 charts side by side and each has a different number of items in the legend, all of varying lengths. The chart diagram itself seems to center align and the legend seems to align to the bottom of the control. What I want to happen is the diagrams to all line up and the tops of the legends to line up. I've attached a screenshot to illustrate (top is what it does, bottom is what I want it to do). Is there some way to change the alignment of the different elements of the control?

My code is:

<div style="width: 250px; float: left; vertical-align: top; margin: 0 0 auto 0;">
    <div id="statuschart"></div>
</div>
<div style="width: 250px; float: left; vertical-align: top; margin: 0 0 auto 0;">
    <div id="companychart"></div>
</div>
<div style="width: 250px; float: left; vertical-align: top; margin: 0 0 auto 0;">
    <div id="divisionchart"></div>
</div>

<script>
    $('#statuschart').kendoChart({
        name: "StatusChart",
        chartArea: { background: "transparent" },
        title: { text: "Facility Status" },
        series: [{
            type: "pie",
            data: [
                { category: "Active", value: 25 },
                { category: "Abandoned", value: 35 },
                { category: "Done", value: 40 }
            ],
            size: 150
        }],
        legend: { position: "bottom" }
    });
    $('#companychart').kendoChart({
        name: "CompanyChart",
        chartArea: { background: "transparent" },
        title: { text: "Top Companies" },
        series: [{
            type: "pie",
            data: [
                { category: "Active111111111111", value: 25 },
                { category: "Abandoned11111111111", value: 35 },
                { category: "Done11111111", value: 40 }
            ],
            size: 150

        }],
        legend: { position: "bottom" }
    });
    $('#divisionchart').kendoChart({
        name: "DivisionChart",
        chartArea: { background: "transparent" },
        title: { text: "By Division" },
        series: [{
            type: "pie",
            data: [
                { category: "Active111111111111", value: 25 },
                { category: "Abandoned11111111111", value: 35 },
                { category: "Done111111111111", value: 15 },
                { category: "Another1111111111", value: 15 },
                { category: "One1111111111", value: 10 }
            ],
            size: 150

        }],
        legend: { position: "bottom" }
    });
</script>

The styling on the divs is just several things I've tried that I thought I'd leave in there.

Any help would be greatly appreciated,
Jason

[Iliana Dyankova]

Hello Jason,

In order to achieve the desired result you could set custom position for the charts' legends and adjust the offsetX and offsetY options for each of the charts.

Regards,
Iliana Nikolova
Telerik

[Jason]

Hi Iliana,

I've finally had a few minutes to get back to this. Changing the custom position of the legend allows me to line up the legends but then the charts themselves center in the entire chart space (with the legend over top of them). I've attached a screenshot.

The code I'm using is:

<div style="width: 250px; height: 300px; float: left; vertical-align: top; margin: 0 0 auto 0;">
    <div id="statuschart"></div>
</div>
<div style="width: 250px; height: 300px; float: left; vertical-align: top; margin: 0 0 auto 0;">
    <div id="companychart"></div>
</div>
<div style="width: 250px; height: 300px; float: left; vertical-align: top; margin: 0 0 auto 0;">
    <div id="divisionchart"></div>
</div>

<script>
    $('#statuschart').kendoChart({
        name: "StatusChart",
        chartArea: { background: "transparent" },
        title: { text: "Facility Status" },
        series: [{
            type: "pie",
            data: [
                { category: "Active", value: 25 },
                { category: "Abandoned", value: 35 },
                { category: "Done", value: 40 }
            ],
            size: 150
        }],
        legend: {
            position: "custom",
            offsetX: 70,
            offsetY: 200
        }
    });
    $('#companychart').kendoChart({
        name: "CompanyChart",
        chartArea: { background: "transparent" },
        title: { text: "Top Companies" },
        series: [{
            type: "pie",
            data: [
                { category: "Active111111111111", value: 25 },
                { category: "Abandoned11111111111", value: 35 },
                { category: "Done11111111", value: 40 }
            ],
            size: 150

        }],
        legend: {
            position: "custom",
            offsetX: 70,
            offsetY: 200
        }
    });
    $('#divisionchart').kendoChart({
        name: "DivisionChart",
        chartArea: { background: "transparent" },
        title: { text: "By Division" },
        series: [{
            type: "pie",
            data: [
                { category: "Active111111111111", value: 25 },
                { category: "Abandoned11111111111", value: 35 },
                { category: "Done111111111111", value: 15 },
                { category: "Another1111111111", value: 15 },
                { category: "One1111111111", value: 10 }
            ],
            size: 150

        }],
        legend: {
            position: "custom",
            offsetX: 70,
            offsetY: 200
        }
    });
</script>

 Is there a way to change where the chart diagram itself is located?

Thanks,
Jason

[Iliana Dyankova]

Hi Jason,

You could control where the chart diagram itself is positioned via the title's margin / padding. For your convenience here is a simple jsBin example which demonstrates the suggested approach in action - please check it and let me know if this fits your requirements. 
 
Regards,
Iliana Nikolova
Telerik

[Jason]

Hi Iliana,
I haven't had a chance to try that in my own project but it definitely looks like it works.
Thank you very much,
Jason