Reverse the bar chart in google charts

Question

I am trying to create a bar chart using google charts but I need to reverse the directions of the bars. I have achieved it by setting hAxis: { direction: -1,} But the problem is only the direction of bars is reversed and the y axis labels are not placed accordingly as shown in the picture.

How can I change the placement of y-axis labels to come to the right of y -axis? My code:

function drawBasic() {

      var data = google.visualization.arrayToDataTable([
      ['Locations', 'Product count',{role:'annotation'}],
      ['Bengaluru', 277, '277'],
      ['Hyderabad', 182, '182'],
      ['Chennai', 139, '139'],
      ['Kolkata', 136, '136'],
      ['Jaipur', 78 , '78 ']
    ]);

    var options = {
      legend: 'none',
      chartArea: {width: '50%'},
      colors: ['#3cb371'],
      hAxis: {
        direction: -1,
        gridlines: { color: 'transparent' },
        minValue: 0,
        textPosition: 'none'
      },
    };
      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

Marco Aurelio Fernandez Reyes · Answer 1 · 2021-05-04T20:52:32.393

I really don't think it is possible get the same result as the one you show in your question, but, it might be an alternative:

Use the non-breaking space --> \u00A0 for add white spaces between the value shown in the bar and the start of the axis. Source

If you follow the tip I mentioned above, you should change the chart's settings as is shown in this working jsfiddle.

Here's the code:

/*
    Source: https://stackoverflow.com/a/54833123/12511801
*/

google.charts.load("current", {
  packages: ["corechart"]
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Locations', 'Product count', {
      role: 'style'
    }, {
      role: 'annotation'
    }],
    ['Bengaluru', 277, 'color: #3cb371;', '277\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Bengaluru'],
    ['Hyderabad', 182, 'color: #3cb371;', '182\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Hyderabad'],
    ['Chennai', 139, 'color: #3cb371;', '139\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Chennai'],
    ['Kolkata', 136, 'color: #3cb371;', '136\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Kolkata'],
    ['Jaipur', 78, 'color: #3cb371;', '78\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Jaipur']
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1,
    {
      calc: "stringify",
      sourceColumn: 1,
      type: "string",
      role: "annotation"
    },
    2
  ]);

  var options = {
    title: "", // Title of the chart.
    //width: 600,
    //height: 400,
    legend: {
      position: 'none'
    },
    hAxis: {
      title: '', // Title below the x-axis
      titleTextStyle: {
        color: 'black'
      },
      direction: -1,
      gridlines: {
        color: 'transparent',
        count: 0
      },
      textPosition: 'none'
    },
    vAxis: {
      title: '', // No title.
      titleTextStyle: {
        color: 'black'
      },
      gridlines: {
        color: 'transparent',
        count: 0
      },
      minValue: 0,
      textPosition: 'none', // Option: set the text at the end of the bar.
      allowHtml: true
    }
  };
  var chart = new google.visualization.BarChart(document.getElementById("chart_div"));
  chart.draw(data, options);

  //chart.draw(view, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 300px;"></div>

If the previous modifications doesn't accomplish your requirements, you have to change the way how to draw that data (either by using another chart API or modify your current code AND draw the text in a separated div and somehow align this chart results to your text).

Reverse the bar chart in google charts

1 Answers1