`legend.labels.colors` is documented as an `array`, but only works with a `string`

[lindapaiste]

Description

Using the legend.labels.colors option as described in the documentation does not work. The docs say that it should be "an array of colors where each index corresponds to the series index".

However the code takes the entire value of the legend.labels.colors property, eg. the array, and assigns it to the elLegendText.style.color property. This means we have a span element with style.color = ['red', 'blue'] which is invalid and won't do anything (I'm surprised there's no warning in the console).

You can see the troublesome code here:

apexcharts.js/src/modules/legend/Legend.js

Lines 196 to 204 in 050546e

	let textColor = w.config.legend.labels.useSeriesColors
	? w.globals.colors[i]
	: w.config.legend.labels.colors
	if (!textColor) {
	textColor = w.config.chart.foreColor
	}
	elLegendText.style.color = textColor

Steps to Reproduce

Add this to the options of a multi-series chart:

legend: {
    labels: {
      colors: ["red", "blue"]
    }
  }

Expected Behavior

I expect the first label in the legend to be colored red and the second to be blue.

Actual Behavior

Both legend labels are black (the default).

Screenshots

I am able to change all series labels to the same color if I use a string value for legend.labels.colors. This is not documented, so it may or may not be a behavior that's worth preserving.

legend: {
    labels: {
      colors: "red"
    }
  }

It is impossible to set each label to a unique custom color.

Reproduction Link

https://codepen.io/linda-paiste/pen/KKxXLpL

[junedchhipa]

closes with commit