highcharts bar chart square legend - highcharts

I could not find a solution to make bar chart legend turn from round to square. I saw a lot of solutions for line charts, which don't work for bar or pie charts. squareSymbol true doesn't work.
legend: {
layout: 'vertical',
align: 'right',
squareSymbol: true,
verticalAlign: 'middle',
floating: false,
borderWidth: 0,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.0)'),
shadow: false,
}

You can make the legend bullet points squared by setting the symbolRadius to 0.
legend: {
symbolRadius: 0
},
JSFiddle

Set symbolRadius property to 0:
legend: {
symbolRadius: 0
}
Live demo: http://jsfiddle.net/BlackLabel/humnzs3j/
API: https://api.highcharts.com/highcharts/legend.symbolRadius

Related

Highcharts legend is overlapping on to the graph area

I'm using highcharts to plot out a line graph of quite a few sections. I want the legend to be static at the bottom of the graph area. The height of the graph area can be fixed but the legends can change dynamically.
I'm using the below options in for legend object
legend: {
useHTML: true,
enabled: true,
reversed: false,
verticalAlign: 'bottom',
floating: true,
align: 'center',
padding: 10,
margin: 20,
itemDistance: 10,
itemStyle: {
'font-size': '14px',
'color': colors.greyDark,
'font-family': fonts.proximaNovaBold,
'letter-spacing': '0',
'line-height': '17px',
'text-align': 'center',
},
itemMarginBottom: 10,
x: 0,
y: 100
},
I have replicated it in the fiddle
https://jsfiddle.net/x496tLmf/1/
Is there any way to fix this and have the legends stuck to the bottom. All of them need to display as the graph will be exported as static image.
There are two main issues why the legend overlaps the chart:
When you manually set the chart margin, the chart won't reserve space for the legend.
When you enable the legend floating option, you explicitly allow legend for overlapping
API: https://api.highcharts.com/highcharts/legend.floating
The solution here is to remove the properties mentioned before and let the chart calculate the position of the legend.
However when you want to export this chart as a static image with all the legend items you have to specify the size of each element together with some overflow style to cut them a bit.
You might also reduce the spacing in between them, to increase the chart area.
legend: {
useHTML: true,
enabled: true,
reversed: false,
itemWidth:120,
itemStyle: {
'font-size': '14px',
'color': colors.greyDark,
'font-family': fonts.proximaNovaBold,
'letter-spacing': '0',
'line-height': '17px',
'text-align': 'center',
"textOverflow": "ellipsis"
},
},
API: https://api.highcharts.com/highcharts/legend.itemWidth
Live demo:
https://jsfiddle.net/BlackLabel/ef8rjkmL/

in highcharts, how can I align legend symbol and legend text?

As you can see in the jsfiddle example, the legend symbol is not aligned with the legend text.
Is there a way to set some padding or margin so the text can be vertically aligned to top or something?
http://jsfiddle.net/daxu/md2zk/62/
legend: {
layout: 'vertical',
itemMarginTop: 20,
symbolHeight: 5,
symbolWidth:5,
itemStyle: {
color: 'black',
fontFamily: 'DINPro',
fontSize: '7.8409px',
fontWeight: 'normal',
display:'inline-block',
verticalalign:'top'
},
align: 'right',
verticalAlign: 'middle',
floating: false,
x: 0,
y: 0
},
You have to set both legend: {useHTML:true, itemStyle: {lineHeight:"10px"}}
The lineHeight will change the text alignment to what you need. it worked in my case for horizontal legend.
See http://jsfiddle.net/md2zk/176/
Set useHTML flag as true in the legend.
Example: http://jsfiddle.net/md2zk/63/

How to align highcharts legend to bottom right?

I'm trying to align a legend at the bottom right in highstock. It used to work until I was forced to upgrade to highstock 1.3.4.
The problem is that now the navigator is covering the legend. This is not ideal:
http://jsfiddle.net/sy8dE/
I'm aligning the legend as follows:
$(function () {
$('#container').highcharts('StockChart', {
chart: {
},
legend: {
enabled: true,
floating: true,
verticalAlign: 'bottom',
align: 'right'
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: usdeur
}]
});
});
How can I get the navigator to NOT cover the legend?
In addition to specifying the alignment of the legend, you can also offset it using x and y offsets. For instance, in your case you could move it down a bit like this:
legend: {
enabled: true,
floating: true,
verticalAlign: 'bottom',
align:'right',
y:40
},
http://jsfiddle.net/kqvNJ/
The other legend options are specified here: http://api.highcharts.com/highcharts#legend.y

Hide yaxis with legend

Is it possible to hide the yaxis and the series with klick on a series in the legend?
legend: {
align: "right",
layout: "vertical",
enabled: true,
verticalAlign: "middle"
},
cheers
You need to use showEmpty as false.

Highcharts menus bottom into right side of the graph

I have highchart like this.
How can I move the legends (Firefox,IE,chrome...) to the right of the chart?
P.S. I am not familiar with jQuery.
You need to set the legend.align option to 'right'
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'bottom',
x: 0,
y: -10
},
Here is the demo. I just tweaked it with the above mentioned code.
I Hope Highcharts API would be of great help to you, to explore the options available to personalize your charts.
Try this legend: { align: 'right' } So you can align your legend on the right side
Have a look at this jsfiddle, it aligns the legend on the right side.
The following have been added:
legend: {
width:180, align: 'right',
itemWidth: 180, verticalAlign: 'middle',
x: 0,
y: 0
},

Resources