CODEWITHSUNDEEP
javascriptgoogle-visualization
Zero
Zero

Reputation: 77027

Google charts column chart width

I am using bar chart Google Visualization. I have a problem with the way data points are plotted for the first and last data points.

Plot

As, you can see, first data point (the one before 1985) and last data point is not shown completely. I width is reduced for these. I think padding is some issue.

I am using following code:

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

function drawChart(dataArray) {
    var data = google.visualization.arrayToDataTable(dataArray);

    var options1 = {
      hAxis: {title: 'Year', titleTextStyle: {color: 'Black', italic: false}, format:''},
      vAxis: {gridlines:{count:5}},
      colors:['green'],
      'chartArea': {'width': '90%', 'height': '80%'},         
      sliceVisibilityThreshold:0  //zero value item still show up 
    };

    var chart1 = new google.visualization.ColumnChart(document.getElementById('columnChart'));
    chart1.draw(data, options1);
  }

Upvotes: 1

Views: 2167

Answers (1)

dlaliberte
dlaliberte

Reputation: 3260

Your code doesn't show the data table, but we can guess that the first column values are numbers. There is a bug in how column charts are drawn such that half the first and last bars are off the chart. You could compensate by determining the min and max values yourself, and setting the viewWindow.min and max options to your data min and max plus half the bar width more.

This bug is being fixed in the most recent release, however, so you won't need to work around it after that. You should be able to see that fix if you change your google.load call to use "1.1" instead of "1".

Upvotes: 1

Related Questions