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 >
        <div 
            style="height: 685px; margin-left: -25px; width: 100%;">
            <div >
                <div >Level</div>
            </div>
            <div  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>

CodePudding user response：

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