CODEWITHSUNDEEP
graphamchartsbeta
Leandro Murta
Leandro Murta

Reputation: 53

amCharts 4 (v4) Set specific colors in pie chart

I am testing this framework Amcharts and i get to configure specific colors in amcharts v3 like this:


pieChart = AmCharts.makeChart("chartdiv", {
      "type": "pie",
      "colors": ["#388E3C", "#FBC02D", "#0288d1", "#F44336", "#8E24AA"],
      -- other stuff
    });

But i am finding hard to make the same in Amcharts V4... i tried things like this


pieSeries.colors._list = am4core.color['#388E3C', '#FBC02D', '#0288D1', '#F44336', '#8E24AA']

pieSeries.slices.template.fill = am4core.color('#388E3C', '#FBC02D', '#0288D1', '#F44336', '#8E24AA')

or this


"series": [{
    "type": "PieSeries3D",
    "colors": ["#388E3C", "#FBC02D", "#0288d1", "#F44336", "#8E24AA"],
}]

but in the end does not work... anyone adventuring here too?

Thanks in advance.

Upvotes: 3

Views: 12071

Answers (3)

maxtess
maxtess

Reputation: 91

You can do that:

pieSeries.colors.list = [
    new am4core.color('#388E3C'),
    new am4core.color('#FBC02D'),
    new am4core.color('#0288D1'),
    new am4core.color('#F44336'),
    new am4core.color('#8E24AA'),
]

Or like @xorspark

pieSeries.colors.list = ["#388E3C", "#FBC02D", "#0288d1", "#F44336", "#8E24AA"].map(function(color) {
      return new am4core.color(color);
});

Doc is here: https://www.amcharts.com/docs/v4/concepts/colors/#Manually_setting_color_sets

Upvotes: 6

madlick71
madlick71

Reputation: 2436

I've found a slightly different way:

  const myColors= [
    "#0000ff",
    "#ff0000",
    "#ffff00",
    "#ff00ff"
  ];
  series.columns.template.adapter.add("fill", (fill, target) => {
    return am4core.color(myColors[target.dataItem.index]);
  });

At least this works with an am4charts.ColumnSeries() Object. The number of columns must be equal the number of colors of course.

Upvotes: 3

xorspark
xorspark

Reputation: 16012

colors is a ColorSet object, which is a wrapper for an array of color objects in AmCharts v4. You have to create an array of color objects, assign them to a ColorSet object's list array, then assign it to the series' colors property:

var colorSet = new am4core.ColorSet();
colorSet.list = ["#388E3C", "#FBC02D", "#0288d1", "#F44336", "#8E24AA"].map(function(color) {
  return new am4core.color(color);
});
pieSeries.colors = colorSet;

Upvotes: 8

Related Questions