谷歌图表标签被切断

如何解决谷歌图表标签被切断

这是一个代码笔 https://codepen.io/nick-ladieu/pen/PobBbXM

这是我目前的 JS

    google.load("visualization","1",{packages:["corechart"]});
google.setonLoadCallback(drawChart1);
function drawChart1() {
        var data = google.visualization.arrayToDataTable([
          ['Task','Hours per Day'],['Work',11],['Eat',2],['Commute',['Watch TV',['Sleep',7]
        ]);

        var options = {
          title: "",chartArea: {
      left: '3%',top: '3%',height: '100%',width: '100%'
    },pieHole: 0.2,width:'100%',height:'100%',tooltip: {
              trigger: "none"
            },pieSliceBorderColor: "none",pieSliceText: "none",colors: ['green','blue','pink','orange','purple' ],legend: {
            position: "labeled",},};

var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data,options);
}

google.load("visualization",{packages:["corechart"]});
google.setonLoadCallback(drawChart2);
function drawChart2() {
  var data = google.visualization.arrayToDataTable([
    ['Year','Sales','Expenses'],['2013',1000,400],['2014',1170,460],['2015',660,1120],['2016',1030,540]
  ]);

  var options = {
    title: 'Company Performance',hAxis: {title: 'Year',titleTextStyle: {color: '#333'}},vAxis: {minValue: 0}
  };

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div2'));
  chart.draw(data,options);
}

$(window).resize(function(){
  drawChart1();
  drawChart2();
});

我正在尝试制作一个响应式布局，其中包括一个圆环图，其中客户要求图表包含标签线而不是图例。

我有一些工作，但是当宽度减少到移动视图时，图表标签被切断，我不确定如何动态减小图表大小以便标签可见

Example of issue