Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change color of the stacked bar charts in amchart

I have started exploring AmCharts recently and was impressed by its superb features. However, I am trying to change the color of each stack in the bar but I haven`t been successful so far. I tried various properties like "balloonColor" to change the color of the respective stack but nothing happened.

Can someone let me know how can we do this?

This is the graph I am taking about.

like image 498
Dalton2 Avatar asked Mar 23 '17 19:03

Dalton2


People also ask

How do you change the color of a stacked bar graph?

In a chart, click to select the data series for which you want to change the colors. On the Format tab, in the Current Selection group, click Format Selection. tab, expand Fill, and then do one of the following: To vary the colors of data markers in a single-series chart, select the Vary colors by point check box.

How do I change the label color in AmCharts?

template. fill = am4core. color("white"); This would target your labels and change their colour.


2 Answers

You can change the bar's color by setting a particular graph's fillColors property, i.e.

AmCharts.makeChart("chartdiv", {
  // ...
  "graphs": [{
      "fillColors": "#008800",
      "fillAlpha": 1, //must also be non-zero value; valid values are decimal values <= 1
       // ...
  },
  // repeat for each graph
  ],
  // ...
});

Here's a modified version of the graph that changes the Europe segment to green.

like image 158
xorspark Avatar answered Nov 15 '22 07:11

xorspark


Amchart 4 chart color scheme can be set like so:

chart.colors.list = [
  am4core.color("#845EC2"),
  am4core.color("#D65DB1"),
  am4core.color("#FF6F91"),
  am4core.color("#FF9671"),
  am4core.color("#FFC75F"),
  am4core.color("#F9F871")
];

Amchart 4 piechart color scheme can be updated like this:

pieSeries.colors.list = [
  am4core.color("#845EC2"),
  am4core.color("#D65DB1"),
  am4core.color("#FF6F91"),
  am4core.color("#FF9671"),
  am4core.color("#FFC75F"),
  am4core.color("#F9F871"),
];

Documentation: https://www.amcharts.com/docs/v4/concepts/colors/. It also discusses gradients, etc.

like image 37
Jarom Avatar answered Nov 15 '22 06:11

Jarom