Enforce 0 on axis in HighCharts bubblecharts

Question

I want to enforce that the axis of my bubble chart to starts at 0. In any other chart type I would set

yAxis: {
   min:0
}

But this can cause bubbles with an y value near zero to be clipped.

All I could come up with so far is to add an invisible dummy series to force the axis to start at 0.

See http://jsfiddle.net/kzoon/jd3c9/ for my problem and workaround.

Has anyone a better solution to this problem?

Answer 1

How about using tick positioner? It allows you to programmatically set tick positions. Take a look into the docs: http://api.highcharts.com/highcharts#yAxis.tickPositioner

Sample function can work like this:

1. Find axis min and max values
2. If min is greater than 0, use 0 as min:
3. Add ticks every "20" unless we achieve max value

Here you can find the code:

yAxis: {
    tickPositioner: function () {
        var positions = [],
            min = Math.floor(this.min / 10) * 10,
            max = Math.ceil(this.max / 10) * 10,
            step = 20,
            tick;

        if (min > 0)
            min = 0;

        tick = min;

        while (tick < max + step) {
            positions.push(tick);
            tick += step;
        }

        return positions;
    }
},

and working demo on jsfiddle: http://jsfiddle.net/2ABFW/

Answer 2

You can use startWithTick: http://jsfiddle.net/jd3c9/8/

    yAxis: {
        startWithTick: true
    }

Now your y-axis will display the next tick under 0 (-20 in this case) and no bubble will be clipped.