How to change the color of bars according to their value, using the ApexCharts library and the Angular framework?

Question

I have a component where I am displaying a graph with 2 series,

Indicators and Bonus

I set the rule so that when the value is from 0 to 99, the bar becomes red, and if the value is greater than 99, the bar must be green. It worked! however I don't want this rule to apply to the "bonus" series, the bonus series must have a static blue color. and this is not what is happening, can anyone help me?

this.chartOptionsKpi = {
      series: [
        {
          name:'Indicador',
          data: this.indicadores,
        },
        {
          name: 'Bonus',
          data: this.bonus,
          color: '#379cdb'
        },
        
      ],
      chart: {
        height: 450,
        width: '100%',
        type: "bar",
        stacked: true,
      },
      plotOptions: {
       
        bar: {
          colors: {
          ranges: [
            {
              from: 0,
              to: 99,
              color: '#FF0000', 
            },
            {
              from: 100,
              to: 1000,
              color: '#008542', 
            },
            // add more ranges as needed
          ],
        },
          horizontal: false,
          // distributed: true,
          barHeight: '80%', 
          barWidth: '30%', 
          dataLabels: {
            position: 'top',
          }
        }
        
      },
      title: {
        text: "Indicador PEP - Mês"
      },
      xaxis: {
        labels: {
          style: {
            fontSize: '10px',
            fontWeight: 400,
        }, 
          rotate: -90,
        },
        type: "category",
        categories:this.refinariasNomes
      },
      colors: ['#008542','#379cdb'],
      
    };

current chart

solution that didn't work

I already tried this, but it didn't work, a series of continuous bonus being affected by the color red.

Answer 1

Instend of using ranges, use this function in colors. https://apexcharts.com/docs/options/colors/

function ({ value }) {
  if (value < 100) {
    return "#FF0000";
  } else {
    return "#008542";
  }
}

https://codepen.io/Gahzee/pen/poGwxGB