title: Change the color of graph in stockchart of AmCharts
body: <p>I want to change the color of the charts in Stock-Chart. There are more than one chart in the bottom panel. These charts should have different color.</p>
  
  <p>Snippet is here:
  <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>var chartData = generateChartData();
  
  function generateChartData() {
      var chartData = [];
      var firstDate = new Date(2012, 0, 1);
      firstDate.setDate(firstDate.getDate() - 1000);
      firstDate.setHours(0, 0, 0, 0);
  
      for (var i = 0; i &lt; 1000; i++) {
          var newDate = new Date(firstDate);
          newDate.setHours(0, i, 0, 0);
  
          var a = Math.round(Math.random() * (40 + i)) + 100 + i;
          var b = Math.round(Math.random() * (40 + i)) + 100 + i;
  
          chartData.push({
              "date": newDate,
              "value": a,
              "volume": b
          });
      }
      return chartData;
  }
  
  var chart = AmCharts.makeChart("chartdiv", {
      "type": "stock",
      "theme": "light",
      "categoryAxesSettings": {
          "minPeriod": "mm"
      },
      "dataSets": [{
          "color":"red", //it changes the color of all the graphs, i need different color for bottom panel.
          "fieldMappings": [{
              "fromField": "value",
              "toField": "value"
          }, {
              "fromField": "volume",
              "toField": "volume"
          }],
          "dataProvider": chartData,
          "categoryField": "date"
      }],
      "panels": [{
          "showCategoryAxis": false,
          "title": "Value",
          "percentHeight": 70,
          "stockGraphs": [{
            "fillAlphas": 0,
        "fillColors":"red",
              "id": "g1",
              "valueField": "value",
              "type": "smoothedLine",
              "lineThickness": 2,
              "bullet": "round",
              
          }],
          "stockLegend": {
              "valueTextRegular": " ",
              "markerType": "none"
          }
      }, 
      {
          "title": "Volume",
          "percentHeight": 30,
          "valueAxes": [{
              "id": "ValueAxis-1",
              "title": "Axis title"
          }],
          "stockGraphs": [{
                  "valueField": "volume",
                  "type": "column",
                  "cornerRadiusTop": 2,
                  "fillAlphas": 1,
                          "fillColorsField":"red"
              },
              {
                  "valueField": "value",
                  //"type": "column",
                  "cornerRadiusTop": 5,"fillColorsField":"red"
              }
          ],
          "stockLegend": {
              "valueTextRegular": " ",
              "markerType": "none"
          }
      }],
      "chartScrollbarSettings": {
          "graph": "g1",
          "usePeriod": "10mm",
          "position": "top"
      },
  
      "chartCursorSettings": {
          "valueBalloonsEnabled": true
      },
  
      "periodSelector": {
          "position": "top",
          "dateFormat": "YYYY-MM-DD JJ:NN",
          "inputFieldWidth": 150,
          "periods": [{
              "period": "hh",
              "count": 1,
              "label": "1 hour",
              "selected": true
          }, {
              "period": "hh",
              "count": 2,
              "label": "2 hours"
          }, {
              "period": "hh",
              "count": 5,
              "label": "5 hour"
          }, {
              "period": "hh",
              "count": 12,
              "label": "12 hours"
          }, {
              "period": "MAX",
              "label": "MAX"
          }]
      },
  
      "panelsSettings": {
          "usePrefixes": true
      },
  
      "export": {
          "enabled": true,
          "position": "bottom-right"
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#chartdiv {
    width: 100%;
    height: 400px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://www.amcharts.com/lib/3/amcharts.js"&gt;&lt;/script&gt;
  &lt;script src="https://www.amcharts.com/lib/3/serial.js"&gt;&lt;/script&gt;
  &lt;script src="https://www.amcharts.com/lib/3/amstock.js"&gt;&lt;/script&gt;
  &lt;script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" /&gt;
  &lt;script src="https://www.amcharts.com/lib/3/themes/light.js"&gt;&lt;/script&gt;
  &lt;div id="chartdiv"&gt;&lt;/div&gt;          </code></pre>
  </div>
  </div>
  </p>
  
  <p>If i change color in datasets then it changes all the graphs color. I want to give them different color. There are two graphs in bottom panel. One is column and another is line. They should also have different color.</p>
  
  <p>I tried all the color properties given in the amCharts documentation but nothing is working(<a href="https://docs.amcharts.com/javascriptcharts" rel="nofollow noreferrer">Ref.</a>). How to do this thing?</p>