Bar chart - legend symbol

by klodoma

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="container" style="height: 400px; min-width: 600px"></div>


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

JavaScript

Highcharts.setOptions({
  "exporting": {
    "enabled": false
  },
  "colors": ["#c5292e", "#5c92ca", "#e9a127", "#6e8f55", "#37ab92", "#dfe5ea", "#869da3", "#ebf1f5", "#264a64", "#20cb8f"],
  "tooltip": {
    "enabled": false
  },
  "chart": {
    "backgroundColor": "transparent",
    "borderWidth": 0,
    "plotShadow": false,
    "plotBorderWidth": 0
  },
  "title": {
    "style": {
      "color": "#ffffff",
      "fontSize": "36px",
      "fontFamily": "InterFace",
      "fontWeight": "normal",
      "fontStyle": "normal"
    }
  },
  "subtitle": {
    "style": {
      "color": "#d8d8d8",
      "fontSize": "20px",
      "fontFamily": "InterFace",
      "fontWeight": "normal",
      "fontStyle": "normal"
    }
  },
  "plotOptions": {
    "series": {
      "stacking": false,
      "enableMouseTracking": false,
      "dataLabels": {
        "allowOverlap": true
      }
    },
    "pie": {
      "depth": 100,
      "showInLegend": true
    }
  }
});
let chart = Highcharts.chart('container', {
  "title": {
    "style": {
      "color": "#ffffff",
      "fontSize": "36px",
      "fontFamily": "InterFace",
      "fontWeight": "normal",
      "fontStyle": "normal"
    },
    "align": "left",
    "text": "Title",
    "useHTML": true,
    "margin": 0,
    "x": 0
  },
  "subtitle": {
    "style": {
      "color": "#d8d8d8",
      "fontSize": "20px",
      "fontFamily": "InterFace",
      "fontWeight": "normal",
      "fontStyle": "normal"
    },
    "align": "right",
    "text": "",
    "useHTML": true,
    "margin": 0
  },
  "credits": {
    "enabled": true,
    "style": {
      "color": "#ffffff",
      "opacity": 0.5,
      "fontSize": "11px"
    },
    "position": {
      "align": "right",
      "x": 0,
      "verticalAlign": "bottom",
      "y": 0
    },
    "text": ""
  },
  "legend": {
    "enabled": true,
    "align": "left",
    "verticalAlign": "top",
    "layout": "vertical",
    "floating": true,
    "x": 84,
    "y": 60,
    "backgroundColor":...