How to give different colors on apexchart?

Question

I'm making a dashboard page for an application, but it's not interesting.

like the coloring on the graph is all the same. I want to make the colors on the graphic different to make it look interesting.

how to make the color of the graph different from angular?

script in .ts

 this.chartJabatan = {
            series: [
                {
                    name: "Jabatan",
                    data: this.dataJabatan
                }
            ],
            colors: ['#d4526e', '#13d8aa', '#A5978B', '#2b908f', '#f9a3a4',               
                     '#90ee7e', '#f48024', '#69d2e7'
            ],
            chart: {
                type: "bar",
                height: 450
            },
            plotOptions: {
                bar: {
                    horizontal: true,
                    dataLabels: {
                        position: "top"
                    }
                }
            },
            theme: {
                palette: 'palette1' // upto palette10
            },
            dataLabels: {
                enabled: true,
                offsetX: -6,
                style: {
                    fontSize: "12px",
                    colors: ["#fff"]
                }
            },
            stroke: {
                show: true,
                width: 1,
                colors: ["#fff"]
            },
            xaxis: {
                categories: this.labelJabatan
            }

        };

script in .html

<div class="flex flex-row">
        <div class="ml-4 p-6 pr-3 pb-3 bg-card rounded-2xl shadow mt-4 mr-4"
            style="height: 685px; margin-left: -25px; width: 100%;">
            <div class="flex items-start justify-between">
                <div class="text-lg font-medium tracking-tight leading-6 truncate">Level</div>
            </div>
            <div class="flex flex-col flex-auto mt-6 h-full w-full" id="chartJabatan">
                <apx-chart [series]="chartJabatan.series" [chart]="chartJabatan.chart"
                    [dataLabels]="chartJabatan.dataLabels" [plotOptions]="chartJabatan.plotOptions"
                    [xaxis]="chartJabatan.xaxis" [stroke]="chartJabatan.stroke" [colors]="chartJabatan.colors">
                </apx-chart>
            </div>
        </div>
    </div>

Answer 1

To give a different color to each bar, you have to set distributed property to true

plotOptions: {
        bar: {
          horizontal: true,
          distributed: true,
        },
},

Demo in stackblitz