Different colors for different datapoints for multi series chart

[imran-mirza79]

Hi, I wanted to have different colors for each bar of each dataset. I tried multiple chart options, but none worked.

Sharing a screenshot of expected result and my chart options for better clarity. Thanks!

My chart options

const colors1 = [
		"#FF008A",
		"#044778",
		"#000000",
		"#FF0000",
		"#0000FF",
		secondary,
	];

	const colors2 = [
		"white",
		"#FF5733",
		"#C70039",
		"#900C3F",
		"#581845",
		"#FF5733",
	];
	// chart
	const optionscolumnchart: any = {
		chart: {
			type: "bar",
			fontFamily: "'Plus Jakarta Sans', sans-serif;",
			foreColor: "#adb0bb",
			toolbar: {
				show: true,
			},
			height: 370,
		},

		plotOptions: {
			bar: {
				distributed: true,
				horizontal: true,
				barHeight: "60%",
				columnWidth: "42%",
				borderRadius: [6],
				borderRadiusApplication: "end",
				borderRadiusWhenStacked: "all",
			},
		},
		stroke: {
			show: true,
			width: 5,
			lineCap: "butt",
			colors: ["transparent"],
		},
		dataLabels: {
			enabled: false,
		},
		legend: {
			show: false,
		},
		grid: {
			borderColor: "rgba(0,0,0,0.1)",
			strokeDashArray: 3,
			xaxis: {
				lines: {
					show: false,
				},
			},
		},
		yaxis: {
			tickAmount: 4,
		},
		xaxis: {
			categories: [100,200,300,400,500,700],
			axisBorder: {
				show: false,
			},
		},
		tooltip: {
			theme: "dark",
			fillSeriesColor: false,
		},
	};
	const seriescolumnchart: any = [
		{
			name: "Series A",
			data: [2000,3000,5000,7000,5000,9000],
			colors: colors1,
		},
		{
			name: "Series B",
			data: [1000, 2000, 3250, 2500, 310, 2050],
			colors: colors2,
		},
	];

Though I added different color properties for both the series, the color remains the same. Any help here would be appreciated, Thanks!

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.