CODEWITHSUNDEEP
amcharts
barteloma
barteloma

Reputation: 6875

How can I set amCharts stacked column style colors automatically

I want to create a generic chart for stacked column charts. I will create an angularjs directive that contains a <div id="chart"></div> and my charts will be in it.

I am settings a dataProvider for amCharts but I need to set colors all of items. Does not generate colors automatically?

Upvotes: 0

Views: 504

Answers (1)

sujit tiwari
sujit tiwari

Reputation: 284

Could you please provide your data provider, and do you provide it at the time of initialization of chart or you are providing it dynamically?

Here is an example from amchart with data provider in initialization time.
jsfiddle

var chart = AmCharts.makeChart("chart", {
"type": "serial",
"theme": "light",
"legend": {
    "horizontalGap": 10,
    "maxColumns": 1,
    "position": "right",
    "useGraphSettings": true,
    "markerSize": 10
},
"dataProvider": [{
    "year": 2003,
    "europe": 2.5,
    "namerica": 2.5,
    "asia": 2.1,
    "lamerica": 0.3,
    "meast": 0.2,
    "africa": 0.1
}, {
    "year": 2004,
    "europe": 2.6,
    "namerica": 2.7,
    "asia": 2.2,
    "lamerica": 0.3,
    "meast": 0.3,
    "africa": 0.1
}, {
    "year": 2005,
    "europe": 2.8,
    "namerica": 2.9,
    "asia": 2.4,
    "lamerica": 0.3,
    "meast": 0.3,
    "africa": 0.1
}],
"valueAxes": [{
    "stackType": "regular",
    "axisAlpha": 0.3,
    "gridAlpha": 0
}],
"graphs": [{
    "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
    "fillAlphas": 0.8,
    "labelText": "[[value]]",
    "lineAlpha": 0.3,
    "title": "Europe",
    "type": "column",
    "color": "#000000",
    "valueField": "europe"
}, {
    "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
    "fillAlphas": 0.8,
    "labelText": "[[value]]",
    "lineAlpha": 0.3,
    "title": "North America",
    "type": "column",
    "color": "#000000",
    "valueField": "namerica"
}, {
    "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
    "fillAlphas": 0.8,
    "labelText": "[[value]]",
    "lineAlpha": 0.3,
    "title": "Asia-Pacific",
    "type": "column",
    "color": "#000000",
    "valueField": "asia"
}, {
    "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
    "fillAlphas": 0.8,
    "labelText": "[[value]]",
    "lineAlpha": 0.3,
    "title": "Latin America",
    "type": "column",
    "color": "#000000",
    "valueField": "lamerica"
}, {
    "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
    "fillAlphas": 0.8,
    "labelText": "[[value]]",
    "lineAlpha": 0.3,
    "title": "Middle-East",
    "type": "column",
    "color": "#000000",
    "valueField": "meast"
}, {
    "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
    "fillAlphas": 0.8,
    "labelText": "[[value]]",
    "lineAlpha": 0.3,
    "title": "Africa",
    "type": "column",
    "color": "#000000",
    "valueField": "africa"
}],
"categoryField": "year",
"categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 0,
    "gridAlpha": 0,
    "position": "left"
},
"export": {
    "enabled": true
 }});

Upvotes: 2

Related Questions