Adding stroke to google chart - Javascript Google Chart

Javascript examples for Google Chart:Chart Configuration

  1. HOME
  2. Javascript
  3. Google Chart
  4. Chart Configuration

Description

Adding stroke to google chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Point Customization Example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script> 
      <div id="chart_div" style="width: 900px; height: 500px;"></div> 
      <script type="text/javascript">
      google.setOnLoadCallback(drawChart);
      function drawChart() {//from   w  ww  .  j a  v a2s  .c  om
        var dataArray = [
          ['X', 'Y', {
            'type': 'string',
            'role': 'style'
          }],
          [1, 3],
          [2, 2.5],
          [3, 3],
          [4, 4],
        ];
        for (i = 1; i < dataArray.length; i++) {
          dataArray[i].push('point {stroke-width: 2;  stroke-color: #e97b2c; fill-color: #eeeeee }');
        }
        var data = google.visualization.arrayToDataTable(dataArray);
        var options = {
          colors: ['#e97b2c'],
          pointSize: 8,
        };
        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }

      </script>  
   </body>
</html>

Related Tutorials