Aligning pie chart to top of the control

5 posts, 0 answers
  1. Jason
    Jason avatar
    3 posts
    Member since:
    Jun 2013

    Posted 07 Jun 2013 Link to this post

    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
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 11 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Jason
    Jason avatar
    3 posts
    Member since:
    Jun 2013

    Posted 13 Jun 2013 Link to this post

    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
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 17 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Jason
    Jason avatar
    3 posts
    Member since:
    Jun 2013

    Posted 24 Jun 2013 Link to this post

    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
Back to Top