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?

I'm sorry, I don't understand what you want to achieve exactly. Do you want your yAxis to start at 0 and the bubbles not clipped? — Nina, Apr 12 '13 at 07:30
I want to prevent yAxis to start with a value larger then 0 (40 in my fiddle). Bubbles near the xAxis should NOT be clipped, which happens when I set yAxis min to 0 (Step 2 in my fiddle) I updated the fiddle. Play Step1, step2 step3 and you will see my point. — Koos, Apr 12 '13 at 09:15

score 0 · Answer 1 · answered Apr 12 '13 at 09:24

0

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.

answered Apr 12 '13 at 09:24

Nina

320
2
10

Thanks for the answer, but I think you missed the point: if I remove bubble [25, 1, 5000] the yAxis starts at 40. see http://jsfiddle.net/kzoon/jd3c9/12/ – Koos Apr 12 '13 at 09:30
Ok, now I know what you mean. I don't know a standard solution for that. To calculate the yAxis min value would be the way to go I guess. Iterate over all data and get your min y value from all data entries. If that value is higher than 0, set 0 as your default, otherwise subtract a 'buffer' (at least half the height of your lowest data bubble) from that calculated value and set this to the yAxis as min. I guess this is more elegant than adding an invisible point to the chart. Sorry, I couldn't provide a better or easier standard way. Hope this helps anyway. – Nina Apr 12 '13 at 11:02
Thanks for your effort anyway – Koos Apr 12 '13 at 12:16

score 0 · Accepted Answer · answered Apr 17 '13 at 12:28

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:

Find axis min and max values
If min is greater than 0, use 0 as min:
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/

It's a very nice solution. Not 100%, because I have to choose a specified step where I really wanted to rely on the automatically calcluted step using tickPixelInterval. — Koos, May 17 '13 at 06:38

Enforce 0 on axis in HighCharts bubblecharts

2 Answers2