Highcharts JS remove tips & squared legends for linear chart

Question

TL;DR - want my highcharts chart to look the same as Shopify's

I'm trying to achieve two things that I have found no answer for in the docs, literally tried everything

1. I want to remove the gridlines tips that are being rendered for each entry
2. Have the legend symbol be a square (I have tried the symbolRadius, but I want to remove the line in there as well) — basically nothing that I've tried works for a line chart

⬇️

Here are the xAxis & legend properties:

  xAxis: {
    categories: categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mar', 'May', 'Jun', 'Jul'],
    labels: {
      formatter: function () {
        return moment(this.value).isValid() ? moment(this.value).format('MMM DD') : this.value
      },
      step: getLabelStepBasedOnCategories(categories),
      staggerLines: 1,
      style: {
        color: '#637381',
      },
    },
    crosshair: {
      width: 4.3,
      color: '#DFE3E8',
    },
    gridLineDashStyle: 'dash',
    gridLineWidth: 1,
    gridLineColor: '#DFE3E8',
    tickmarkPlacement: 'inside',
    startOnTick: true,
    endOnTick: true,
  }
  legend: {
    symbolHeight: 12,
    symbolWidth: 12,
    symbolRadius: 3,
    itemDistance: 8,
    align: 'right',

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