I have integrated the Google API for charts into my application and am using multiple charts on the same page. However, I am facing an issue with setting padding for the charts. When I include more data points, the chart area occupies more space in the div, and when there are fewer points, it occupies less space and is center aligned. The first chart is properly aligned from left to right, but the second chart with only two points is centered. How can I ensure that all charts are aligned consistently from the leftmost to the rightmost point, similar to the first chart?
Below is my code:
<script>
var data1 = google.visualization.arrayToDataTable([
['year', 'Cats'],
['2009', 20],
['2010', 23],
['2011', 34],
['2012', 43]
]);
var data2 = google.visualization.arrayToDataTable([
['year', 'Cats'],
['2007', 20],
['2008', 23]
]);
var options = {
pointSize: 5,
width: 211,
height: 90,
backgroundColor: '#ffffff',
chartArea: {
left: 10,
top: 10,
width: 195,
height: 56
},
legend: {position: 'none'},
hAxis: {
baselineColor: '#fff',
gridlineColor: '#fff',
textStyle: {italic: false, color: '#ccc', fontSize: 10}
},
vAxis: {
baselineColor: '#fff',
gridlineColor: '#fff',
textPosition: 'none'
},
tooltip: {
textStyle: {fontSize: 10}
},
series:{
0:{
color:'#0066CC'
}
}
};
var chart1 = new google.visualization.LineChart(document.getElementById('chart1'));
var chart2 = new google.visualization.LineChart(document.getElementById('chart2'));
chart1.draw(data1, options);
chart2.draw(data2, options);
</script>