CODEWITHSUNDEEP
chartsgoogle-visualizationbar-chart
user1322093
user1322093

Reputation:

Remove padding in Google Bar Charts

I need a simple bar chart with only one percentage bar and labels. I'm trying to remove the padding between the bar and the total canvas with 'chartArea' but the result it's not the expected, anyone knows how i can do that?

<https://jsfiddle.net/rro74054/1/>

I set a 'tomato' background color to make the space more visible.

Thanks everyone.

Upvotes: 1

Views: 783

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

Add this to your options...

    bar: {
      groupWidth: '100%'
    },

Example...

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

function drawRightY() {
  var data = google.visualization.arrayToDataTable([
    ['', 'name1', {type: 'string', role: 'annotation'}, 'name2', {type: 'string', role: 'annotation'}, 'name3', {type: 'string', role: 'annotation'}],
    ['', 50, '50', 100, '100', 150, '150']
  ]);

  var options = {
    width: 400,
    height: 400,
    bar: {
      groupWidth: '100%'
    },
    chartArea: { width: '100%', height: '100%', backgroundColor: 'tomato'},
    isStacked: 'percent',
    annotations: {
      alwaysOutside: false,
      textStyle: {
        fontSize: 10,
        auraColor: 'none',
        color: '#fff'
      }
    },
    legend: 'none',
    enableInteractivity: false,
    hAxis: {
        baseline: 0,
        gridlines: { count: 0 }
    }
  };

  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>

Upvotes: 1

Related Questions