rails google chart bar chart vAxis label使用移动设备宽度的一半

Question

我有一个在桌面上显示良好的图表，但在移动/小屏幕（手机）上，v轴上的标签被切断（见图）。

如何缩小图表以使图表使用50％的宽度，而标签使用另外50％的chartArea，以便标签可以显示为全长而不会被截断。

这是我的代码：
CSS

#chart_div {
   width: 100%;
   margin: 0 auto;
}  

.html.erb

<div id="chart_div" class="col-md-12 nopadding">
  <%= bar_chart $top_10_time48_ht.reverse, id: "bar_chart $top_10_time48_ht", xtitle: "Number of times used", ytitle: "Top Hashtags", colors: ["#C2F4FF"], download: "top_hashtags", refresh: 300,
    library: { 
      chartArea: {left: "15%", top: "30", width: "100%"},
      vAxis: { baselineColor: "#F76161",  gridlines: {Color: "#FFFFFF" }, textStyle: { color: "#76BDD1", fontSize: "12", fontName: "Arial", fontStyle: "normal"}, titleTextStyle: {color: "#F76161", fontSize: "18", padding:"30px" } }, 
      hAxis: { baselineColor: "#F76161" , gridlines: {Color: "#FFFFFF", count: "-1" }, textStyle: { color: "#76BDD1"} , titleTextStyle: {color: "#F76161", fontSize: "16"} } } %> 

我无法使用媒体查询（CSS），因为图表的设置位于.html.erb

还有一种方法可以将haxis标题放在垂直轴的顶部，或者将图表标题放在haxis（垂直轴）之前的左侧。