javascript - Apexcharts - correctly color the graphic columns

Question

I'm putting the code to color the graphic in array, but it takes one color for the 3 columns, even having declared 3 colors for each column

options: {
  chart: {
    type: 'bar',
    id: 'chart',
   },
   colors: ['#3366ff','#66ff66','#ff0000'],
     dataLabels: {
      enabled: false
     },
    series: [],
     title: {
       text: 'PRAZOS OS',
      },
     bar: {
      columnWidth: '50%',
      endingShape: 'rounded' 
     },

Data

this.$axios.get("/Operacional/GetRelatorio").then(res => { 
this.prazos = res.data
this.$refs.chart1.updateSeries([{
     name: 'PRAZOS OS',
     data: [this.prazos.noPrazo, this.prazos.emDia, this.prazos.atrasadas ],
    }])
})

how it looks

enter image description here

I declared in the code 3 colors for array, but only one color remains for the 3 columns

Answer 1

To achieve the effect you want, you need to set distributed: true in bar in plotOptions in your options.

Like this:

plotOptions: {
    bar: {
        distributed: true
    }
}

Taken from Custom DataLabels Bar in the examples.

---

You can also find the description for distributed in the documentation.

distributed: Boolean
Turn this option to make the bars discrete. Each value indicates one bar per series.

---

Example:

var options = {
  chart: {
    type: 'bar',
    id: 'chart',
  },
  colors: ['#3366ff', '#66ff66', '#ff0000'],
  dataLabels: {
    enabled: false
  },
  series: [{
    data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
  }],
  title: {
    text: 'PRAZOS OS',
  },
  bar: {
    columnWidth: '50%',
    endingShape: 'rounded'
  },
  plotOptions: {
    bar: {
      distributed: true
    }
  }
};

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

chart.render();

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<div id="chart"></div>