Apexcharts.js: Legend color markers are not displayed when a function is used for chart color

[harshit3]

When we use function in 'colors' option then legend colors are not visible.
Sandbox link: https://codesandbox.io/s/new-paper-ep1ei

[LaurentEsc]

Hi there. I am facing the same problem. Is there any solution?

[AndreaMinato]

I'm facing the same bug.

@junedchhipa since is quite important to me right now do you need some help to fix it?

After digging around I found the method used in Fill.js@fillPath()

On Tooltip.js I found

point.style.backgroundColor = w.globals.colors[i]

That I replaced with

let fillColor = w.globals.colors[i]

if (typeof fillColor === 'function') {
    point.style.backgroundColor = fillColor({
        value: null, //don't know how to get value here
        seriesIndex: i,
        w: w
    })
} else {
    point.style.backgroundColor = fillColor
}

And on Legend.js

// line 144
mStyle.background = fillcolor[i]
mStyle.color = fillcolor[i]


// line 187
let textColor = w.config.legend.labels.useSeriesColors
        ? w.globals.colors[i]
        : w.config.legend.labels.colors

Replaced with

// line 144
let tmpColor = fillcolor[i]

if (typeof fillcolor[i] === "function") {
  tmpColor = fillcolor[i]({
    value: 5,
    seriesIndex: i,
    w: w
  })
}

mStyle.background = tmpColor
mStyle.color = tmpColor



// line 187
let textColor = w.config.legend.labels.colors

if (w.config.legend.labels.useSeriesColors) {
  if (typeof w.globals.colors[i] === 'function') {
    textColor = w.globals.colors[i]({
      value: 5,
      seriesIndex: i,
      w: w
    })
  } else {
    textColor = w.globals.colors[i]
  }
}

[junedchhipa]

Thanks for digging out the cause of the issue.
I will fix it soon (as you can see I have marked it as a bug which has the highest priority to be fixed)

[junedchhipa]

Fixed the issue.

If for some reasons, the legend and the tooltip markers colors don't show up, I have added new properties. (as in bar charts, the legend and tooltip markers still won't show up correctly).
So, as a workaround, you can use

legend: {
  markers: {
    fillColors: []
  }
},
tooltip: {
  marker: {
    fillColors: []
  }
}

[vincemat]

Hi @junedchhipa,

I'm facing the same issue as above and using your workaround does not solve the issue.
Do you confirm that it has been solved ?

Thanks !

[anupsamanta]

Hi @junedchhipa,
Worked for me. excellent staff