Skip to content

Change value labels colors depending on background #238

@markov00

Description

@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

Screenshot 2019-06-12 at 18 41 39

Screenshot 2019-06-12 at 18 41 12

(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:

Screenshot 2019-11-20 15 35 51

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

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    :LensKibana Lens related issue:annotationAnnotation (line, rect, text) related issue:colorscolors related issue:xyBar/Line/Area chart relatedenhancementNew feature or request

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions