Change size of legend symbol

Question

How do I change the size of the symbols in the legend? Right now they look like this:

I would like them to be squares approximately the same size as the titles. After looking at the docs, I thought changing symbolHeight, symbolRadius and symbolWidth would do the trick, but it doesn't. In fact these parameters don't change anything at all, as far as I can see.

Answer 1

If you are using line series, you need change its legend symbol to column series legend symbol. Then you can use symbolHeight , symbolWidth and symbolRadius properties.

API Reference:
http://api.highcharts.com/highcharts/legend.symbolHeight
http://api.highcharts.com/highcharts/legend.symbolWidth
http://api.highcharts.com/highcharts/legend.symbolRadius

Example:
http://jsfiddle.net/x2vk088m/

Answer 2

No working demo provided using official spline-plot-bands demo

You can use css to achieve the requirement

.highcharts-legend-item path{
  stroke-width:10
}

fiddle demo

Answer 3

Just use symbolHeight, symbolWidth in your config...

Something like this:

 ////////
    legend: {
        align: 'left',
        rtl: false,
        verticalAlign: 'top',
        useHTML: true,
        itemStyle: {
            'cursor': 'default',
            'font-weight': 'normal'
        },
        symbolWidth: 10, <<<<<//HERE
        symbolHeight: 2, <<<<<//HERE
        symbolRadius: 0, //creating square legend,
        labelFormatter: function() {
          return this.name;
        }
    },
/////