Google Chart Visualisation Bar Drawing Not Shown

Question

I am working with Google Chart Visualisation and I'm using a Combo Chart with some data I am using. I've noticed that for certain values, the bar is not shown.

I'm using an example found at this page using JSFiddle to better explain the problem: https://developers.google.com/chart/interactive/docs/gallery/combochart

HTML code:

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

JavaScript code:

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

  function drawVisualization() {
    // Some raw data (not necessarily accurate)
    var data = google.visualization.arrayToDataTable([
      ['Month', 'Bolivia', 'Ecuador'],
      ['2004/05',  881,      938   ],
      ['2004/06',  880,      938   ]
    ]);

    var options = {
      title : 'Monthly Coffee Production by Country',
      vAxis: {title: 'Cups'},
      hAxis: {title: 'Month'},
      seriesType: 'bars',
      series: {1: {type: 'line'}}
    };

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

This is what the output is for this model:

But if I change the first row from ['2004/05', 881, 938] to ['2004/05', 880, 938 ] so that the Bolivia values are the same, 880, the output is the following:

and the bars are not shown anymore, because the graph begins at 880 and not 870 as in the first example.

This also reproduces for close values, e.g.

['Month', 'Bolivia', 'Ecuador'],
['2004/05',  92,      95   ],
['2004/06',  92,      95   ]

My question is: Is it possible to force the graph to always start e.g. from 870 so that the bar is always drawn?

WhiteHat WhiteHat · Accepted Answer · 2019-07-30T15:51:49

you can use option viewWindow on the vAxis.

viewWindow has properties for min & max.

  viewWindow: {
    min: 870
  }

see following working snippet..

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

function drawVisualization() {
  // Some raw data (not necessarily accurate)
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Bolivia', 'Ecuador'],
    ['2004/05',  880,      938   ],
    ['2004/06',  880,      938   ]
  ]);

  var options = {
    title : 'Monthly Coffee Production by Country',
    vAxis: {
      title: 'Cups',
      viewWindow: {
        min: 870
      }
    },
    height: 500,
    hAxis: {title: 'Month'},
    seriesType: 'bars',
    series: {1: {type: 'line'}}
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

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

another option is ticks.
you can provide the value for each label to be displayed.

  ticks: [870, 880, 890, 900, 910, 920, 930, 940]

see following working snippet...

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

function drawVisualization() {
  // Some raw data (not necessarily accurate)
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Bolivia', 'Ecuador'],
    ['2004/05',  880,      938   ],
    ['2004/06',  880,      938   ]
  ]);

  var options = {
    title : 'Monthly Coffee Production by Country',
    vAxis: {
      title: 'Cups',
      ticks: [870, 880, 890, 900, 910, 920, 930, 940]
    },
    height: 500,
    hAxis: {title: 'Month'},
    seriesType: 'bars',
    series: {1: {type: 'line'}}
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

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

Google Chart Visualisation Bar Drawing Not Shown

1 Answers