Highcharts Legend Symbol Position

by klodoma

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

JavaScript

Highcharts.chart('container', {

    chart: {
        type: 'column',
        events: {
            load: function() {
                var legendItems = this.legend.allItems,
                    textBbox,
                    symbolBbox;

                legendItems.forEach(function(item) {
                    textBbox = item.legendItem.getBBox();
                    symbolBbox = item.legendSymbol.getBBox();
                    
                    item.legendSymbol.attr({
                        y: textBbox.y + (textBbox.height - symbolBbox.height) / 2
                    });
                });
            }
        }
    },

    title: {
        text: 'Round legend symbols'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr']
    },

    legend: {
        align: "left",
        verticalAlign: "top",
        layout: "vertical",
        floating: true,
        x: 80,
        y: 40,

        symbolHeight: 25,
        symbolRadius: 0,

        "itemStyle": {
            "color": "#000",
            "fontSize": "20px",
            "fontFamily": "Arial",
            "fontWeight": "bold",
            "fontStyle": "normal"
        }
    },

    series: [{
        data: [1, 3, 2, 4]
    }, {
        data: [6, 4, 5, 3]
    }, {
        data: [2, 7, 6, 5]
    }]

});