How to use gradient and single color at the same time in Apex Chart?

Question

How to add gradient (mixed with two colors) for one bar chart column and on top of that stack another column with (single color)?

Currently, I am trying to figure it out how to implement gradient and single color pattern in ApexChart.js. As for now, I can only use one at the same time...

JavaScript:

var colors = ["#A865AA", "#222130",];
var dataColors = $("#monthlycost-ApexChart").data('colors');
if (dataColors) {
    colors = dataColors.split(",");
}
var options = {
    chart: {
        height: 260,
        type: 'bar',
        stacked: true,
        stackType: '10%',
        toolbar: {
            show: false
        },
    },
    stroke: {
        curve: 'smooth',
        width: 1
    },
    grid: {
        column: {
            colors: ['transparent', '#e5e5e5'],
        },


    },
    plotOptions: {
        bar: {
            columnWidth: '20%',
            endingShape: 'rounded',
        }
    },
    dataLabels: {
        enabled: false
    },
    series: [{
        name: 'Cost',
        data: [5.7, 5.7, 5.4, 5.4, 5.2, 7.8, 5.6, 5.4, 5.7, 0, 0, 0]
    }, {

        data: [12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12]
    }],
    xaxis: {
        labels: {
            show: true,
            style: {
                fontSize: '10px'
            },
            padding: {
                top: 0,
                bottom: 20
            },
        },
        offsetY: -10,
        position: 'bottom',
        axisBorder: {
            show: false
        },
        axisTicks: {
            show: false
        },
        lines: {
            show: false
        },
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        padding: {
            top: -5,
            bottom: 0
        },
    },
    yaxis: {
        axisBorder: {
            show: false
        },
        axisTicks: {
            show: false
        },
        lines: {
            show: false
        },
        title: {
            text: '£0,000',
            style: {
                fontWeight: 400,
                fontSize: '9px',
            }
        },
        tickAmount: 5,
        forceNiceScale: false,
        decimalsInFloat: 0,
        max: 10,
    },
    fill: {
        type: "gradient",
       /* gradient: {
            shadeIntensity: 1,
            opacityFrom: 0.7,
            type: 'vertical',
            opacityTo: 0.9,
            colorStops: [
                {
                    offset: 40,
                    color: "#EF9432",
                    opacity: 1
                },
                {
                    offset: 100,
                    color: "#A865AA",
                    opacity: 1
                }
        
            ]
        }*/
    },
    legend: {
        show: false,
    },
    
    colors: colors,
    grid: {
        row: {
            show: false,
        },
        borderColor: '',
        padding: {
            bottom: 5,
            top: 1

        }
    }
}

Need to get this

Currently have

Answer 1

You should use distributed property

plotOptions: {
        bar: {
          distributed: true
        }
      }