How to Apply Different Colors to Each Columns in amCharts?

How to apply different colors in each column of amCharts? Well this post will clear out everything. You will learn how you can apply different colors without defining any other class or js code.

Apply different colors in columns in amcharts

What is amCharts?

amCharts is a Lithuania based company which provides different types of charts for official and personal use. They provides 3 types of charts including

  1. javascript Charts
  2. javascript stock charts
  3. javascript maps

How to Apply Different Colors to Each Columns in amCharts?

An option named ‘lineColor’ helps you to apply color to the bars and if you want different colors for different bars, there are 2 ways to do that check out the following working code.

Way 1: Color in Data

In this way, you are required to add color codes with in the data like this

[sourcecode language=”js”]

"dataProvider": [{
"country": "USA",
"visits": 3025,
"color": "#FF0F00"
}, {
"country": "China",
"visits": 1882,
"color": "#FF6600"
}, {
"country": "Japan",
"visits": 1809,
"color": "#FF9E01"
}, {
"country": "Germany",
"visits": 1322,
"color": "#FCD202"
}, {
"country": "UK",
"visits": 1122,
"color": "#F8FF01"
}, {
"country": "France",
"visits": 1114,
"color": "#B0DE09"
}, {
"country": "India",
"visits": 984,
"color": "#04D215"
}, {
"country": "Spain",
"visits": 711,
"color": "#0D8ECF"
}, {
"country": "Netherlands",
"visits": 665,
"color": "#0D52D1"
}, {
"country": "Russia",
"visits": 580,
"color": "#2A0CD0"
}, {
"country": "South Korea",
"visits": 443,
"color": "#8A0CCF"
}, {
"country": "Canada",
"visits": 441,
"color": "#CD0D74"
}]

[/sourcecode]

and in graph section set “fillColorsField” to “color”. Check the following code:

[sourcecode language=”js”]

"fillColorsField": "color",

[/sourcecode]

after these changes check the result and you will get different colors in different columns. This is a good way to apply different colors in different columns.

However, this will not work in case you are getting data from database or any other source. How you can apply different colors to each individual column is the data is coming from backend?

Check out second way below.

Way 2: Through js code

This is the best way if you data is not fixed and coming from different source in ajax call or from backend. So, how to apply different colors, check out the following code.

[sourcecode language=”js”]</pre>
AmCharts.addInitHandler(function(chart) {
// check if there are graphs with autoColor: true set
for(var i = 0; i < chart.graphs.length; i++) {
var graph = chart.graphs[i];
if (graph.autoColor !== true)
continue;
var colorKey = "autoColor-"+i;
graph.lineColorField = colorKey;
graph.fillColorsField = colorKey;
for(var x = 0; x < chart.dataProvider.length; x++) {
var color = chart.colors[x]
chart.dataProvider[x][colorKey] = color;
}
}

}, ["serial"]);

var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": [ {
"country": "USA",
"visits": 2025
}, {
"country": "China",
"visits": 1882
}, {
"country": "Japan",
"visits": 1809
}, {
"country": "Germany",
"visits": 1322
}, {
"country": "UK",
"visits": 1122
}, {
"country": "France",
"visits": 1114
}, {
"country": "India",
"visits": 984
}, {
"country": "Spain",
"visits": 711
}, {
"country": "Netherlands",
"visits": 665
}, {
"country": "Russia",
"visits": 580
}, {
"country": "South Korea",
"visits": 443
} ],
"startDuration": 1,
"graphs": [ {
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits",
"autoColor": true
} ],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition": "start"
}

[/sourcecode]

Leave a Reply

Your email address will not be published. Required fields are marked *