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

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?

xorspark · Accepted Answer

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

Change the color of graph in stockchart of AmCharts

Answers (2)

Related Questions