Change the color of graph in stockchart of AmCharts

Viewed 2862

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.

Snippet is here:

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 < 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"
    }
});
#chartdiv {
  width: 100%;
  height: 400px;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/amstock.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>          

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.

I tried all the color properties given in the amCharts documentation but nothing is working(Ref.). How to do this thing?

2 Answers
Related