CODEWITHSUNDEEP
javascriptgoogle-visualization
Mitch Barlow
Mitch Barlow

Reputation: 131

hAxis label position Google Charts

I am attempting to have my labels (0, 20, 40, 60, 80, 100) at the top of the chart, not the bottom. I saw that hAxis.textPosition only supports in, out, and none. any idea how to get these labels to the top, not bottom?

    var options = {
    title: 'You\'re school needs a minimum of 80% enrollment for you\'re free beer money',
        chartArea: {width: '50%'},
    hAxis: {
        title: 'Percentage of students enrolled',
        minValue: 100,
        gridlines: {
            count: 6
        }
    },
    legend: { position: 'right', maxLines: 1 },
    vAxis: {
        title: 'college location'
    },
    isStacked: true,
    height: 300
};

here is a fiddle... https://jsfiddle.net/skinnyb/33og516L/3/ thanks in advance!

Upvotes: 3

Views: 7631

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117364

You must draw a material chart(see: Top X-Charts)

google.load('visualization', '1', {packages: ['bar']});
        google.setOnLoadCallback(drawStuff);

        function drawStuff() {
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Country');
          data.addColumn('number', 'At least 80% needed for Beer money!');
          data.addColumn({type: 'string', role: 'tooltip'});
          data.addColumn('number','You earned your Beer money!');
          data.addColumn({type: 'string', role: 'tooltip'});
          data.addRows([
            ['US', 80,'You hit 80% Enrollment!',10,'90% Total Enrollment'],
            ['China', 80,'You hit 80% Enrollment!',10,'90% Total Enrollment'],
            ['Japan', 80,'You hit 80% Enrollment!',5,'85% Total Enrollment'],
            ['Germany', 70,'70% Enrolled',0,''],
            ['France', 60,'60% Enrolled',0,'']
          ]);

    var options = {
        isStacked:true,
        title: 'You\'re school needs a minimum of 80% enrollment for you\'re free beer money',

         bars: 'horizontal',
        legend: { position: 'right', maxLines: 1 },
        hAxis: {
            title: 'Percentage of students enrolled'},
        axes: {
            x: {
              0: { side: 'top'}
            }
          },
        height: 300
    };

    var chart = new google.charts.Bar(document.getElementById('chart_div'));

    chart.draw(data, google.charts.Bar.convertOptions(options));
}

https://jsfiddle.net/4v91rh6r/

Upvotes: 3

Related Questions