I am using ZingChart to create a PieChart. I am having problems with the legend. One of my series
(pie slice) has a multiline legendText
while the other two have a standard one-line legendText
. This messes up the legend because now all three items have a huge height and thus creating unnecessary empty space between the legend items and thus making the whole legend way too tall.
Here is my config:
{
graphset: [
{
type: 'pie',
plotarea: {
margin: 0,
padding: 0
},
series: [
{
values: [100000],
legendText: 'ITEM1'
},
{
values: [550000],
legendText: 'ITEM2nlinenlinenlinenlinenlinenlinenlinenlinenline'
},
{
values: [20000],
legendText: 'ITEM3'
}
],
scaleR: { // set starting point at the top
refAngle: 270 // relative to the starting 90 degree position.
},
legend: {
adjustLayout: true,
align: 'right',
verticalAlign: 'middle',
layout: 'x1',
borderWidth: 0,
alpha: 0,
marker: {
type: 'square'
},
}
},
]
}
and here is the resulting plot:
Notice the large space between the legend items 1 and 2. How can I get rid of this?
How can I solve this issue?
Use layout:float to prevent the legend entries from spreading too far apart and add some height on the legend > item property as I’ve done in this demo.
1