title: google charts title alignment and font size
body: <p>I am extremely new to the Google Charts API.</p>
  
  <p>The code below generates two different chat types. However the titles of the both of the charts appear to be aligned differently. I would like them to be aligned in the same way, however I can't seem to get them aligned identically. Lastly I want the second line of text in the title to appear a little smaller than the initial line.</p>
  
  <p><strong>Current Output:</strong></p>
  
  <p>From the image below:</p>
  
  <ul>
  <li>(right image) <code>Values Sunday...</code> appears too high and to the left of the y-axis values</li>
  <li>(left image) the y-axis appear a little too left when compared to the right image</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/4FRFw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4FRFw.png" alt="enter image description here"></a></p>
  
  <p><strong>Ideal Output:</strong></p>
  
  <p>Disregard the red lines - they're there for referencing.</p>
  
  <p><a href="https://i.stack.imgur.com/hyy2Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hyy2Q.png" alt="enter image description here"></a></p>
  
  <p><strong>Desired Output:</strong></p>
  
  <p>Once all the strings are in place, I would like the second line and any line thereafter to be smaller than the first line like so:</p>
  
  <p><a href="https://i.stack.imgur.com/aggX3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aggX3.png" alt="enter image description here"></a></p>
  
  <p><strong>Questions:</strong>
  How can I modify the code below so I can get the desired output above?</p>
  
  <p><strong>MWE:</strong> 
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//----------------[               START OF              ]----------------//
  //----------------[ GENERATES THE BOX AND WHISKER CHART ]----------------//
  
  
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawBoxPlot);
  
   function drawBoxPlot() {
  
    var data = new google.visualization.DataTable();
  
    data.addColumn('string', 'DOW &amp; Date');
    data.addColumn('number', 'Min');
    data.addColumn('number', 'Lower Quarterile');
    data.addColumn('number', 'Median');
    data.addColumn('number', 'Upper Quarterile');
    data.addColumn('number', 'Max');
  
    data.addColumn({id:'max', type:'number', role:'interval'});
    data.addColumn({id:'min', type:'number', role:'interval'});
    data.addColumn({id:'firstQuartile', type:'number', role:'interval'});
    data.addColumn({id:'median', type:'number', role:'interval'});
    data.addColumn({id:'thirdQuartile', type:'number', role:'interval'});
  
    var array = [
     ['Monday\n(16/12/2019)', 24.1, 25.1, 25.9, 26.7, 27.8],
     ['Tuesday\n(17/12/2019)', 23.3, 24.2, 25.0, 26.2, 28.0],
     ['Wednesday\n(18/12/2019)', 24.3, 25.0, 25.7, 26.2, 26.9],
     ['Thursday\n(19/12/2019)', 24.2, 24.9, 25.4, 25.8, 26.9],
     ['Friday\n(20/12/2019)', 24.1, 25.0, 25.4, 26.0, 27.0],
     ['Saturday\n(21/12/2019)', 24.0, 25.1, 26.0, 26.9, 27.9],
     ['Sunday\n(22/12/2019)', 23.5, 24.8, 25.65, 26.55, 27.6],
    ]; // End var array
  
    data.addRows(getBoxPlotValues(array));
  
    /*
     * Takes an array of input data and returns an 
     * array of the input data with the box plot
     * interval data appended to each row.
    */
  
    function getBoxPlotValues(array) {
     for (var i = 0; i &lt; array.length; i++) {
  
      var arr = array[i].slice(1).sort(function (a, b) {
       return a - b;
      });
  
      var min = arr[0];
      var firstQuartile = arr[1];
      var median = arr[2];
      var thirdQuartile = arr[3];
      var max = arr[4];
  
      array[i][6] = max;
      array[i][7] = min;
      array[i][8] = firstQuartile;
      array[i][9] = median;
      array[i][10] = thirdQuartile;
      
     } // End for loop
     return array;
    } // End function getBoxPlotValues(array)
  
  
    var options = {
     title:'Box \&amp; Whisker Chart:\nValues',
     height: 450,
     width: 1000,
     lineWidth: 0,
     series: [{'color': '#D3362D'}],
     // chartArea: {width: 900, height: 150},
     legend: {position: 'none'},
     hAxis: {
      title: 'Days of the Week',
      titleTextStyle: {bold: false, italic: false},
      slantedTextAngle: 0,
     }, // End hAxis
     vAxis: {
      title: 'Values',
      titleTextStyle: {bold: false, italic: false},
      gridlines: {color: '#d0d0d0'},
      viewWindow: {min: 22, max: 28},
      ticks: [22, 23, 24, 25, 26, 27, 28],
     }, // End vAxis
     intervals: {
      barWidth: 0.5,
      boxWidth: 0.5,
      lineWidth: 1.0,
      style: 'boxes',
      color: '#188785',
     }, // End intervals
     interval: {
      max: {
       style: 'bars',
       fillOpacity: 0,
       color: '#101010'
      }, // End max
      min: {
       style: 'bars',
       fillOpacity: 0,
       color: '#101010'
      }, // End min
     }, // End interval
    }; // End var options
  
   var chart = new google.visualization.LineChart(document.getElementById('box_and_whisker_chart'));
    
    function setTitle()
   {
    //get label copy to change
    var labelContent = options.title.split('\n');
  
    //get chart labels
    var labels = chart.getContainer().getElementsByTagName('text');
  
    //loop chart title lines, beginning from the second line
    for (var l = 1; l &lt; labelContent.length; l++)
    {
     //find the chart label
     for (var i = 0; i &lt; labels.length; i++)
     {
      if (labels[i].textContent === labelContent[l])
      {
       //reduce font size
       labels[i].setAttribute('font-size', origFontSize);break;
      } //End if statement
     } //End for loop for labels
    } //End for loop for chart lines
   } //End function setTitle()
  
   chart.draw(data, options);
   } // End function drawBoxPlot()
  
  
  //----------------[ GENERATES THE BOX AND WHISKER CHART ]----------------//
  //----------------[                  END                ]----------------//
  
  //----------------[               START OF              ]----------------//
  //----------------[      GENERATES THE LINE CHART       ]----------------//
  
  
  google.charts.load('current', {'packages':['line']});
  google.charts.setOnLoadCallback(drawChart);
  
   function drawChart() {
  
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Time of Day');
    data.addColumn('number', 'Voltage');
  
    data.addRows([ 
  
     [new Date(2019, 11, 22, 0, 0, 0), NaN],
  
     [new Date(2019, 11, 22, 0, 22, 28), 24.2],
     [new Date(2019, 11, 22, 0, 40, 16), 26.8],
     [new Date(2019, 11, 22, 0, 41, 51), 26.3],
     [new Date(2019, 11, 22, 1, 23, 21), 25.0],
     [new Date(2019, 11, 22, 1, 35, 5), 27.4],
     [new Date(2019, 11, 22, 1, 45, 27), 24.7],
     [new Date(2019, 11, 22, 1, 47, 46), 25.4],
     [new Date(2019, 11, 22, 1, 53, 21), 25.5],
     [new Date(2019, 11, 22, 2, 0, 30), 25.1],
     [new Date(2019, 11, 22, 2, 32, 42), 24.4],
     [new Date(2019, 11, 22, 3, 30, 29), 25.2],
     [new Date(2019, 11, 22, 3, 35, 26), 26.6],
     [new Date(2019, 11, 22, 4, 11, 38), 24.6],
     [new Date(2019, 11, 22, 4, 30, 50), 25.6],
     [new Date(2019, 11, 22, 4, 37, 27), 23.7],
     [new Date(2019, 11, 22, 4, 58, 21), 27.5],
     [new Date(2019, 11, 22, 5, 24, 25), 26.0],
     [new Date(2019, 11, 22, 5, 42, 55), 24.9],
     [new Date(2019, 11, 22, 6, 10, 44), 23.9],
     [new Date(2019, 11, 22, 6, 51, 58), 23.5],
     [new Date(2019, 11, 22, 7, 6, 27), 27.4],
     [new Date(2019, 11, 22, 7, 50, 53), 26.2],
     [new Date(2019, 11, 22, 8, 1, 7), 26.7],
     [new Date(2019, 11, 22, 9, 17, 36), 24.6],
     [new Date(2019, 11, 22, 10, 5, 0), 26.9],
     [new Date(2019, 11, 22, 10, 22, 28), 26.2],
     [new Date(2019, 11, 22, 10, 30, 34), 24.6],
     [new Date(2019, 11, 22, 11, 41, 52), 24.0],
     [new Date(2019, 11, 22, 11, 49, 32), 27.4],
     [new Date(2019, 11, 22, 12, 40, 35), 27.0],
     [new Date(2019, 11, 22, 13, 16, 46), 27.2],
     [new Date(2019, 11, 22, 13, 54, 43), 26.3],
     [new Date(2019, 11, 22, 13, 56, 49), 25.8],
     [new Date(2019, 11, 22, 14, 37, 12), 26.3],
     [new Date(2019, 11, 22, 15, 23, 55), 25.3],
     [new Date(2019, 11, 22, 15, 46, 11), 25.6],
     [new Date(2019, 11, 22, 16, 18, 29), 25.5],
     [new Date(2019, 11, 22, 16, 44, 4), 27.6],
     [new Date(2019, 11, 22, 17, 28, 58), 26.0],
     [new Date(2019, 11, 22, 18, 15, 30), 26.1],
     [new Date(2019, 11, 22, 18, 37, 59), 23.6],
     [new Date(2019, 11, 22, 18, 56, 52), 25.7],
     [new Date(2019, 11, 22, 18, 59, 0), 26.5],
     [new Date(2019, 11, 22, 19, 0, 29), 26.2],
     [new Date(2019, 11, 22, 19, 19, 11), 24.9],
     [new Date(2019, 11, 22, 19, 37, 12), 27.6],
     [new Date(2019, 11, 22, 20, 0, 49), 27.4],
     [new Date(2019, 11, 22, 20, 27, 8), 26.4],
     [new Date(2019, 11, 22, 20, 28, 32), 26.3],
     [new Date(2019, 11, 22, 20, 33, 35), 23.9],
     [new Date(2019, 11, 22, 21, 18, 59), 25.4],
     [new Date(2019, 11, 22, 22, 26, 7), 25.0],
     [new Date(2019, 11, 22, 22, 57, 55), 24.1],
     [new Date(2019, 11, 22, 23, 8, 23), 23.5],
     [new Date(2019, 11, 22, 23, 21, 59), 27.2],
     [new Date(2019, 11, 22, 23, 28, 5), 25.2],
  
     [new Date(2019, 11, 23, 0, 0, 0), NaN],
    ]);  // End data.addRows
  
    // Begin var options
    var options = {
     title: 'Values\nSunday 22/12/2019',
     titleTextStyle: {bold: true, color: 'black', fontSize: 14, fontName: 'Arial'},
     legend: {position: 'none'},
     width: 650,
     height: 420,
     colors: '#188785',
     pointSize: 7,
     dataOpacity: 0.3,
     // trendlines: { 0: {type: 'linear', color: 'green', pointsVisible: true} },    // Draw a trendline for data series 0.
     // lineWidth: 1,
     // chartArea: {width: 600, height: 250},
     vAxis: {
      title: 'Values',
      titleTextStyle: {bold: false, italic: false, fontSize: 15, fontName: 'Arial'},
      gridlines: {color: '#d0d0d0'},
      viewWindow: {min: 22, max: 28},
      ticks: [22, 23, 24, 25, 26, 27, 28],
      textStyle: {
       color: 'black',
       fontSize: 14,
       fontName: 'Arial',
      }, // End vAxis.textStyle
     }, // End vAxis
     hAxis: {
      title: 'Time of the Day',
      format: 'HH:mm',
      titleTextStyle: {
       bold: false,
       italic: false, 
        fontSize: 15, 
       fontName: 'Arial', 
       color: 'black'
      }, // End hAxis.titleTextStyle
     }, // End hAxis
    };  // End var options
  
  
    var chart = new google.charts.Line(document.getElementById('line_chart'));
  
    var origFontSize;
  
    //listen for chart ready event
    google.visualization.events.addListener(chart, 'ready', function ()
    {
     //save font size of chart label
     var labels = chart.getContainer().getElementsByTagName('text');
     origFontSize = parseInt(labels[0].getAttribute('font-size')) - 4;
     setTitle();
  
     //listen for changes to the chart
     var observer = new MutationObserver(setTitle);
     observer.observe(chart.getContainer(),
     {
      childList: true,
      subtree: true
     }); // End observer.observe(chart.getContainer()
    });  // End google.visualization.events.addListener(chart, 'ready', function ()
  
      // Try to set the second line into a smaller font size
    function setTitle()
    {
     //get label copy to change
     var labelContent = google.charts.Line.convertOptions(options).title.split('\n');
  
     //get chart labels
     var labels = chart.getContainer().getElementsByTagName('text');
  
     //loop chart title lines, beginning from the second line
     for (var l = 1; l &lt; labelContent.length; l++)
     {
      //find the chart label
      for (var i = 0; i &lt; labels.length; i++)
      {
       if (labels[i].textContent === labelContent[l])
       {
        //reduce font size
        labels[i].setAttribute('font-size', origFontSize);break;
       } // End if statement
      }
     } //End for loop for chart line
    } //End function setTitle()
  
    chart.draw(data, google.charts.Line.convertOptions(options));
   } //End drawChart()
  
  
  //----------------[      GENERATES THE LINE CHART       ]----------------//
  //----------------[                  END                ]----------------//</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#wrapper {
   display: flex;
  }
  
  #left {
   flex: 0 0 0%;
  }
  
  #right {
   margin: 2%;
   flex: 1;
   padding-right: 150px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
  &lt;div id="wrapper"&gt;
   &lt;div id="left"&gt;&lt;div id="box_and_whisker_chart"&gt;&lt;/div&gt;&lt;/div&gt;
   &lt;div id="right"&gt;&lt;div id="line_chart"&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>