Google Chartsの余白調整

Google Chartsを使ったお仕事で悩んだことがあったので残しておこうと思います。

Google Chartsはデータを入れてあげるとグラフを自動で生成しますが、上下左右の余白が大きくあいてしまします。
下記の画像は幅1400px、高さ500pxで作成したグラフです。青い背景部分が指定した幅と高さになっています。

 

 

 

 

 

 

余白はoptionsで調整することが可能です。

var options = {
 chartArea:{left:140,right:35,top:20,width:”100%”,height:”75%”},
};

left:左側の余白
right:右側の余白
top:上部の余白
という感じです。
ただ横軸縦軸はwidthやheightに含まれていないのでleftやtopなどで
縦軸横軸の数値が見えるように調整が必要でした。
まだwidthやheightに関する理解が足りていないですが、調整することはできました。
下記の画像が調整後です。幅と高さは変わっていません。

 

 

 

 

 

 

同じ幅と高さでもここまでグラフを大きく魅せることができます。
Google Chartsはoptionsが多く必要なものを見つけるのが大変ですが
それだけ応用が可能だということです。これからも少しずつ学んでいきたいです。