Highcharts issue when dealing with 3D pie and large labels - javascript

I am using highcharts 3D pie and if some label is a little bit long it does not resize correctly.
Here it is an example which I have taken from highcharts documentation and forked it for getting large labels.
http://jsfiddle.net/78wr256o/
It is important to mention that I would prefer to display the whole name and not cropping it. Resizing correctly the chart, keeping it centered and moving labels position if it is possible.
This is the initial version:
This is exactly the same chart but with a large label:

You can use html and css to format data labels.
series: [{...
dataLabels: {
useHTML: true,
style: {
"width": "30px"
}
......
Here is an example http://jsfiddle.net/8d517w3v/
It doesn't crop rather wrap labels around and make graph centered.

Related

Highcharts: is it possible to show all data labels in a bubble chart without them overlapping?

I'm building a Highcharts bubble chart and am running into a challenge formatting the data labels. The data will be regularly updated, so there will be plenty of times when the bubbles either overlap or are very close to each other.
By default, labels that are very close to one another will be omitted. However, my requirements for this chart include showing the data labels for all bubbles, regardless of their position (therefore, I'm setting allowOverlap to true).
Here is a variation of the demo bubble chart that shows my issue (see also the screenshot below): http://jsfiddle.net/brightmatrix/Lxw7koey/. Note how the labels for Portugal and Hungary run into each other at the bottom left, and how Finland and Sweden are very close together towards the center.
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.country}',
allowOverlap: true // shows all data labels, but overlap occurs
}
}
},
Is there a way to offset the data labels so they won't overlap or collide? Because the data will constantly change with each update, I can't rely on a manual offset (either through x or y positioning) or alignment to solve this problem.
For reference, I looked at the following related questions:
Highcharts bubble chart dataLabels overlapping despite z-index
Highcharts Bubble Chart - How to move an individual point's data label (dataLabel) to the front/top

Highcharts: Align multiple charts in same container

Following this demo here (http://www.highcharts.com/docs/chart-and-series-types/combining-chart-types) I am trying to have a Pie chart and a bar chart on the same page.
The catch is I would like the Pie chart to be large on the left and then the bar chart on the right. I see the code to move the pie chart around, but I cannot figure out how to do the same with the bar chart, as it seems to want to span the entire container width. I understand that I could have two independent charts and place them in their own floating DIVs, but since the combining of charts is possible, I thought this would be a viable option.
You can set chart.marginLeft to half of the chart width. And set pie.center x coordinate to a negative value.
chart: {
marginLeft: 400
},
series: [{
center: ['-75%', '50%'],
example: http://jsfiddle.net/L55w9n53/

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.

How to set width limitation for text in highcharts?

I am using a pie chart for my diagram. The problems is sometimes the text or the name of a category is really long and it makes my pie chart gets smaller than usual.
How I can set a width limitation for each text?
This is my pie chart with a long category name:
Here
Answered here, and here is a fiddle that demonstrates.
In brief - you can add a style to the dataLabels:
style: {
width: '50px'
}

Using jqPlot to fill the bottom half of a graph with a color

I'm using jqPlot to make a simple graph:
Their documentation states that it's very out of date. Is there a way to shade the lower half of the graph (below the line) with a color such as this one?
http://www.epmag.com/resources/images/archives/OFFPROD-Petrolite-Graph1.jpg
If not, any clues on how I could shade it myself? jqPlot uses javascript to draw on an HTML canvas.
In your series options set:
series: [
{
fill: true
}
]
See this example.

Categories