CODEWITHSUNDEEP
amcharts
discodowney
discodowney

Reputation: 1507

How to set all items in a chart to have the same colour in am charts 4

I have a bar chart and i was wondering if there is a way to make all the graphics have the same colour:

https://codepen.io/conormdowney/pen/xmVRjd

var chart = am4core.create("chartdiv", am4charts.XYChart);

chart.data = [{
  "category": "Research",
  "value1": 450,
  "value2": 1200,
  "value3": 960,
  "value4": 710,
  "value5": 900
}, {
  "category": "Marketing",
  "value1": 1200,
  "value2": 450,
  "value3": 850,
  "value4": 1250,
  "value5": 950
}, {
  "category": "Distribution",
  "value1": 1850,
  "value2": 1700,
  "value3": 450,
  "value4": 870,
  "value5": 600
}];

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
//categoryAxis.renderer.minGridDistance = 30;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Create series
function createSeries(field) {
  var series = chart.series.push(new am4charts.ColumnSeries());
  series.dataFields.valueY = field;
  series.dataFields.categoryX = "category";
  return series;
}

createSeries("value1");
createSeries("value2");
createSeries("value3");
createSeries("value4");
createSeries("value5");```

Upvotes: 1

Views: 211

Answers (2)

ImonFyre
ImonFyre

Reputation: 41

As @xorsparks answer, but my bars were a variation of my one colour. I found that I had to set chart.colors.passOptions = {}; to stop that from happening.

Upvotes: 0

xorspark
xorspark

Reputation: 16012

There are two methods:

  1. The obvious method is to manually set each series color to be the same. You can pull from the chart's color list too, if you prefer, e.g.
  series.columns.template.fill = chart.colors.getIndex(0);
  series.columns.template.stroke = chart.colors.getIndex(0);
  1. Alternatively, you can set reuse to true on the chart's colors object to have it only reuse colors from the list. Setting the list to a single color will essentially be the same as the lines from the first method:
chart.colors.reuse = true;
chart.colors.list = [
  am4core.color("#845EC2")
];

Upvotes: 1

Related Questions