CODEWITHSUNDEEP
javascriptamcharts
Elad Katz
Elad Katz

Reputation: 7591

amcharts' stockchart - how to set several colors to graphs

I'm using Amcharts' stockchart. I see the colors definition in the documentation, but setting it for example to 

colors : ['green', 'red', 'blue'],

only makes it use the first color and ignore the rest. How do I set several different colors?

Upvotes: 0

Views: 258

Answers (1)

xorspark
xorspark

Reputation: 16012

It sounds like your graphs are pulling from the same dataSet. By default, stock graphs' colors are linked to their associated dataset, which is where the colors array will take effect. If you want to bypass this, set useDataSetColors to false in each of your graphs and they'll start using different colors, however, you also need to set your colors array at the panel level, rather than at the top level for this to work. Each panel is a chart instance unto itself and the top-level colors array only applies to the dataSets array, which you are bypassing by disabling useDataSetColors. If you have multiple panels and need to use the same list of colors, you can set it globally at the panelsSettings level, since it takes pretty much every property a panel accepts and applies it to every panel (the documentation will be updated to include the missing colors property).

Here's a snippet of what it should look like:

  "panelsSettings": {
    "colors": ["green", "red", "blue"],
  },

  "panels": [ {

      "stockGraphs": [ {
        "valueField": "value",
        "useDataSetColors": false,
        "title": "Value 1",
        "balloonText": "[[title]]:<b>[[value]]</b>",
      },{
        "valueField": "value2",
        "useDataSetColors": false,
        "title": "Value 2",
        "balloonText": "[[title]]:<b>[[value]]</b>",
      },{
        "valueField": "value3",
        "useDataSetColors": false,
        "title": "Value 3",
        "balloonText": "[[title]]:<b>[[value]]</b>",
      } ],
  }, // ...
  ]

Here's a codepen demo

Upvotes: 1

Related Questions