how rotate column chart in google chart

Question

I need the graph to start from the top line and go to the bottom. But it turned out that he comes from the bottom to the top. How to do it? This is javascript file. I use google charts.

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

function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
            ['First name','Data:',{role: 'style'}],
            ["D426 10,0мм",11,'color:black'],
            ["D323,9 9,5мм",60,'color:black'],
            ["D244,5 11,1мм",248,'color:black'],
            ["D168,3 8,9мм",725,'color:black'],
            ["D168,4 8,9мм",124,'color:black'],
            ["D168,5 8,9мм",643,'color:black'],
            ["D168,6 8,9мм",12,'color:black'],
            ["D168,7 8,9мм",355,'color:black'],
        ]);

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

        var options = {
            colors:'black',
            label:'Project name',
            chartArea:{width:'100%',height:'100%'},
            legend: { position: 'none' },          
            axes: {x: {0: { side: 'top', label: ''}},},
            bar: { groupWidth: "10%", },
            orientation:'',
            vAxis:{gridlines:{count:"0"},
                baselinecolor:'black',
                logScale:true,
                position:'none'},
           };

        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        // Convert the Classic options to Material options.
        chart.draw(view, google.charts.Bar.convertOptions(options));
      };

Answer 1

there aren't any standard config options that can be used to switch the direction of the bars
the only thing would be to use negative values,
then use object notation to change the formatted values,
so they still appear as positive in the tooltips

{v: -11, f: '11'}

see following working snippet...

 google.charts.load('current', { packages: ['bar'] }).then(function () { var data = new google.visualization.arrayToDataTable([ ['First name', 'Data:'], ["D426 10,0мм", {v: -11, f: '11'}], ["D323,9 9,5мм", {v: -60, f: '60'}], ["D244,5 11,1мм", {v: -248, f: '248'}], ["D168,3 8,9мм", {v: -725, f: '725'}], ["D168,4 8,9мм", {v: -124, f: '124'}], ["D168,5 8,9мм", {v: -643, f: '643'}], ["D168,6 8,9мм", {v: -12, f: '12'}], ["D168,7 8,9мм", {v: -355, f: '355'}], ]); var options = { colors: 'black', legend: {position: 'none'}, axes: {x: {0: { side: 'top', label: 'Project name'}}}, bar: {groupWidth: '10%'}, vAxis:{ textStyle: {color: 'transparent'}, gridlines: {count: '0'} }, }; var chart = new google.charts.Bar(document.getElementById('top_x_div')); chart.draw(data, google.charts.Bar.convertOptions(options)); }); 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="top_x_div"></div> 

note : google.charts.Bar is considered a material chart,
column roles, such as 'style' and 'annotation' are not supported by material
as well as several config options, see --> Tracking Issue for Material Chart Feature Parity

however, material is the only type that supports top-x axis