Issues with HighMaps Legend

Steps to Reproduce 1. Resize the browser to change the alignment of the legends. 2. Note that the legend creates extra elements.

by Chris Vecchio

HTML

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div id="container" class="container" style="width: 50%;"></div>
<script type='text/javascript' src="https://rawgit.com/vinusv/examples/master/jquery.js"></script>
<script type='text/javascript' src="https://code.highcharts.com/maps/highcharts.js"></script>
<script type='text/javascript' src="https://code.highcharts.com/maps/modules/map.js"></script>
<script type='text/javascript' src="https://rawgit.com/vinusv/examples/master/exporting.js"></script>
<script type='text/javascript' src="https://rawgit.com/vinusv/examples/master/states.js"></script>
<script type='text/javascript' src="https://rawgit.com/vinusv/examples/master/us-map-shades.js"></script>
<script type='text/javascript' src="https://rawgit.com/vinusv/examples/master/data.js"></script>
<script type='text/javascript' src="https://rawgit.com/vinusv/examples/master/state-data.js"></script>

JavaScript

$(document).ready(function () {
		    var dataShapes = [];
		    var itemData = responseData;
		    for (var item in itemData) {
		        var dataItem = itemData[item];
		        dataItem.value = dataItem.key_property_value;
		        dataShapes.push(dataItem);

		    }

		    var options = {
		        chart: {
		            borderWidth: 0,
		            marginRight: 5,
		            zoomType: 'xy',
		            renderTo: 'container'
		        },
		        credits: {
		            enabled: false
		        },

		        title: {
		            text: ''
		        },

		        legend: {
		            layout: 'horizontal',
		            borderWidth: 0
		        },
		        exporting: {
		            enabled: false,
		            buttons: {
		                contextButtons: {
		                    enabled: false,
		                    menuItems: null
		                }
		            }
		        },


		        colorAxis: {
		            dataClasses: [{
		                to: 0,
		                color: "#bbbbbb",
		                name: 'No Data'
		            }, {
		                from: 0,
		                to: 49,
		                color: "#d40f0f",
		                name: '0-49% Compliant'
		            }, {
		                from: 50,
		                to: 79,
		                color: "#f3e220",
		                name: '50%-79% Compliant'
		            }, {
		                from: 80,
		                to: 99,
		                color: "#1e92af",
		                name: '80%-99% Compliant'
		            }, {
		                from: 100,
		                color: "#22b322",
		                name: '100% Compliant'
		            }]
		        },
		        tooltip: {
		            formatter: function () {
		                return ' <b>' + this.point.code + '</b><br />' + 'Value: ' + this.point.value + '<br />';
		            }
		        },

		        series: [{
		            data: dataShapes,
		            mapData: shapes,
		            joinBy: ['code', 'key'],
		   ...