ApexCharts Stacked Columns specific color for series

Question

I Want to Display Data in Apex Charts Stacked Column , with specific color for each series (change the color to Red and Green, for Product A and Product B). Default Apex Charts choose the color.

I tried to change the color by add the colors option and set plotOptions,bar,distributed: true. but then the hole column is in the same color and the stacked data are not separated.

thanks for help !

Answer 1

Set colors in your options:

var options = {
  colors : ['#b84644', '#4576b5'],
  chart: {
.......

$(document).ready(function() {
  var options = {
    colors : ['#4d3a96', '#4576b5'],
    chart: {
      height: 350,
      type: 'bar',
      stacked: true,
      toolbar: {
        show: true
      },
      zoom: {
        enabled: true
      }
    },
    responsive: [{
      breakpoint: 480,
      options: {
        legend: {
          position: 'bottom',
          offsetX: -10,
          offsetY: 0
        }
      }
    }],
    plotOptions: {
      bar: {
        horizontal: false,
      },
    },
    series: [{
      name: 'PRODUCT A',
      data: [44, 55, 41, 67, 22, 43]
    }, {
      name: 'PRODUCT B',
      data: [13, 23, 20, 8, 13, 27]
    }],
    xaxis: {
      type: 'datetime',
      categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT', '01/05/2011 GMT', '01/06/2011 GMT'],
    },
    legend: {
      position: 'right',
      offsetY: 40
    },
    fill: {
      opacity: 1
    },
  }

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

  chart.render();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart">