0

I have the following problem: I would like to align the text of the legend in the following way: Legend:

[Color1] Title1:---------------100.000.000€

[Color2] Title23343334:-----100.000.000€

[Color3] Title23343334:------10.000.000€

Do you know how can I do that?

cimbom
  • 259
  • 1
  • 5
  • 23

2 Answers2

2

For this you need to set useHTML: true, and define html elements in the labelFormatter function, and set the widths of those elements via CSS.

Example:

(there are numerous ways to set up the HTML and CSS to accomplish this - this is just one example)

jlbriggs
  • 17,612
  • 4
  • 35
  • 56
  • thank you for your help. But how can I adjust the CSS so that the Icon of the legend-item and the title of legend-item has no space between each other, as in the standard version? In your example I have some space, I think because of the display: inblock-property. If I delete it, the numbers are not aligned right, as in your example. – cimbom Jan 30 '15 at 11:00
  • The spacing is a matter of the margin and padding settings. Simply remove those: http://jsfiddle.net/jlbriggs/yra1rw51/10/ – jlbriggs Jan 30 '15 at 13:50
0

You can define itemWidth which define static with of each legend item.

Sebastian Bochan
  • 37,348
  • 3
  • 49
  • 75
  • I saw that this is useful when the legend layout is horizontal. I use the vertical layout, so that the legend items are one below the other. – cimbom Jan 29 '15 at 15:14
  • Let me know where the problem is when you have it vertical, because then itemWidth also can be applied. – Sebastian Bochan Jan 30 '15 at 11:21
  • Sebastion - the problem isn't the item width. The user wants a fixed width for the first part of the legend text, and then the data value for that entry aligned to the right of it. – jlbriggs Jan 30 '15 at 13:51