Highcharts donut responsive text in center - javascript

I have been searing for a solution to have centered text in highcharts donut. Some solutions use title, or subtitle with following option to center text but this does not work when chart is responsive and does not have specified width:
verticalAlign: 'middle',
floating: true
http://jsfiddle.net/pDdcd/483/
Does anybody have a solution which works when chart is responsive, even is it includes modified source code?

Related

How to center title vertically in HighCharts pie/donut chart?

I have a HighCharts Pie chart configured as a "donut" style, and I set the title "verticalAlign" to "middle" but this seems to center the title in the whole area taken up by the chart (including the legend) which is fine for a few data points, but once the chart has many points added, the title starts overlapping the colored segments and even the legend. Is there a way to center the title in just the donut?
Example:
Highcharts has quite a number of ways to adjust the style. Not clear how you display your title, but it seems that the problem is in the height of your legend. One way to go is to adjust the 'y' parameter of the title to move title a little:
title: {
text: 'A title to move',
align: 'center',
verticalAlign: 'middle',
y: -20,
}
Drawback is that it may not fill all the possible chart content, so you have to somehow estimate how much you want to adjust the 'y'.
https://api.highcharts.com/highcharts/title.y
After much trial and error, the final solution for my specific use-case involved:
Fixing the 'chart.spacingTop' parameter to 10 pixels. This fixed the top of the chart so it wouldn't dynamically change in the vertical space.
Setting 'plotOptions.pie.size' to '250px'. This fixed the pie size to 250px regardless of how many points were shown.
Setting 'plotOptions.pie.center' to '['50%', 105]'. This centered the chart at 50% width, 105px from the top.
Limiting my series to 24 data points max (to avoid a legend that was too long to manage)
Finally, I created a <div> right before the chart container that allowed me to use CSS to set it relative to the chart, positioning my label right in the center of the donut.
The result:

Highcharts data label vertical alignment - bug

Im facing an issue with highcharts js library where im trying to put the value of the point inside the shape.
for this im using inside: true, verticalAlign: 'middle' for data label which seem to work just fine but whenever the point is at the start or at the end of the chart the label does not align correctly.
I have already tried offset and padding but its for the whole axis not the label.
I would really appreciate any suggestion, clues or solutions
http://jsfiddle.net/Andam/6km2fw31/1/
Highcharts tries to position data labels on a plot area due to default justify option for overflow. As a solution change overflow to allow.
dataLabels: {
enabled: true,
verticalAlign: 'middle',
crop: false,
overflow: 'allow'
}
Live demo: http://jsfiddle.net/BlackLabel/f2r7hL3j/
API Reference: https://api.highcharts.com/highcharts/series.column.dataLabels.overflow

Highchart loading animation not working when giving 'verticalAlign' for 'setTitle'

I am building a pie chart with highchart. I need to set custom title for my pie chart. And I need to align it to the center of the pie chart. Everything works fine except the initial circle loading animation of pie chart. If I remove
verticalAlign: 'middle',
It will work. The problem is only in highchart v7.1.1 . This animation is working fine in Highchart v7.0.3.
This is my codepen link.
Can any one please help me to fix it?
Reported issue: https://github.com/highcharts/highcharts/issues/10835
To workaround enable floating in title configuration object:
title: {
floating: true
},
Live demo: http://jsfiddle.net/BlackLabel/9nywd2mx/
API Reference: https://api.highcharts.com/highstock/title.floating

Legends display order using highcharts in pie chart

Using highcharts, legends are displayed in a horizontal manner. I am trying to display in vertical order (one series below the other) but I could not find any solutions for that.
In the image below, the order of legends are horizontal. Can someone help me figure out how to display the legend in a vertical order?
Use this snippet, it will place the label vertically in bottom of chart:
legend: {
verticalAlign: 'bottom',
layout: 'vertical
},
You can check it with this fiddler.

Positioning a bubble chart properly with no legend?

I took the legend out of my bubble chart using legend: {position: 'none'}, but it leaves an empty space at the right side of the chart
What's the best way to make the chart fill up the space on the right but still show the prices properly on the left?
I tried adjusting the chartArea property but it started edging the prices off the left side (i.e., they were cut off)
See demo here
Here is a look at the chart under the inspector, you can see the empty space on the right side:
Set the chartArea.width and chartArea.left options:
chartArea: {
width: '80%',
left: '20%'
}

Categories