Apexchart bar chart only colors border

Question

I have this bar chart. I tried to have each bar a different color, but only the border is colored. How can I make the full bar in that color?

I tried to use distributed: true but that only colored the borders.

window.Apex = {
        chart: {
            foreColor: '#ccc',
            toolbar: {
                show: false
            },
        },
        stroke: {
            width: 2,
        },
        dataLabels: {
            enabled: false
        },
        tooltip: {
            theme: 'dark'
        },
        grid: {
            borderColor: "#535A6C",
            xaxis: {
                lines: {
                    show: true
                }
            }
        }
    };
var optionsBar = {
        chart: {
            height: 280,
            type: 'bar'
        },
        plotOptions: {
            bar: {
                columnWidth: '18%',
                horizontal: true,
                distributed: true
            },
        },
        colors: ['red', 'orange', 'green', 'orange', 'red'],
        dataLabels: {
            enabled: true,
        },
        series: [{
            name: 'mmol/L',
            data: [14, 25, 50, 10, 1],
        }],
        xaxis: {
            categories: ['> 14.0', '10 - 14.0', '4 - 10', '4 - 3.8', '< 3.8'],
        },
        fill: {
            colors: ['red', 'orange', 'green', 'orange', 'red'],
            type: 'solid',
            opacity: 1
        }

    }

    var chartBar = new ApexCharts(
        document.querySelector("#barchart"),
        optionsBar
    );

    chartBar.render();

body {
  background: #343E59;
  color: #777;
  font-family: Montserrat, Arial, sans-serif;
}

.body-bg {
  background: #F3F4FA !important;
}

.content-area {
  margin: 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.6.12/apexcharts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.6.12/apexcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.min.js"></script>
<div id="barchart"></div>

Answer 1

Fixed it by adding the colors to each data object

{
  x: '4 - 10',
  y: 54,
  fillColor: '#1fc900'
}

window.Apex = {
        chart: {
            foreColor: '#ccc',
            toolbar: {
                show: false
            },
        },
    
        dataLabels: {
            enabled: false
        },
        tooltip: {
            theme: 'dark'
        },
        grid: {
            borderColor: "#535A6C",
            xaxis: {
                lines: {
                    show: true
                }
            }
        }
    };
var optionsBar = {
        chart: {
            height: 280,
            type: 'bar'
        },
        plotOptions: {
            bar: {
                columnWidth: '18%',
                horizontal: true,
                distributed: true,
              
            },
        },
        
        dataLabels: {
            enabled: true,
        },
        series: [{
            name: 'mmol/L',
            data: [{
        x: '> 14.0',
        y: 54,
        fillColor: '#FF0000'
    }, {
        x: '10 - 14.0',
        y: 66,
        fillColor: '#ff6a00'
    },
    {
        x: '4 - 10',
        y: 54,
        fillColor: '#1fc900'
    }, {
        x: '4 - 3.8',
        y: 66,
        fillColor: '#ff6a00'
    },
    {
        x: '< 3.8',
        y: 66,
        fillColor: '#FF0000'
    }],
            
        }],
        xaxis: {
            categories: ['> 14.0', '10 - 14.0', '4 - 10', '4 - 3.8', '< 3.8'],
        },
        fill: {
            opacity: 1
        }

    }

    var chartBar = new ApexCharts(
        document.querySelector("#barchart"),
        optionsBar
    );

    chartBar.render();

body {
  background: #343E59;
  color: #777;
  font-family: Montserrat, Arial, sans-serif;
}

.body-bg {
  background: #F3F4FA !important;
}

.content-area {
  margin: 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.6.12/apexcharts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.6.12/apexcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.min.js"></script>
<div id="barchart"></div>