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'],
};
I already tried this, but it didn't work, a series of continuous bonus being affected by the color red.
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";
}
}