So im having a hard time figuring out how to set up the layout for the pie/legend positions. I want the legend to be aligned to the left, and the pie aligned to the right. 40/60 percentages -ish.
like so:
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
type: 'pie',
},
credits: {
enabled: false
},
title: {
text : '',
},
plotOptions: {
pie: {
shadow: false,
borderWidth: 0
}
},
tooltip: {
enabled: false
},
series: [{
data: [
{
name: "first",
y: 23
},
{
name: "second",
y: 8
},
{
name: "third",
y: 11
},
{
name: "fourth",
y: 11
},
{
name: "fifth",
y: 47
}
],
size: '100%',
innerSize: '67%',
showInLegend: true,
dataLabels: {
enabled: false
}
}]
})
So im having a hard time figuring out how to set up the layout for the pie/legend positions. I want the legend to be aligned to the left, and the pie aligned to the right. 40/60 percentages -ish.
like so:
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
type: 'pie',
},
credits: {
enabled: false
},
title: {
text : '',
},
plotOptions: {
pie: {
shadow: false,
borderWidth: 0
}
},
tooltip: {
enabled: false
},
series: [{
data: [
{
name: "first",
y: 23
},
{
name: "second",
y: 8
},
{
name: "third",
y: 11
},
{
name: "fourth",
y: 11
},
{
name: "fifth",
y: 47
}
],
size: '100%',
innerSize: '67%',
showInLegend: true,
dataLabels: {
enabled: false
}
}]
})
- 1 share your code that you have tried – Bhushan Kawadkar Commented Jun 2, 2014 at 12:43
- Its just a basic init of a donut pie.. – mistenkt Commented Jun 2, 2014 at 12:51
1 Answer
Reset to default 15How about just adding the legend to the chart options, as stated by the API?
legend: {
align: 'left',
layout: 'vertical',
verticalAlign: 'top',
x: 40,
y: 0
}
which renders this:
the rest you can do with CSS styling