'XYChart Clustered Column - How can I select colors for columns?

I have a graph that shows visitors this year and last year. I want this year to be blue color and last year to be light grey color. The chart is created with AmCharts version 5.

I think it will be easier to read if the colors are correct.

This is what I have: enter image description here

What I want: enter image description here

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>visits_per_month</title>
    <link rel="stylesheet" href="index.css" />
</head>
<body>
    <div id="chartdiv_visits_per_month" style="width: 100%;height: 80vh;"></div>

<script src="../_libraries/amcharts/index.js"></script>
<script src="../_libraries/amcharts/xy.js"></script>
<script src="../_libraries/amcharts/themes/Animated.js"></script>
<script src="visits_per_month.js"></script>
  </body>
</html>

visits_per_month.js

// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv_visits_per_month");


// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
  am5themes_Animated.new(root)
]);


// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
  panX: false,
  panY: false,
  wheelX: "panX",
  wheelY: "zoomX",
  layout: root.verticalLayout
}));


// Add legend
// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
var legend = chart.children.push(
  am5.Legend.new(root, {
    centerX: am5.p50,
    x: am5.p50
  })
);


// Set data
var data = [{
              xlabel: "Oct",
              value1: 51976,
              value2: 56505
        },{
              xlabel: "Nov",
              value1: 58430,
              value2: 51788
        },{
              xlabel: "Dec",
              value1: 55465,
              value2: 51266
        },{
              xlabel: "Jan",
              value1: 58359,
              value2: 54580
        },{
              xlabel: "Feb",
              value1: 55959,
              value2: 57211
        },{
              xlabel: "Mar",
              value1: 53958,
              value2: 52980
        },{
              xlabel: "Apr",
              value1: 58600,
              value2: 53202
        },{
              xlabel: "May",
              value1: 50551,
              value2: 57497
        },{
              xlabel: "Jun",
              value1: 52697,
              value2: 58320
        },{
              xlabel: "Jul",
              value1: 56950,
              value2: 56602
        },{
              xlabel: "Aug",
              value1: 50304,
              value2: 57429
        },{
              xlabel: "Sep",
              value1: 54890,
              value2: 57764
        }]

// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
  categoryField: "xlabel",
  renderer: am5xy.AxisRendererX.new(root, {
    cellStartLocation: 0.1,
    cellEndLocation: 0.9
  }),
  tooltip: am5.Tooltip.new(root, {})
}));

xAxis.data.setAll(data);

var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  renderer: am5xy.AxisRendererY.new(root, {})
}));


// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
function makeSeries(name, fieldName) {
  var series = chart.series.push(am5xy.ColumnSeries.new(root, {
    name: name,
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: fieldName,
    categoryXField: "xlabel"
  }));

  series.columns.template.setAll({
    tooltipText: "{categoryX} {name}: {valueY}",
    width: am5.percent(90),
    tooltipY: 0
  });

  series.data.setAll(data);

  // Make stuff animate on load
  // https://www.amcharts.com/docs/v5/concepts/animations/
  series.appear();

  series.bullets.push(function () {
    return am5.Bullet.new(root, {
      locationY: 0,
      sprite: am5.Label.new(root, {
        text: "{valueY}",
        fill: root.interfaceColors.get("alternativeText"),
        centerY: 0,
        centerX: am5.p50,
        populateText: true
      })
    });
  });

  legend.data.push(series);
}


makeSeries("2021", "value1");
makeSeries("2020", "value2");


// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/#Forcing_appearance_animation
chart.appear(1000, 100);
amchartsamcharts5


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions