I am looking for chart like this in highcharts. Can any one help to find chart like this. I really needed but I am not able to make similar chart of my own in highcharts.
UPDATE:
I got this one in the internet.
Check how to customize legend
legend: {
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: 0,
y: 100, //distance from top
padding: 3,
itemMarginTop: 5,
itemMarginBottom: 5,
useHTML: true, //now you can customize label with various kind of styling
labelFormatter: function() {
return '<div style="width:100px;"><span style="float:left; margin-left:10px">' + names[this.index - 1] + '</span><span style="float:right">' + values[this.index - 1] + '</span></div>';
},
symbolRadius: 0, //square symbols
},
updated fiddle
Related
How would I set the legend height so that it does not show the pagination below the legends?
code:
legend: {
align: 'right',
itemMarginBottom: 8,
labelFormatter: function() {//some func},
itemWidth: 290,
verticalAlign: 'top',
useHTML: true,
x: 95,
y:80
}
any ideas appreciated. Thanks!
FIDDLE: https://jsfiddle.net/ag6j7f6w/
You can increase the height & width of your chart.By doing so the pagination will not come up.
Increase the width: 600 & height: 650 of chart.
I want to be able to increase/decrease the gap between legends split into 2 cols.
ex:
my legend is defined as follows:
legend: {
align: 'right',
itemMarginBottom: 8,
labelFormatter: function() {//some func},
itemWidth: 290,
verticalAlign: 'top',
useHTML: true,
x: 95,
y:80
}
is there any marginLeft/Right props to do so?
Thanks
See legend.itemDistance property.
itemDistance: Number
In a legend with horizontal layout, the itemDistance defines the pixel distance between each item. Defaults to 20.
ref: http://api.highcharts.com/highcharts/legend.itemDistance
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/
I have fiddled here with highcharts.js demo.
http://jsfiddle.net/Venkata/rq0h7o4o/
Data labels goes beyond x-axis. do i need to write formatters or any suggestions?
series: {
borderWidth: 0,
"dataLabels": {
enabled: true,
format: '{point.y:.1f}%',
rotation: -90,
align: 'right',
x: 4,
y: 15,
crop: false,
overflow: 'none'
}
}
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
},