Question

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]
        ],
    }]
});

});

Was it helpful?

Solution

There are option to set the min/max bubble size. The default is that the max size is 20% of the hight of the chart. You can change this in plotOptions e.g.:

 plotOptions: {
        lineWidth: 0,
         bubble: {
                minSize:2,
                maxSize:"50%"
         }
    },

Note, you can also set the max as a number of pixels.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top