How to modify bar width of google chart column?

user_14728003 0
Viewed 379

How I can modify the size of bar width of google chart column? I tried to add 'bar: { groupWidth: "20%" }' but it does nothing to the chart.

enter image description here

I really wanted it to make it thinner.

Here is the code that I want to use from google chart:

<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(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          }
        };

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

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 800px; height: 500px;"></div>
  </body>
</html>
charts html javascript
1 Answers

According to the documentation,

The Material Charts are in beta. The appearance and interactivity are largely final, but many of the options available in Classic Charts are not yet available in them. You can find a list of options that are not yet supported in this issue.

One of these options is the bar.groupWidth, which seems to not have support yet.

In this case, since you are working with a group of bars and there's only one array of information in data:

['2017', 1030, 540, 350]

then that option doesn't seem to work. However, if there were two or more groups, it seemed to render but in a limited way. This said, I was able to find some workarounds, each one with its own positive aspects and drawbacks.

Change from Material Charts to Classical Charts

Here you have to reconstruct the chart's code following the Classical one

  • Pros: options fully supported
  • Cons: you will change from Material Charts to Classical Charts

google.charts.load("current", { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Type', 'Financial status',{ role: "style" }],
        ["Sales", 1030, "#4285f4"],
        ["Expenses", 540, "#db4437"],
        ["Profit", 350, "f4b400"],
    ]);

    var view = new google.visualization.DataView(data);
      
    var options = {
        title: "Company Performance",
        subtitle: "Sales, Expenses, and Profit: 2017",
        width: 600, // chart width
        bar: { groupWidth: "45%" },  // width of bars here
        legend: { position: "none" },
    };
    var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
    chart.draw(view, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="columnchart_values" style="width: 900px; height: 300px;"></div>

Separate that only group of bars into single bars

Put that only group bar in different arrays and adapt your labels

  • Pros: the width will indeed change from 0 to 100% in groupWidth
  • Cons: looses colored bars

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

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Type', 'Financial status'],
        ["Sales", 1030],
        ["Expenses", 540],
        ["Profit", 350],
    ]);

    var options = {
        chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2017',
        },
        bar: { groupWidth: '50%' }, // change width here
        width: 600, // width of the chart
        height: 400 // height of the chart
    };

    var chart = new google.charts.Bar(document.getElementById('chart_div'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
}

google.charts.load('current', { 'packages': ['bar'] });
google.charts.setOnLoadCallback(drawChart);
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 300px;">

Use meaningless arrays

Put the array of information in the middle of two other meaningless arrays so that you center your main data and gives the impression

  • Pros: still uses the Material Chart design
  • Cons: stretches the bars, doesn't provide space between bars

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

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses', 'Profit'],
        [' ', 0, 0, 0], // meaningless
        ['2017', 1030, 540, 350],
        [' ', 0, 0, 0] // meaningless
    ]);

    var options = {
        chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2017',
        },
        bar: { groupWidth: '90%' }, // change width of bar here,
        width: 600, // width of the chart
        height: 400, // height of the chart
    };

    var chart = new google.charts.Bar(document.getElementById('chart_div'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 300px;">

user_120969220
Related