Skip to content
Advertisement

ApexCharts Stacked Columns specific color for series

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.

$(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();

});
  .box {
  padding: 25px 25px;
  border-radius: 4px;
}

.columnbox {
  padding-right: 15px;
  main>.container {
    padding: 60px 15px 0;
  }
  .footer {
    background-color: #f5f5f5;
  }
  .footer>.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;
  }
<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">

thanks for help !

Advertisement

Answer

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">
Advertisement