Custom Chart Legend

With SVG Path

HTML

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

JavaScript

// Uses the legend symbol creater function and draw with svg-paths.
Highcharts.wrap(Highcharts.Series.prototype, 'drawLegendSymbol', function (proceed, legend) {
    proceed.call(this, legend);

    this.legendLine.attr({
           d: ['M', 0, 10, 'h', 0, 0, 5, 5]
    }).attr({
        'stroke-width': 10
    });
});

$(function() {

  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      type: 'line',
      symbol: 'square',
    },
    xAxis: {
      labels: {
        staggerLines: 1,
        style: {
          color: '#637381',
        },
      },
      crosshair: {
        width: 4.3,
        color: '#DFE3E8',
      },
      gridLineDashStyle: 'dash',
      gridLineWidth: 1,
      tickInterval: 10,
      gridLineColor: '#DFE3E8',
      tickmarkPlacement: 'inside',
      startOnTick: true,
      endOnTick: true,
    },
    legend: {
      align: 'center',

      itemStyle: {
        fontSize: '12px',
        color: '#6d7175',
        fontWeight: 400,
        letterSpacing: '-0.5px',
      },
    },

    plotOptions: {
      series: {
        marker: {
		      enabled: false
        }
      }
    },
    series: 
    [{
        data: [9, 5, 8, 16, 1, 5]
      },
      {
        data: [1, 2, 3, 4, 5, 10]
     }]
  });
});