Q:

Highcharts Custom SVG Marker Symbol is Shaped Different in Legend

the custom SVG marker symbol I have drawn is rendered differently in the legend than in the chart. I have drawn the marker that I need for the chart but in the legend, the symbol has a thin line to the left. 
I have attached a picture below and will include the code, I have spent too much time on this and don't have anyone to ask on this topic. If anyone can help me out, it would be greatly appreciated.

function renderChart(data, startRange, endRange) {
    // Create custom marker
    Highcharts.SVGRenderer.prototype.symbols.lineBar = function (x, y, w, h) {
      return ['M', x + w / 2, y + h / 2, 'L', x + w + 10, y + h / 2, 'z'];
    };

    if (Highcharts.VMLRenderer) {
      Highcharts.VMLRenderer.prototype.symbols.lineBar = Highcharts.SVGRenderer.prototype.symbols.lineBar;
    }

    var chart = Highcharts.chart({
      chart: {
        renderTo: 'system-load-scheduler',
        type: 'line',
      },
      navigation: {
        buttonOptions: {
          enabled: false
        }
      },
      title: {
        text: ''
      },

      yAxis: {
        min: 0,
        title: {
          text: 'Tasks'
        },
        labels: {
          style: {
            color: 'blue'
          }
        },
        categories: generateCategories(data),
      },

      xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
          day: '%b %d'
        },
        title: {
          text: 'Date'
        }
      },

      tooltip: {
        headerFormat: '<b>{series.name}</b><br>',
        pointFormat: 'Scheduled {point.x:%b. %e} at {point.x:%l:%M%P}'
      },

      plotOptions: {
        line: {
          marker: {
            enabled: true
          }
        },

        series: {
          cursor: 'pointer',
          stickyTracking: false,
          marker: {
            states: {
              hover: {
                radiusPlus: 0,
                lineWidthPlus: 1,
                halo: {
                  size: 0
                }
              }
            }
          },
          states: {
            hover: {
              halo: {
                size: 0
              }
            }
          }
        }
      },

      legend: {
        enabled: true,
        symbolPadding: 20
      },

      series: generateSeries(data, startRange, endRange)
    });
    chart.yAxis[0].labelGroup.element.childNodes.forEach(function (label) {
      label.style.cursor = 'hand';
      label.onclick = function () {
        var idx = ctrl.allTaskNames.indexOf(this.textContent);
        renderTaskInfo(ctrl.data[idx]);
        ctrl.scheduler.taskIdx = idx;
        ctrl.backService.saveObject(CTRL_DASHBOARD_SCHEDULER_STR, ctrl.scheduler);
      };
    });

    return chart;
  }

A:

You can erase the line with just some CSS code 
.highcharts-legend .highcharts-graph {
  display:none;
}

Fiddle

