I have an issue where I am not able to utilize the full height of the plot area. I am making a chart that will illustrate number people spread on given categories (A to H). The size of the bubbles represents number of people. See http://jsfiddle.net/rnilsen/fXzke/8/. The size of the bubbles vary a lot, from 5 to 600 but when looking at it, you can hardly see a difference in size.
The content div is only 75px height. However, if I change it to e.g. 300px, you will immediately see a difference. I want the bubbles to look the same as when I change it to 300px, but with a lower chart to fit into a small space.
How can I achieve this, basically using all the height available?
Here is the chart I use:
$(function () {
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'x',
marginBottom: 25,
marginTop: 0,
plotBorderColor: 'red',
plotBorderWidth: 1,
spacingTop: 0,
spacingBottom: 0,
},
credits : {
enabled : false
},
exporting: {
enabled: false
},
title: null,
xAxis: {
lineWidth: 0,
lineColor: 'transparent',
labels: {
enabled: true
},
categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
},
yAxis: {
lineColor: 'transparent',
labels: {
enabled: false
},
title: { text: null },
},
plotOptions: {
lineWidth: 0
},
legend: {
enabled: false
},
series: [
{
type: 'bubble',
lineWidth: 0,
data: [
[0, 0, 5],
[1, 0, 10],
[2, 0, 200],
[3, 0, 600],
[4, 0, 20],
[null,null,null],
[6, 0, 500],
[7, 0, 400]
],
}]
});
});