Google Charts Axis Percentage

Question

I want to have the figure as a % but its not working for me. I also want to get rid of the time that is next to the date when your hover over the chart.

Any ideas? Thanks.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>

<script type='text/javascript' src='/js/lib/dummy.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type='text/javascript' src="https://www.google.com/jsapi"></script>


<script type='text/javascript'>//<![CDATA[ 

google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Test 1');
  data.addColumn('number', 'Product 1');
  data.addColumn('number', 'Product 2');
  data.addColumn('number', 'Product 3');      

  data.addRows([



  [new Date(2015, 01, 1),  73, 88, 96, 79],[new Date(2015, 02, 1),  100, 75, 86, 90],[new Date(2015, 03, 1),  76, 95, 93, 86],[new Date(2015, 04, 1),  95, 75, 100, 98],[new Date(2015, 05, 1),  91, 31, 88, 85],[new Date(2015, 06, 1),  90, 74, 72, 79],[new Date(2015, 07, 1),  95, 80, 90, 78],      ]);

  var options = {
    chart: {
      title: 'test',
      subtitle: '',
    },
    width: 1300,
    height: 600,
    vAxis: { format: 'percent' }



  };

  var chart = new google.charts.Line(document.getElementById('linechart_material'));

  chart.draw(data, options);
  }
//]]>  

</script>


</head>
<body>


<div id="linechart_material"></div>

 </body>


 </html>

Henrik Aronsson Henrik Aronsson · Accepted Answer · 2015-07-07T19:08:28

Reading the Line Chart documentation you can tell that you need to use chart.draw(data, google.charts.Line.convertOptions(options)); in replacement of your chart.draw(data, options);.

Using the % suffix will cause some unwanted formatting though,it'll mutliply your data with 100, but you can just divide your data by 100 first.

Google Charts Axis Percentage

1 Answers