[Vuejs]-Apexcharts – correctly color the graphic columns

by

0👍

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>

Leave a comment