CODEWITHSUNDEEP
javascripthighcharts
Jesper
Jesper

Reputation: 2812

Change size of legend symbol

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

enter image description here

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.

Upvotes: 2

Views: 4883

Answers (3)

Alireza
Alireza

Reputation: 104650

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;
        }
    },
/////

Upvotes: 1

pawel_d
pawel_d

Reputation: 3070

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/

Upvotes: 1

Deep 3015
Deep 3015

Reputation: 10075

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

Upvotes: 1

Related Questions