Highcharts: Make the legend symbol a square or rectangle

Question

I am trying to Make the legend symbol a square or rectangle for a line graph. Example

enter image description here

The line is fine. I dont want change the line width. HTML:

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

Javascript:

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
        renderTo: 'container',
        type: 'line',
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        plotOptions: {
            series: {
                marker: {
                    enabled: false
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            symbolHeight:100,
            borderWidth: 0
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
});

I tried adding symbolHeight in legend. But its not working.

legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            symbolHeight:100,
            borderWidth: 0
        },

How to increase the height of line symbol to make it rectangle or square?

See the similiar topic: http://stackoverflow.com/questions/24859766/highcharts-legend-symbol-sizes-for-scatter-charts / http://stackoverflow.com/questions/10551727/highcharts-symbol-in-legend — Sebastian Bochan, Dec 17 '14 at 12:12
@SebastianBochan I have tried these. But I have updated the question to make it more understandable. — Manu K Mohan, Dec 17 '14 at 12:23

score 27 · Answer 1 · answered Dec 08 '16 at 09:46

27

It's possible to achieve square legend symbols via configuration. Just set legend.symbolRadius value to 0.

JSFiddle demo: https://jsfiddle.net/9bzy2qzq/

answered Dec 08 '16 at 09:46

Roman Pavlov

401
6
7

2

Your demo contains a column chart, but a solution for a line chart is asked. When changing type to "line" it clearly doesnt work. – iddo Jan 10 '18 at 16:06
I appreciate it ! :) Thank you – Gauri Kesava Kumar Jul 02 '20 at 09:53

score 12 · Answer 2 · edited May 23 '17 at 11:47

This is a copy of the question: How to access legendSymbols and change their shape in HighCharts

It has a similar answer and two others:

First Option:

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

Second Option:

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

score 8 · Accepted Answer · answered Dec 17 '14 at 21:50

You can make a fake series as follows and provider marker to it.

$(function () {
var chart = new Highcharts.Chart({
    chart: {
    renderTo: 'container',
    type: 'line',
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
        series: {
            marker: {
                enabled: true
            }
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',

        //borderWidth: 0
    },

    series: [{

        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        showInLegend : false,


        marker:{enabled:false}

    },{
        name : "testing",
        data : {},
        marker : {symbol : 'square',radius : 12 }
    }
            ]
});
});

Working demo : DEMO

How to make it a circle ? – K Pradeep Kumar Reddy Aug 25 '21 at 14:57 — K Pradeep Kumar Reddy, Aug 25 '21 at 14:57

score 6 · Answer 4 · answered Dec 17 '15 at 13:08

6

All answers are correct but I found a pretty hack method. Replacing legend rectangle symbol with square:

legend: {
   symbolHeight: 12,
   symbolWidth: 12,
   symbolRadius: 6
}

JsFiddle

answered Dec 17 '15 at 13:08

RockOnGom

3,893
6
35
53

3

This does not work for line charts, as specified in the question – Jags Nov 02 '17 at 05:49

score 4 · Answer 5 · answered Dec 27 '18 at 14:45

4

For rectangular legend we need to set squareSymbol: false.

Highcharts.chart('container', {
    chart: {
       type: 'column'
    },

    title: {
       text: 'Round legend symbols'
    },

    xAxis: {
       categories: ['Jan', 'Feb', 'Mar', 'Apr']
    },

    legend: {
       symbolWidth: 16,
       symbolRadius: 0,
       squareSymbol: false
    },

    series: [{
        data: [1, 3, 2, 4]
    }, {
        data: [6, 4, 5, 3]
    }, {
        data: [2, 7, 6, 5]
    }]

});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

answered Dec 27 '18 at 14:45

Ramyani

1,019
1
9
12

The question was for a line graph. If you change the type to 'line' instead of 'column', it will not work anymore. – Jana Weschenfelder Jul 09 '19 at 08:10
Yes! - this helped my to get rectangular symbols. Thanks! – Rob Banmeadows Jul 22 '21 at 09:39

score 1 · Answer 6 · answered Jan 11 '18 at 11:18

1

Since Highcharts 5 introduced styled mode, you can easily find the symbol elements, and change their attributes. To make the symbol square:

$(".highcharts-legend-item path").attr('stroke-width',16);

http://jsfiddle.net/n3h2totc/23/

answered Jan 11 '18 at 11:18

iddo

749
3
11

Bill_VA · Answer 7 · 2018-05-09T17:47:59.453

1

If you'd like a round symbol, you can use this: http://jsfiddle.net/kL5sghrx/3/

chart: {
    events: {
        load: function(){            
  $( ".highcharts-legend-item path" ).each(function( index ) {
   $(this)
   .attr('d','M10.1,15.3L10.1,15.3c-3,0-5.5-2.5-5.5-5.5v0c0-3,2.5-5.5,5.5-5.5h0c3,0,5.5,2.5,5.5,5.5v0 C15.6,12.8,13.2,15.3,10.1,15.3z')
   .attr('fill', $( this ).attr('stroke'))
   .attr('stroke-dasharray','0,0'); 
  });
         },
      redraw: function(){            
  $( ".highcharts-legend-item path" ).each(function( index ) {
   $(this)
   .attr('d','M10.1,15.3L10.1,15.3c-3,0-5.5-2.5-5.5-5.5v0c0-3,2.5-5.5,5.5-5.5h0c3,0,5.5,2.5,5.5,5.5v0 C15.6,12.8,13.2,15.3,10.1,15.3z')
   .attr('fill', $( this ).attr('stroke'))
   .attr('stroke-dasharray','0,0'); 
  });
        }
    },
 }

edited May 09 '18 at 17:47

answered May 09 '18 at 15:48

Bill_VA

913
7
12

1

I received this from the HighSoft support guys: If you enable markers for line charts, you will see that the legend items will also change. As a workaround you could overwrite line markers with column markers too. Take a look at both example below. API Reference: https://api.highcharts.com/highcharts/series.line.marker Examples: http://jsfiddle.net/j53pbxb1/ - markers enabled http://jsfiddle.net/q4Lrabpx/ - markers from column series `Highcharts.seriesTypes.line.prototype.drawLegendSymbol = Highcharts.seriesTypes.column.prototype.drawLegendSymbol;` – Bill_VA May 11 '18 at 13:14

Highcharts: Make the legend symbol a square or rectangle

7 Answers7

Linked