CODEWITHSUNDEEP
javascriptgoogle-visualization
Netah
Netah

Reputation: 245

Bug with Google Charts Multiple vAxis textStyle and textPosition

I'm going to evaluate 4-5 solutions to add charts in our web app.

HighCharts seems fine and Google Charts too but with Google Charts, i can't find how to set which vAxis are displayed (and with style) and which ones aren't.

Here is my option code :

    var options = {
        title: '',
        backgroundColor:'#555',
        chartArea: {
            backgroundColor: '#555',
            alignment: 'center',
            }
        },
        legend:{position:'top'},
        vAxis: {
            0: { title: "", logScale: true, maxValue: 1150, minValue: 600, textStyle: {color:'black'} },
            1: { title: "", logScale: true, textPosition: 'none', maxValue: 32, minValue: 30 },
            2: { title: "", logScale: true, textPosition: 'none', maxValue: 2000, minValue: 1000 },
            3: { title: "", logScale: true, textPosition: 'none', maxValue: 5 },
            4: { title: "", logScale: true, textPosition: 'none', maxValue: 5 },
            5: { title: "", logScale: true, textPosition: 'none', maxValue: 5200, minValue: 4200 },
            6: { title: "", logScale: true, textPosition: 'none', maxValue: 14, minValue: 13 },
            7: { title: "", logScale: true, textPosition: 'none', maxValue: 17000, minvalue: 12000 }
            , textStyle: { color: 'orange' }
        },
        hAxis: { title: "", textColor: "#fff" },

The textStyle: { color: 'orange' } for all vAxis works fine. Idem if i write textPosition:"none" for all. But for each vAxis, i can't make textStyle and textPosition work. Here, textStyle: {color:'black'} has no effect (even if i delete textStyle: { color: 'orange' }).

Did anyone faced that problem ? How could i correct that please ?

Thanks.

Upvotes: 0

Views: 1020

Answers (1)

juvian
juvian

Reputation: 16068

The solution is quite simple, you are using vAxis instead of vAxes , which is the one you need to use for multiple vAxes. So the correct usage would be:

vAxes: {
        0: { title: "", logScale: true, maxValue: 1150, minValue: 600, textStyle: {color:'black'} },
        1: { title: "", logScale: true, textPosition: 'none', maxValue: 32, minValue: 30 },
        2: { title: "", logScale: true, textPosition: 'none', maxValue: 2000, minValue: 1000 },
        3: { title: "", logScale: true, textPosition: 'none', maxValue: 5 },
        4: { title: "", logScale: true, textPosition: 'none', maxValue: 5 },
        5: { title: "", logScale: true, textPosition: 'none', maxValue: 5200, minValue: 4200 },
        6: { title: "", logScale: true, textPosition: 'none', maxValue: 14, minValue: 13 },
        7: { title: "", logScale: true, textPosition: 'none', maxValue: 17000, minvalue: 12000 }
        , textStyle: { color: 'orange' }
    },

Upvotes: 1

Related Questions