CODEWITHSUNDEEP
highcharts
daxu
daxu

Reputation: 4124

in highcharts, how can I align legend symbol and legend text?

As you can see in the jsfiddle example, the legend symbol is not aligned with the legend text. Is there a way to set some padding or margin so the text can be vertically aligned to top or something?

http://jsfiddle.net/daxu/md2zk/62/

                legend: {
                    layout: 'vertical',
                    itemMarginTop: 20,
                    symbolHeight: 5,
                    symbolWidth:5,
                    itemStyle: {
                        color: 'black',
                        fontFamily: 'DINPro',
                        fontSize: '7.8409px',
                        fontWeight: 'normal',
        display:'inline-block',
                        verticalalign:'top'
                    },
                    align: 'right',
                    verticalAlign: 'middle',
                    floating: false,
                    x: 0,
                    y: 0
                },

Upvotes: 2

Views: 3465

Answers (2)

user5795810
user5795810

Reputation: 21

You have to set both legend: {useHTML:true, itemStyle: {lineHeight:"10px"}} The lineHeight will change the text alignment to what you need. it worked in my case for horizontal legend. See http://jsfiddle.net/md2zk/176/

Upvotes: 2

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

Set useHTML flag as true in the legend.

Example: http://jsfiddle.net/md2zk/63/

Upvotes: 1

Related Questions