Change value labels colors depending on background

[markov00]

Is your feature request related to a problem? Please describe.
A value label on a bar chart can be colored with a color that is good for some bars but can be a problem with some other backgrounds.
For example if I'm using a white text color for the value label, but the label fall outside the bar the label will disappear.
The same with a black text color and a dark background.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://elastic.github.io/elastic-charts/?selectedKind=Bar%20Chart&selectedStory=with%20value%20label&full=0&addons=1&stories=1&panelRight=1&addonPanel=storybooks%2Fstorybook-addon-knobs
2. Click on Knobs, tick show labels, change the color to white
3. The label is there but disappeared beacuse of the white background

(originally from #454) Labels are always drawn with a single color, default black, so there is a contrast issue. I've taken the storybook example and added offsetY of 10:

As you can see in the example, black text is draw on highly saturated bars which is not as contrasty as it could be.

Describe the solution you'd like
Automatically or manually configure colors for labels outside bars

Describe alternatives you've considered
few possibilities:

• configure 2 different colors: one for labels over bars, one for labels outside bars
• detect the background color and apply an inverse color or one color from a dark/light palette
• configure 1 main color, and apply a different "standard" color for the labels outside the bars

cc @cchaos I'd like to have also your idea on that

Additional context
n/a

Kibana Cross Issues/PR

• Show values of bars inside bar charts kibana#36511 this is a community PR, I've suggested to add two colors a dark and a light one depending on the background color.

Checklist

• this request is checked against already exist requests
• every related Kibana issue is listed under Kibana Cross Issues list
• kibana cross issue tag is associated to the issue if any kibana cross issue is present

[cchaos]

Similar to the way you handled the PR in Kibana, I'd suggest that:

• Text outside of the bars are the default text color of axis labels
• Inside the bars will have to do the isItLightOrDark calculation and then provide the correct white or black text

[wylieconlon]

@markov00 Is this issue actually resolved? I see a textInverted option in https://elastic.github.io/elastic-charts/?path=/story/bar-chart--with-value-label-advanced

[nickofthyme]

Yeah looks like this was closed by #785