How to set color area when value less than zero use Apexcharts

Question

This is my script options, use apexcharts chart

And my script

                var options = {
                    series: [{
                        name: 'Profit',
                        data: [{"x":"2021-08-29","y":0.23},{"x":"2021-08-30","y":-5.29},{"x":"2021-08-31","y":-0.02},{"x":"2021-09-01","y":5.38},...
                    }],
                    chart: {
                        type: 'area',
                        height: 350,
                        zoom: {
                            enabled: false
                        },
                        toolbar: {
                            show: false
                        }
                    },
                    stroke: {
                        show: true,
                        curve: 'smooth',
                        lineCap: 'butt',
                        width: 2
                    },
                    fill: {
                        type: 'gradient',
                        gradient: {
                            shadeIntensity: 1,
                            opacityFrom: 0.45,
                            opacityTo: 0.9
                        },
                    },
                    plotOptions: {
                        area: {
                            colors: {
                                ranges: [
                                    {
                                        from: -100,
                                        to: 0,
                                        color: "#e85347" // Red color
                                    },
                                    {
                                        from: 0,
                                        to: 100,
                                        color: "#1ee0ac" // Green color
                                    }
                                ]
                            },
                            columnWidth: "80%"
                        }
                    },
                    yaxis: {
                        labels: {
                            offsetX: 0,
                        },
                        axisBorder: {
                            show: false,
                        },
                        axisTicks: {
                            show: false
                        }
                    },
                    xaxis: {
                        type: 'datetime',
                        tickAmount: 8,
                        labels: {
                            rotate: -45,
                            rotateAlways: true,
                            formatter: function(val, timestamp) {
                                return moment(new Date(timestamp)).format("DD MMM")
                            }
                        }
                    },
                    tooltip: {
                        shared: true
                    },
                    legend: {
                        position: 'top',
                        horizontalAlign: 'right',
                        offsetX: -10
                    }
                };

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

How to config when value less than zero so bar color will is Red color, and greater than 0 will is Green color

From what I've seen in the docs, it doesn't seem like this is supported. Did you end up solving it? Was there another chart library that you used to achieve this? — Casey Gibson, May 12 '22 at 05:08
@user109764 I haven't used it since I came across this issue. I ended up changing to a different library due to this. I don't remember what we used instead as I know longer work at that company. — Casey Gibson, Aug 14 '23 at 23:41

score 0 · Answer 1 · answered Nov 07 '22 at 03:56

0

Here is how I did it using a vertical gradient. Where percent is the percentage of the range area graph.

fill:{
  opacity:[0.8, 1, 1],
  type: ["fill", 'fill', 'fill'],
  gradient: {
    type:'vertical',
    opacityFrom: 0.6,
    opacityTo: 0.6,
    gradientToColors:['#4d2e54'],
    stops: [0,0, percent,percent,  100]
  }
},

answered Nov 07 '22 at 03:56

prakhar tomar

933
1
8
10

This doesn't seem to work for me. Could you add a reproducible example? – adelriosantiago Jul 10 '23 at 16:19
@adelriosantiago Hello. Have you found a solution with apexchart? When I tried the above it's mulicolor, but with gradient transition.. – user109764 Aug 14 '23 at 21:04

user109764 · Answer 2 · 2023-08-14T23:31:42.630

Following Prakhar suggestion, I have achieved similar with this:

  colors: ['#B72136'], // red
  fill: {
    type: "gradient",

    gradient: {
      type: 'vertical',
      //shadeIntensity: 0,
      //opacityFrom: 1,
      //opacityTo: 1,
      gradientToColors:['#007B55'], // green
      stops: [50, 0],

https://codepen.io/webxtor/pen/ZEmgMMV

EDIT: I have achieved to remove gradient feature by settings stops to 50,0

score 0 · Answer 3 · answered Aug 15 '23 at 03:00

To configure the ApexCharts chart so that values less than zero are represented with red bars and values greater than zero are represented with green bars, you need to modify the plotOptions section in your options object. Specifically, you should define two separate ranges in the colors section within the plotOptions for the area chart type. Here's how you can modify your existing options object:

var options = {
    // ... your existing options ...

    plotOptions: {
        area: {
            colors: {
                ranges: [
                    {
                        from: -Infinity, // Any value less than this will be red
                        to: 0,
                        color: "#e85347" // Red color
                    },
                    {
                        from: 0,
                        to: Infinity, // Any value greater than this will be green
                        color: "#1ee0ac" // Green color
                    }
                ]
            },
            columnWidth: "80%"
        }
    },

    // ... rest of your existing options ...
};

In this modified version of your options object, the ranges array in the colors section of the plotOptions now defines two ranges:

Values less than zero will be colored red ("#e85347").
Values greater than or equal to zero will be colored green ("#1ee0ac").

With this configuration, the chart bars will be colored according to your specified conditions.

How to set color area when value less than zero use Apexcharts

3 Answers3