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%.
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/
