I'm trying to generate a pie chart but when I activate the data labels the chart's width is incorrectly calculated.
Is this a bug or I must to set other options ?
The example :
http://jsfiddle.net/rolivares/Fcca9/6/
plotOptions: {
pie: {
animation: false,
allowPointSelect: false,
cursor: 'pointer',
dataLabels: {
enabled: false,
PD: Toggle plotOptions.dataLabels.enabled = true/false
Related
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/
I am using highchart library. I am using pie chart. What i want is that when I render pie chart, it should not rotate itself. the data points should adjust itself in the pie chart dynamically. Can it be done?
You can stop the rotation by using animation: false
http://api.highcharts.com/highcharts/plotOptions.pie.animation
see example jsfiddle
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
plotOptions: {
pie: {
animation: false
}
}
});
How could i achieve to align the data labels on the same vertical line in Highcharts bar charts as showned in the example below?
You need to set:
plotOptions: {
bar: {
dataLabels: {
enabled: true,
inside: true,
align: 'left',
x: 390 //offset
}
}
},
Demo: http://jsfiddle.net/5aF54/1/
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
I have a pie chart located:
http://jsfiddle.net/PcX4b/5/
I am setting the series to look something like:
series: [{
type: 'pie',
name: name,
size: '100%',
innerSize: '25%',
data: innerData,
shadow: true,
dataLabels: {
enabled: false
}
}, {
type: 'pie',
name: "whiteBorder",
size: '100%',
innerSize: '93%',
data: outerData,
shadow: false,
dataLabels: {
enabled: false
}
}]
Right now the shadow for the pie chart is displaying on the outside of the pie (desired) and the donut hole (not desired). Is it possible to have it display only on the outside with out putting it on the white border series.
Just remove/set to 0 innerSize for a first series, see: http://jsfiddle.net/PcX4b/8/