Highcharts Legend issue: I Wanted to make Legend 100% width and text center align it works fine in crome but it is not aligned center in firefox

Question

try https://jsfiddle.net/74cgu6pm/7 on both crome and firefox you will get to know the issue.legend: { width:'100%' },

why not remove this propertirs from legend? By default it'll be centered. It should be a bug when use firefox — Fabio Ribeiro de Carvalho, Jul 28 '21 at 10:29
Actually, it is centered by default. Can you see any difference? https://jsfiddle.net/BlackLabel/gauk938v/ — Sebastian Wędzel, Jul 28 '21 at 12:05
Actually because of some reason, I wanted it to the full with by default it is half of the width.so I wanted to with width:100% — jayanti khutwad, Jul 28 '21 at 15:41

score 1 · Accepted Answer · answered Jul 29 '21 at 06:56

If you want full width and center the legends, you can use custom legends with HTML & CSS and use CSS properties to style them

display: flex;
justify-content: space-around;

Otherwise use itemDistance property of Highcharts

legend: {
        itemDistance: 100
    },

1 Answers1