title: How to change the bar color in Highcharts
body: <p>I am using Highcharts for building charts and the default color that I see is blue. How can I change the color to green ?</p>
  
  <p>I tried adding the colors array by looking at the online API <a href="http://api.highcharts.com/highcharts#colors" rel="nofollow">http://api.highcharts.com/highcharts#colors</a> but may be I am not setting it at the correct place.</p>
  
  <p><strong>Highcharts JS v4.1.9</strong> </p>
  
  <p><strong>index.jsp</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Start Page&lt;/title&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1 align="center"&gt;Highcharts - Basic Column Chart demo!&lt;/h1&gt;
          &lt;div id="container" style="width: 550px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;
          &lt;script language="JavaScript"&gt;
              $(document).ready(function () {
                  var chart = {
                      type: 'column'
                  };
                  var title = {
                      text: 'Monthly Average Rainfall'
                  };
                  var subtitle = {
                      text: 'Source: WorldClimate.com'
                  };
  
                  var xAxis = {
                      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                      crosshair: true
                  };
                  var yAxis = {
                      min: 0,
                      title: {
                          text: 'Rainfall (mm)'
                      }
                  };
                  var tooltip = {
                      headerFormat: '&lt;span style="font-size:10px"&gt;{point.key}&lt;/span&gt;&lt;table&gt;',
                      pointFormat: '&lt;tr&gt;&lt;td style="color:{series.color};padding:0"&gt;{series.name}: &lt;/td&gt;' +
                              '&lt;td style="padding:0"&gt;&lt;b&gt;{point.y:.1f} mm&lt;/b&gt;&lt;/td&gt;&lt;/tr&gt;',
                      footerFormat: '&lt;/table&gt;',
                      shared: true,
                      useHTML: true
                  };
                  var plotOptions = {
                      column: {
                          pointPadding: 0.2,
                          borderWidth: 0
                      }
                  };
                  var credits = {
                      enabled: false
                  };
  
                  var series = [{
                          name: 'Tokyo',
                          data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
                      }];
  
                  var json = {};
                  json.chart = chart;
                  json.title = title;
                  json.subtitle = subtitle;
                  json.tooltip = tooltip;
                  json.xAxis = xAxis;
                  json.yAxis = yAxis;
                  json.series = series;
                  json.plotOptions = plotOptions;
                  json.credits = credits;
                  $('#container').highcharts(json);
              });
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Please guide.</p>