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

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

enter image description here



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source