Google Charts Labels are being Cut off

Question

Here is a codepen https://codepen.io/nick-ladieu/pen/PobBbXM

Here is my current 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',  2],
          ['Watch TV', 2],
          ['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", "1", {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();
});

I am trying to make a responsive layout which includes a donut chart where the client has requested that the chart include the lines for labels instead of a legend.

I have this somewhat working, however when the width is reduced to a mobile view the chart labels are cut off, I'm not sure how to approach dynamically reducing the chart size so that the labels can be visble

Example of issue

Answer 1

What worked for me was to change the font size with css. Normally you would want your mobile font size smaller, so my advice is:

.your-chart-class text {
font-size: 11px; /* or any other smaller font size you want */
}