CODEWITHSUNDEEP
amcharts
barteloma
barteloma

Reputation: 6855

how can i set custom color of data in amCharts

I have a stanadart data form form my graphics.

var data = [
  {"product": "Laptop",   "sellOfMonth": 250},
  {"product": "Phone",    "sellOfMonth": 1250},
  {"product": "Comupter", "sellOfMonth": 20}
];

Fro thi data my data values are sellOfMonth property. And I have a new array for style of this data like this: 

var styles = [{"name":"sellOfMonth", "color": "#123"}];

This style will be color of column chart.

If my data is stacked:

var data = [
  {"product": "Laptop",   "sellOfMonth": 250, "sellOfYear": 2500},
  {"product": "Phone",    "sellOfMonth": 1250, "sellOfYear": 1500},
  {"product": "Comupter", "sellOfMonth": 20,, "sellOfYear": 200}
];

and style array is:

var styles = [
       {"name":"sellOfMonth", "color": "#123"},
       {"name":"sellOfYear", "color": "#dfc"}
];

So I can create an amchart and set dataProvider as my data array.

But I could not set the colors.

Upvotes: 0

Views: 3072

Answers (1)

xorspark
xorspark

Reputation: 16012

Looking at how your styles are set up, you can easily use that to create your graphs array and set each graph's fillColors property to the desired color.

var graphs = styles.map(function(style) {
  return {
    "type": "column",
    "valueField": style.name,
    "fillColors": style.color,
    "lineColor": style.color,
    "fillAlphas": .8
  };
});

From there you can assign your graphs array to makeChart or the object's graphs array if you're using the library's class-based methods.

Demo below:

var styles = [
       {"name":"sellOfMonth", "color": "#123"},
       {"name":"sellOfYear", "color": "#dfc"}
];
var graphs = styles.map(function(style) {
  return {
    "type": "column",
    "valueField": style.name,
    "fillColors": style.color,
    "lineColor": style.color,
    "fillAlphas": .8
  };
});
var data = [
  {"product": "Laptop",   "sellOfMonth": 250, "sellOfYear": 2500},
  {"product": "Phone",    "sellOfMonth": 1250, "sellOfYear": 1500},
  {"product": "Comupter", "sellOfMonth": 20, "sellOfYear": 200}
];

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "valueAxes": [{
    "stackType": "regular"
  }],
  "dataProvider": data,
  "graphs": graphs,
  "categoryField": "product"
});
html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
	width: 100%;
	height: 100%;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>

<div id="chartdiv"></div>

Upvotes: 1

Related Questions