title: ApexCharts Stacked Columns specific color for series
body: <p>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. </p>
  
  <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    var options = {
      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();
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  .box {
    padding: 25px 25px;
    border-radius: 4px;
  }
  
  .columnbox {
    padding-right: 15px;
    main&gt;.container {
      padding: 60px 15px 0;
    }
    .footer {
      background-color: #f5f5f5;
    }
    .footer&gt;.container {
      padding-right: 15px;
      padding-left: 15px;
    }
    code {
      font-size: 80%;
    }
    .viewcontainer {
      border: 1px solid;
      padding: 12px 20px 15px;
      border-radius: 4px;
      margin-top: 100px;
      margin-bottom: 50px;
      max-width: 1500px;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/apexcharts"&gt;&lt;/script&gt;
  &lt;div id="chart"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>thanks for help !</p>