I want to change the color of same columns in amcharts like 1st green color as red and second as green for bill. series charts define the color for stacked column but not different color for same column [demo] (https://jsfiddle.net/rfgwaohp/) is here
am4core.ready(function() {
am4core.useTheme(am4themes_animated);
am4core.useTheme(am4themes_kelly);
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.marginRight = 400;
// Add data
chart.data = [{
"retailer": "Current",
"bill": 120,
"saving": null
}, {
"retailer": "New",
"bill": -90,
"saving": 219
}];
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "retailer";
categoryAxis.title.text = "";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 20;
categoryAxis.renderer.labels.template.disabled = true;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "";
// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "bill";
series.dataFields.categoryX = "retailer";
series.name = "Bill";
series.fill = "#00af50";
series.stroke = "#00af50";
series.color = "#f2f2f2";
series.tooltipText = "{name}: [bold]{valueY}[/]";
series.stacked = true;
var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.dataFields.valueY = "saving";
series2.dataFields.categoryX = "retailer";
series2.name = "Saving";
series2.fill = "#f2f2f2";
series2.stroke = "#f2f2f2";
series2.color = "#00af50";
series2.tooltipText = "{name}: [bold]{valueY}[/]";
series2.stacked = true;
chart.cursor = new am4charts.XYCursor();
});
Yes i have fixed Here demo .just taken a new series with null value and different color applied to same series
chart.data = [{
"retailer": "Current",
"bill": null,
"bill2": 600 ,
"saving": null
}, {
"retailer": "New",
"bill": 400,
"bill2": null,
"saving": 200
}];
var series3 = chart.series.push(new am4charts.ColumnSeries());
series3.dataFields.valueY = "bill2";
series3.dataFields.categoryX = "retailer";
series3.name = "Bill";
series3.fill = "red";
series3.stroke = "red";
series3.color = "red";
series3.tooltipText = "{name}: [bold]{valueY}[/]";
series3.stacked = true;