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:
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
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
>
Any help would be greatly appreciated,
Jason