Highcharts: Make the legend symbol a square or rectangle
Solution 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
Solution 2
It's possible to achieve square legend symbols via configuration. Just set legend.symbolRadius
value to 0
.
JSFiddle demo: https://jsfiddle.net/9bzy2qzq/
Solution 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);
}
}
},
Solution 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
}
Solution 5
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>
Manu K Mohan
Front end developer all the time 10 plus years of experience in Front development. 6 years experienced in Angular. Interested in working towards the future of user interface.
Updated on July 19, 2022Comments
-
Manu K Mohan almost 2 years
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?
-
Sebastian Bochan over 9 yearsSee the similiar topic: stackoverflow.com/questions/24859766/… / stackoverflow.com/questions/10551727/…
-
Manu K Mohan over 9 years@SebastianBochan I have tried these. But I have updated the question to make it more understandable.
-
-
Jags over 6 yearsThis does not work for line charts, as specified in the question
-
iddo over 6 yearsYour demo contains a column chart, but a solution for a line chart is asked. When changing type to "line" it clearly doesnt work.
-
Bill_VA almost 6 yearsI 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: api.highcharts.com/highcharts/series.line.marker Examples: jsfiddle.net/j53pbxb1 - markers enabled jsfiddle.net/q4Lrabpx - markers from column series
Highcharts.seriesTypes.line.prototype.drawLegendSymbol = Highcharts.seriesTypes.column.prototype.drawLegendSymbol;
-
Jana Weschenfelder almost 5 yearsThe question was for a line graph. If you change the type to 'line' instead of 'column', it will not work anymore.
-
Gauri Kesava Kumar almost 4 yearsI appreciate it ! :) Thank you
-
Rob Banmeadows almost 3 yearsYes! - this helped my to get rectangular symbols. Thanks!
-
K Pradeep Kumar Reddy over 2 yearsHow to make it a circle ?