The current result What I want

Hi, I have this problem, I don’t understand how to change the color of the bars based on the value of the X axis, I searched online but I didn’t find a solution.

The need is to make the bars green if the X-axis value is >= 0 and red if < 0

In the code example the modification occurs only on the change in value of the Y axis, which I don’t need.

Does anyone have a solution? Thank you!

Example code:

var options = {
    series: [{
        name: 'Occorrenze',
        data: [2, 10, 45, 70, 47, 36, 7, 3] // _jSon.occorenze
    }],              
    chart: {
        height: 415,
        type: 'bar',
        foreColor: '#ffffff'
    },
    plotOptions: {
        bar: {
            dataLabels: {
                position: 'top'
            },
            colors: {
                /*
                    this block changes the color of the bar based on the value of the Y axis
                */
                ranges: [{
                    from: 0,
                    to: -100,
                    color: '#FF0000'
                }, {
                    from: 0,
                    to: 100,
                    color: '#02DFDE'
                }]
            }                        
        }
    },                
    dataLabels: {
        enabled: true,
        formatter: function (val) {
            return val;
        },
        offsetY: -20,
        style: {
            fontSize: '12px',
            colors: ["#fff"]
        }
    },
    xaxis: {
        //type: 'Delta',
        type: 'category',
        categories: [3, 2, 1, 0, -0, -1, -2, 3], // _jSon.percentuali,
        labels: {
            show: true,
            formatter: function (val) {
                return val + "%";
            }
        },
        tooltip: {
            enabled: true,
        }                    
    },
    yaxis: {
        show: true,
        labels: {
            show: false,
            formatter: function (val) {
                return val;
            }
        },
        tooltip: {
            y: {
                formatter: function (val) {
                    return "Occorrenze"
                }
            }
        }
    }               
};

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