Apexcharts change color of bars in bar chart and when clicked

Question

I have difficulty in changing the color of the bars in the bar chart to suit the theme of my website. I have gone to youtube and watched the following video https://www.youtube.com/watch?v=Cw87VN7K1Ek and tried their solution to change color but was not successful. I would like to seek your help to know where I may have gone wrong or changes that have to be made to my code to successfully display the new color. The following is the code snippet to configure the bar chart:

constructor() {
    this.chartOptions = {
      series: [
        {
          name: "My-series",
          data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
        }
      ],
      chart: {
        height: 350,
        type: "bar"
      },
      title: {
        text: "My First Angular Chart"
      },
      xaxis: {
        categories: ["Jan", "Feb",  "Mar",  "Apr",  "May",  "Jun",  "Jul",  "Aug", "Sep"]
      },
      fill: {
        colors: ['#f00']
      }
    };
  }

The following is the result, the colors of the chart is still the default color from ApexCharts

I also would like to change the color of a specific bar (data point) within the bar chart when selected. I have looked through the following link: https://apexcharts.com/docs/options/states/, but this only changes the shade but I like to change the color but have not seem to find any resource to go about do it. I would sincerely appreciate if you have experienced the following before and has managed to change it successfully.

Answer 1

You can try this configuration:

var options = {
  chart: {
    type: 'bar',
    height: 'auto'
  },
  series: [{
    name: "My-series",
    data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
  }],
  dataLabels: {
        enabled: false
  },
  xaxis: {
    categories: ["Jan", "Feb",  "Mar",  "Apr",  "May",  "Jun",  "Jul",  "Aug", "Sep"]
  },
  colors: [
    function ({ value, seriesIndex, dataPointIndex, w }) {
        if (dataPointIndex == 8) {
          return "#7E36AF";
        } else {
          return "#D9534F";
        }
      }
  ]
}

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

I hope it was helpful!

Answer 2

Below is the pen for different color options. It shows single color and changes to multi color after a delay just to showcase available options. Pick the one you like.

https://codepen.io/raevilman/full/dyXNgNo

Chart options used in above link.

var options = {
  chart: {
    type: "bar"
  },
  series: [
    {
      data: [10, 40, 20, 44, 22, 12]
    }
  ],
  xaxis: {
    categories: [1, 2, 3, 4, 5, 6]
  },
  colors: ["#00FF00"]
};

PS: I couldn't get the way to change selection color for bar chart.