Gap on right and left sides in areaChart

59 views Asked by At

I am using Google Charts to visualize some data. When drawing full width chart in bordered container I can see small gaps on the left and right side. Is it possible to remove it? The chart area width is set to 100%.

enter image description here

JS:

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales'],
    ['2013',  1000],
    ['2014',  1170],
    ['2015',  660],
    ['2016',  1030]
  ]);

  var options = {
    hAxis: {
      textPosition: 'none',
      gridlines: {
        color: 'transparent'
      }
    },
    vAxis: {
      textPosition: 'none',
      gridlines: {
        color: 'transparent'
      }
    },
    legend: { position: 'none' },
    chartArea: {
      'width': '100%',
      'height': '100%',
      'backgroundColor': '#fff'
    },
    colors: ['#ddd'],
    height: 50,

    lineWidth: 0,
    areaOpacity: 1,
    annotations: {
      stemColor : 'none'
    },
    tooltip : {
      trigger: 'none'
    }
  };

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

HTML:

<div class="row">
  <div class="col-md-3">
     <div id="chart"></div>
  </div>
</div>

FIDDLE: https://jsfiddle.net/5m6fLckw/5/

0

There are 0 answers