Skip to content

[Lens] Change a series color from the legend #92151

@stratoula

Description

@stratoula

Right now, the classic visualizations allow the users to change the color of their series by letting them choose between a number of given colors.

107230318-99b55a00-6a27-11eb-9ecd-ebe5c58d5e14

We would love to extend this functionality by giving the user more capabilities such as choose between our palettes, have more control over the colors etc.

A discussion has started here but as it is something that may affect Lens and other plugins, it would be better to discuss it separately.

This is @markov00's comment on how he envisions the feature:

hey @stratoula @miukimiu @nickofthyme I'm not a designer but I hope this example can provide a different viewpoint on the color picker:

  • enabling the user to choose the palette directly from the color picker can be a useful but not required, less context change and more data exploration
  • providing the user with more than 10 colors is counterproductive and leads to bad visualizations. It is difficult for the user to choose a different color from the already selected in the legend if we are playing with > 10 colors. I know on the example there are 12 but the palette is 10 + 2 neutral, we can reduce it if we want.
  • The following goes against the previous point but is the reason why providing also variances/palettes on colors is a good thing: as described here [Discuss] tradeoffs on the single-palette guidance for data visualization eui#3742 color discernibility varies with the size and type of shapes used on the data visualization and providing a good single palette for every use case is probably very difficult.
  • On the example, I've also added a set of neutral colors (light gray, black) that can be beneficial for the user that likes to highlight a specific series while turning down the importance of others (note that we don't have such ability today because none of the palettes offer a set of neutral colors)
  • if the user really needs a different set of colors, we can offer a set of variation/rotation when interacting with the variation slider (I don't spend much time on the UX here but my idea is to let the user choose a different color rotation but this needs a bit more interaction to achieve it)
  • we should always open the color picker with the current selected color and palette
  • we can use the same color picker for every palette, no need to go back to the old circles one but the user can use the legacy palette for older charts. I think we can exclude that palette from newly created charts.
  • please keep in mind again that this example is not well designed nor it is something to follow completely, I think the above points are more important than this design, I'd like to get feedback from @miukimiu and @MichaelMarcialis if possible as we are all working on various color topics.
  • I'm not arguing in this context about the provided palettes or the number of steps on the diverging or sequential palettes, but we should consider that in the future

Screenshot 2021-02-16 at 11 35 43

cc @monfera

Originally posted by @markov00 in #90589 (comment)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Feature:LensTeam:VisualizationsTeam label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t//discussenhancementNew value added to drive a business result

    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