javascriptangularhighchartslegendangular2-highcharts

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

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

Solution

  • 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
    },