Highcharts: Make the legend symbol a square or rec

问题:

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

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?

回答1:

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

回答2:

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

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

回答3:

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

回答4:

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

回答5:

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/

回答6:

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

回答7:

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>