How to change ag-charts bar chart's column color?

Question

I am using ag-charts for my project. This is an example from the internet, what is very similar to my code:

import { AgChartOptions, AgCharts } from "ag-charts-community";

const options: AgChartOptions = {
  container: document.getElementById("myChart"),
  data: [
    { os: "Windows", share: 0.88 },
    { os: "macOS", share: 0.094 },
    { os: "Linux", share: 0.187 },
  ],
  title: {
    text: "Desktop Operating Systems",
  },
  series: [
    {
      type: "bar",
      xKey: "os",
      yKey: "share",
    },
  ],
  axes: [
    {
      type: "category",
      position: "bottom",
      label: {
        formatter: ({ value }) => {
          return value == "Windows" ? "== Windows ==" : value;
        },
      },
    },
    {
      type: "number",
      position: "left",
      label: {
        formatter: (params) => {
          return params.value * 100 + "%";
        },
      },
    },
  ],
};

const chart = AgCharts.create(options);

link

But I want to change the color of the columns separately! How is it possible? I tried to use series for each column and then the 'fill' property, which is works, but then I am not able to write out the x axis labels...

please help me!

Answer 1

Inside the series array, we have a property itemStyler, which we can use to switch the color programatically, I use a color map, to fetch the values based on the label.

Ag Charts - itemStyler Property Docs

...
const colorMap = {
  "Windows": 'red',
  "macOS": 'green',
  "Linux": 'yellow',
}
...

...
series: [
  {
    type: "bar",
    xKey: "os",
    yKey: "share",
    itemStyler: (dataItem: any) => {
      const color = colorMap[dataItem.datum.os];
      return { fill: color };
    }
  },
],
...

Full Code:

import { AgChartOptions, AgCharts } from "ag-charts-community";

import { getData } from "./data";

    const colorMap = {
      "Windows": 'red',
      "macOS": 'green',
      "Linux": 'yellow',
    }

const options: AgChartOptions = {
  container: document.getElementById("myChart"),
  data: [
    { os: "Windows", share: 0.88 },
    { os: "macOS", share: 0.094 },
    { os: "Linux", share: 0.187 },
  ],
  title: {
    text: "Desktop Operating Systems",
  },
    series: [
      {
        type: "bar",
        xKey: "os",
        yKey: "share",
        itemStyler: (dataItem: any) => {
          const color = colorMap[dataItem.datum.os];
          return {fill: color};
        }
      },
    ],
  axes: [
    {
      type: "category",
      position: "bottom",
      label: {
        formatter: ({ value }) => {
          return value == "Windows" ? "== Windows ==" : value;
        },
      },
    },
    {
      type: "number",
      position: "left",
      label: {
        formatter: (params) => {
          return params.value * 100 + "%";
        },
      },
    },
  ],
};

const chart = AgCharts.create(options);

Stackblitz Demo