Google Visualization library loading creates two d

Question

I'm having a very frustrating issue with proper loading of the Google Visualization library. I have two charts on my page. One is a columnchart and the other is a linechart.

Im loading my library like this: google.load('visualization', '1.0', {'packages':['corechart'],'callback':drawcharts});

Then im calling my columnchart like this:

var chart = new google.visualization.ColumnChart(chartDiv)

and my linechart like this:

myLineChart = new google.visualization.LineChart(document.getElementById('myChart2'));

This results in the following two charts:

The first pic is the linechart and that is the issue. When i instead load my visualization library like this:

google.load('visualization', '1.0', {'packages':['linechart','columnchart'], 'callback': drawcharts});

I get my linechart how I want it:

but my columnchart becomes like this:

I've tried adjusting the bar:groupwidth on the columnchart but i'm getting issues when using an Addlistener event on the columnchart.

How can I load the libraries required so I can have the corechart version of the linechart and the normal columnchart (not the one with corechart)? Basically, image 2 and 3? How is corechart.linechart different from just loading linechart?

Answer 1

Such a silly mistake. My width of my chart div and the width set in my chart options were not the same. When I made them the same, it works fine.