Change the width of the bars in google chart

Question

Change the width of the bars in google chart

Navigation

#1 by (2 votes)

2

Currently I have the following code where I make the comparison of two data and I graph them in a bar graph, the problem is that the width of the bar is very thick and I want to reduce it, if I enter more data in said graph the width of the bar is reduced but if I leave only two the automatically increases and I would like it to stay the width of my preference, then the code:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Nombre', 'campo1', 'campo2'],
          
          ['Campo1 / Campo2', 50000, 20000]

          /*['Enviados / Devueltos', 8000,7000],
          ['Enviados / Reenviados', 5600,3200],
          ['Enviados / Alcanzados', 4500,2600],
          ['Enviados / Devueltos', 1500,2500],*/
        ]);

        var options = {
          width: 700,
          height: 400,
          chart: {
            title: 'Estado de las campañas',
            subtitle: 'Estado de la campaña: '
          },
          bars: 'horizontal', // Required for Material Bar Charts.
          series: {
            0: { axis: 'brightness' }, // Bind series 0 to an axis named 'distance'. cambiado bright por brightness
            1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
          },
          axes: {
            x: {
              distance: {label: 'parsecs'}, // Bottom x-axis.
              brightness: {side: 'top', label: 'Estado de las campañas'} // Top x-axis.
            }
          }

        };

      var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
      chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="dual_x_div"></div>
  </body>
</html>

If I manipulate the following data:

var options = {
          width: 700,
          height: 400,

I can change the whole size of the graphic including the background, but I only want to change the width of the bars, which are not so thick. Thank you very much in advance.

javascript html5 google-chart-api

asked by Luis Alfredo Serrano Díaz 09.08.2018 в 14:35

source

1 answer

I DO NOT GET ANY MYSQL REGISTER IN PHP MYSQL query does not result

score 2 · Answer 1

Using groupWidth you can change the width of the bars.

Here's a running fiddle: link

var options = {
          width: 800,
          legend: { position: 'none' },
          chart: {
            title: 'Chess opening moves',
            subtitle: 'popularity by percentage' },
          axes: {
            x: {
              0: { side: 'top', label: 'White to move'} // Top x-axis.
            }
          },
          bar: { groupWidth: "10%" }
        };

If you look inside options you add bar: { groupWidth: "10%" } where the groupWidth is the size you want.

Edit : to show the size of just one there is no parameter, but you can do something not so nice but it works, add null values so that the size is modified.

Try this data and you'll see that only 1 value is shown with the size you want.

var data = new google.visualization.arrayToDataTable([
          ['Move', 'Percentage'],
          ["King's pawn (e4)", 44],
          [" ", 0],
          [" ", 0],
          [" ", 0],
          [" ", 0],
        ]);

It would also be easy to implement, because if your data is > 1 you do not need to add anything empty.

Fiddle