JPil
JPil

Reputation: 301

Bubbles being cut off in google bubble chart

I am using google bubble chart, and bubbles on the top lines are getting cut off. Both x and y axis are custom labels

Here is my JSFiddle example

Here is the chart options:

    var options = {
        sizeAxis: {
            maxSize: 7,
            minSize: 1
        },
        fontSize:10,
        legend: 'none',
        height: 200,
        width: 400,
        bubble: { stroke: '#5dadff', opacity: 1 },
        colors: ['#5dadff', '#5dadff'],
        tooltip: {
            trigger: 'none'
        },
        hAxis: {
            ticks: [
                { v: 800, f: '800m\n4f' },
                { v: 1200, f: '1200m\n6f' },
                { v: 1600, f: '1600m\n8f' },
                { v: 2000, f: '2000m\n10f' },
                { v: 2400, f: '2400m\n12f' },
                { v: 2800, f: '2800m+\n14f+' }
            ],
            gridlines: { color: '#dedede' },
            minorGridlines: { color: '#f7f7f7', count: 3 },
            textStyle: { color: '#5f5f5f' }

        },
        vAxis: {
            ticks: [
                { v: 1, f: '' },
                { v: 2, f: '2YO' },
                { v: 3, f: '3YO' },
                { v: 4, f: 'OPEN' }

            ],
            gridlines: { color: '#dedede' },
            textStyle: { color: '#5f5f5f' }
        }
    };

Upvotes: 2

Views: 297

Answers (1)

WhiteHat
WhiteHat

Reputation: 61230

add another blank y-axis tick, to allow more room...

        vAxis: {
            ticks: [
                { v: 1, f: '' },
                { v: 2, f: '2YO' },
                { v: 3, f: '3YO' },
                { v: 4, f: 'OPEN' },
                { v: 5, f: '' }  // <-- add tick

            ],
            gridlines: { color: '#dedede' },
            textStyle: { color: '#5f5f5f' }
        }

see forked fiddle --> https://jsfiddle.net/dpLa4r6j/

Upvotes: 0

Related Questions