How to access legendSymbols and change their shape in HighCharts

Question

I have a line chart with markers disabled. The legendSymbol is currently a line. I would like to show the symbol as a square. Any pointers?

Answer 1

You can use two series (one normal and one fake) with defined custom symbol. First should be hidden in legend. Then only what you need is use legendItemClick and call action.

http://jsfiddle.net/5m9JW/339/

Answer 2

You can change the stroke-width attribute on the path element.

We can provide functions to Highcharts that will be drawn whenever the chart is drawn. Since redraw is not called on the first drawing the load event is needed

  chart: {

      events: {
          load: function () { 
              $(".highcharts-legend-item path").attr('stroke-width', 10);
          },
          redraw: function () {
              $(".highcharts-legend-item path").attr('stroke-width', 10);
          }
      }
  },

I like this as it's quicker than than the other two answers and adding a "fake series" feels like a hack.

If you need further customization Hendrik's would be great! The original question asked for a square, if all that's really needed is a rectangle (or a large square) this works great.

Also Hendrik's answer didn't work for me out of the box in HighStocks, this does.

Answer 3

With the latest Highcharts release you can also exchange the method that draws the legend icon from outside of Highcharts:

Highcharts.seriesTypes.line.prototype.drawLegendSymbol = 
     Highcharts.seriesTypes.area.prototype.drawLegendSymbol;

To use the element that is drawn for the area chart as an icon for a line graph. (I have used this in Highcharts Stockcharts but this should be applicable in basic Highcharts as well)