Remove unnecessary horizontal/vertical spaces in highchart bubble chart - highcharts

I am using highchart to show bubble chart. Everything is working fine except in many cases there are lot of horizontal space(below min cirlce and above max cicle) and vertical space(left of lowest x and right of highest y). Because of this issue my chart sometimes seems very crowded even though there are some free space left in chart. I tried setting min/max of x/y axis but then it then clipped top/left circle. Is there any way i can instruct highchart to use all space in chart to draw bubbles.
I have created sample script at
`http://jsfiddle.net/ftghd9ny/1/`
In this demo you can see extra vertical space. X axis is showing fine. In some other cases there are extra space along x axis.

Related

How to align multiple charts with different data

I have three pie charts displayed in a row. Two have two segments, one has five. All three have vertical legends.
Given that, the chart with five segments displays the pie slightly smaller, due to the extra height of the legend. It also has a slight negative vertical offset.
Is there any way I can set all three charts to render the chart in the same position? I've tried setting the center to 50%,50% in plotOptions, didn't help.
You have to set the marginBottom-Value of the chart to a value that is equal an all charts. Highcharts is trying to display the pie as big as possible, therefore it will use more space if the legend is not as big.
By setting the marginBottom you force the chart to ignore the actual legend size.
The center: ['50%','50%'] setting will only take into account the actual plot area. So if this area is decreased because of a taller legend it has no effect.
I made a jsfiddle where you can explore this settings:
http://jsfiddle.net/doc_snyder/dsmgy6ts/

How to set the tick space on x Axis when we have multiple bar charts in coreplot ios?

I have more than 4 bar charts in a coreplot graph.When the number of charts become more than 3,the charts becomes overlapping and cannot differentiate between the X axis labels.
How to increase the tick space between the x axis labels so that space always remains between the 2 x -axis labels?
The below image is when I have 3 bar charts,then the spacing looks good.
the below image is when I have more charts then there is no spacing between the ticks.
Reduce the barWidth and adjust the barOffset of each plot accordingly. This will allow more bars to fit between each label on the x-axis. You'll also need to reduce the length of the plot space xRange and/or make the graph wider to spread out the plots so the data labels don't overlap.

Highcharts - bubble diagram need smaller bubbles infront of bigger

We are using the Highchart bubble diagram, however when bubble x and y are on the same place in the diagram and bubble y is smaller there is no way to neither see nor much less click the smaller bubble.
Is there any way to plot the bigger bubbles first and then plot the smaller ones on top? Or a setting which says that smaller ones always are on top of the bigger ones?
Just sort the series data in descending order and pass it to the highcharts.
So that, the bigger bubbles will be plotted first and then the smaller ones, thereby the user will be able to hover on smaller as well as bigger bubbles.
Tried this in my project, and it's working perfectly fine !

Fit labels nicely inside Pie Chart Slices

I'm trying to make the labels appear inside the pie chart, but with an even distance from the pie border. I'm using distance: -30 to make the labels stay inside of the pie, but it seems to be applied to the top of the labels' box rather than to a mid point or as margin. This causes the labels to look unevenly placed.
Is there a way to place the labels at an even distance from the border?

Axis Lables Rotation

Hi I am using HighStock 1.2.4
I do have multiple series and separate yAxis for each series. I am calculating height and topPadding and creating stacked series.
Now, I am facing two problems.
I have used rotation with yAxis to rotate labels but its not rendering correctly.
Example: http://jsfiddle.net/mhardik/uZaWz/9/
I have also used rotation for X Axis labels, but the last series position is getting messed with X Axis Labels.
http://jsfiddle.net/mhardik/uZaWz/10/
1) I'm not sure why it's not rendering correctly, if you want to move a little to the left use x: property for title.
2) First, I think you need to set proper align for xAxis.labels (right). Then make higher chart to make sure you have enough space for a chart.
And jsFiddle: http://jsfiddle.net/Fusher/uZaWz/12/

Resources