highcharts - legend labelFormatter: getting space between name and percentage so they line up

Question

I'm trying to use HighCharts 2.3.5 to get names and percentages to line up in a legend.

Right now the legend looks like this:

symbol aValue aPercentage
symbol somethingElse aPercentage
symbol v aPercentage

What I want is this:

symbol aValue         aPercentage
symbol somethingElse  aPercentage
symbol v              aPercentage

I've resorted to something that sure seems hacky. I set left:0px;right:0px; and then add some nbsps. The div ends up looking like this:

<div style="left:0px;top:0px;display:inline-block;position:absolute;">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;44.7%
</div>

Is there a better way to do this?

Thanks!

Answer 1

Thanks for the suggestions. By accident I found this: HighCharts Pie Chart Legend value alignment

That fiddle and the floating solved it.

Answer 2

您可以为图例项设置宽度：

http://api.highcharts.com/highcharts#legend.itemWidth

Answer 3

使用图例项格式化程序 alonwithe 选项useHTML: true

使用 formatter 函数，您可以返回 html 代码。您可以根据需要构建图例项目。