Highcharts - Bubblechart - adding padding to top and bottom of plot

Question

I have created a bubble chart in Highcharts as follows:

jsFiddle

As you can see the 'bubbles' for data '0' and data '7' are cut off.

Is there anyway to add padding on the top and bottom to take this into account ?

I know extending the axis range to -1 -> 8 will sort this out but I'd rather not do it that way

Here's the code:

$(function () {

    var data = [{ x: 0, y: 1, z: 1, dataSeries: 'data #1', dataPerc: '1.2' },
                { x: 1, y: 2, z: 2, dataSeries: 'data #2', dataPerc: '2.2' },
                { x: 2, y: 0, z: 0, dataSeries: 'data #3', dataPerc: '19.2' },
                { x: 3, y: 7, z: 7, dataSeries: 'data #4', dataPerc: '12.0' },
                { x: 4, y: 5, z: 5, dataSeries: 'data #5', dataPerc: '24' },
                { x: 5, y: 4, z: 4, dataSeries: 'data #6', dataPerc: '12' },
                { x: 6, y: 3, z: 3, dataSeries: 'data #7', dataPerc: '15.3' },
                { x: 7, y: 3, z: 3, dataSeries: 'data #8', dataPerc: '1.2' }];         

    $('#container').highcharts({

        chart: {
            type: 'bubble',
            plotBorderWidth: 1,
            zoomType: 'xy'
        },
            credits: false,

        legend: {
            enabled: false
        },

        title: {
            text: ''
        },

        xAxis: {
            gridLineWidth: 1,
            title: {
                text: ''
            },
           categories: ['data #1', 'data #2', 'data #3', 'data #4', 'data #5', 'data #6', 'data#7', 'data #8']
        },

        yAxis: {
            startOnTick: true,
            min: 0,
            max: 7,
            title: {
                text: 'Score'
            },
            labels: {
                format: '{value}'
            },
            maxPadding: 0.2
        },

        tooltip: {
            useHTML: true,
            headerFormat: '<table>',
            pointFormat: '<tr><th colspan="2"><h3>{point.dataSeries}</h3></th></tr>' +
                '<tr><th>Score:</th><td>{point.y}</td></tr>' +
                '<tr><th>Percentage:</th><td>{point.dataPerc}%</td></tr>',
            footerFormat: '</table>',
            followPointer: true
        },

        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                }
            }
        },
        series: [{ data: data }]
    });
});

Answer 1

Two alternative ways to handle this:

1) Set startOnTick and endOnTick to false. Adjust minPadding/maxPadding if desired.

yAxis: {
  startOnTick: false,
  endOnTick: false,
  minPadding: 0.025,
  maxPadding: 0.025
}

Output:

Fiddle:

• http://jsfiddle.net/jlbriggs/svcuLgso/8/

2) Just don't set a min or max, and let the chart do what it does.

    yAxis: { }

Fiddle:

• http://jsfiddle.net/jlbriggs/svcuLgso/9/

Answer 2

I came across the answer to this in a Google search: http://www.java2s.com/Tutorials/highcharts/Example/Axis_Label/Hide_axis_first_label.htm.

This code example shows off attributes called showFirstLabel and showLastLabel that you can use in either the xAxis or yAxis. These should accomplish what you want by adding the extra space for the bubbles by increasing the range of your yAxis (to -1 through 8), but not showing those extra labels, as you requested in your question.

Here is where I applied them in your chart options ...

    yAxis: {
        startOnTick: true,
        min: -1,
        max: 8,
        showFirstLabel: false,
        showLastLabel: false,
        title: {
            text: 'Score'
        },
        labels: {
            format: '{value}'
        },
        maxPadding: 0.2
    },

... and here is the result:

You can review an updated version of your fiddle here: http://jsfiddle.net/brightmatrix/svcuLgso/7/

I hope this helps!