title: Showing duration in Google charts vertical axis
body: <p>Using Google Charts, I need to plot duration in vertical axis in hh:mm format. Since hour value can be greater than 24 <code>timeofday</code> is not suitable. </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta content="text/html;charset=utf-8" http-equiv="Content-Type"&gt;
      &lt;meta content="utf-8" http-equiv="encoding"&gt;
      &lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          google.charts.load('current', { 'packages': ['corechart'] });
          google.charts.setOnLoadCallback(drawChart);
          function drawChart() {
              var data = new google.visualization.DataTable();
              data.addColumn('string', 'Topping');
              data.addColumn('timeofday', 'Duration');
              data.addRows([
                  ['Me', [23,59,0]],
                  ['My Boss', [47,59,0]]
              ]);
              var options = {
                  'title': 'How Long We Ate Pizza',
                  'width': 400,
                  'height': 300,
                  'vAxis': { 'format':'HH:mm'}
              };
              var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
              chart.draw(data, options);
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="chart_div"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Graph showing <code>23:59</code> for My Boss.
  <a href="https://i.stack.imgur.com/BQTnn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BQTnn.png" alt="Result graph"></a>
  If I format it to string, I get <code>Data column(s) for axis #0 cannot be of type string</code> error.</p>
  
  <p>Is there any way I can handle it?</p>