Change Size Of Legend Symbol

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 t

Solution 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.symbolHeighthttp://api.highcharts.com/highcharts/legend.symbolWidthhttp://api.highcharts.com/highcharts/legend.symbolRadius

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

Solution 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

Solution 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, <<<<<//HEREsymbolHeight: 2, <<<<<//HEREsymbolRadius: 0, //creating square legend,labelFormatter: function() {
          returnthis.name;
        }
    },
/////