Highcharts JS remove tips & squared legends for linear chart

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',
    },
  },

Answer

I’m not 100% satisfied with my solution, but I honestly found no other approach.

1.) Try the property tickInterval. With that you should be able to reduce the space between the axis ticks. (Example also in the jsfiddle). Link to the doc

2.) It is possible to overwrite the legend symbol function and draw the label icon 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
    });
});

Link to the jsfiddle

---

Addition: It is also possible to overwrite the markers with an icon, the icon will also be displayed in the legend. The downside is, if you disable the markers, also the legend symbol will be disabled.

I found that solution in the Highcharts-Forums -> to the Topic.

---

Edit 20. Mai 2022

Added link to the new jsFiddle with new styled legend symbols. Add link to SVG Path-Editor tool, to simply modify SVG-Paths.

Link to new jsfiddle with square round borders

Amazing SVG Path-Editor from GitHub user Yqnn

  this.legendLine.attr({
           d: ['M', 2, 2, 'L', 5, 2, 'C', 7, 2, 7, 2, 7, 4, 'L', 7, 7, 'C', 7, 9, 7, 9, 5, 9, 'L', 2, 9, 'C', 0, 9, 0, 9, 0, 7, 'L', 0, 4, 'C', 0, 2, 0, 2, 2, 2]
    }).attr({
        'stroke-width': 7
    });
});