Change the color of graph in stockchart of AmCharts

Question

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?

did u look into this: http://www.amcharts.com/demos/line-with-changing-color/ — Hash, Jul 26 '17 at 11:40

score 4 · Accepted Answer · answered Jul 26 '17 at 12:21

You can set useDataSetColors to false in each stockGraph to make it so that each graph has a different color. Setting this to false will also allow you to directly set the color inside the graph object through their own fillColors and lineColor, as well as their associated *colorField properties if you have colors defined in your data.

stockGraphs: [{
   useDataSetcolors: false, //set for each stockGraph object where you don't 
                            //want the graph to use the dataSet color and generate its own.
   // ...
}, {
   useDataSetcolors: false,
}]

Updated demo:

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", 
    "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": [{
          "useDataSetColors": false,
          "valueField": "volume",
          "type": "column",
          "cornerRadiusTop": 2,
          "fillAlphas": 1,
          "fillColorsField": "red" //note that this looks for colors in your data for eacc point. use fillColors instead if you want to change the color directly for all points
        },
        {
          "useDataSetColors": false,
          "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>

This is what i was looking for. Thanks once again @xorspark – Rabinder Bisht Jul 26 '17 at 13:10 — Rabinder Bisht, Jul 26 '17 at 13:10

score 1 · Answer 2 · answered Jul 26 '17 at 11:46

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;
}
.amChartsPanel rect.amcharts-graph-column-front.amcharts-graph-column-element {
    fill: #000;
    stroke: #000;
}

<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>

Balloon border color should be of the same color as the graph. Black should have black balloon border, it will be easy to identify in this manner. Thanks for your reply. — Rabinder Bisht, Jul 26 '17 at 13:14
okay. @xorspark answer is correct. I am understand solution from him answer. Thank you — Dhaarani, Jul 26 '17 at 13:31

Change the color of graph in stockchart of AmCharts

2 Answers2