[Lens] Pie/Treemap chart external labels are hard to read when in dark mode

[dej611]

Describe the bug:

Labels on the outside are of the slice (pie) or box (treemap) are pretty hard to read when kibana is in dark mode:

The color should automatically adjust based on the theme.

[elasticmachine]

Pinging @elastic/kibana-vis-editors (Team:VisEditors)

[dej611]

Apparently the EC library already supports this, so it requires some configuration tweak in the current Lens implementation.

Pie chart: https://elastic.github.io/elastic-charts/?path=/story/sunburst--with-linked-text-labels&globals=theme:eui-dark

Treemap: https://elastic.github.io/elastic-charts/?path=/story/treemap--mid-two-layers&globals=theme:eui-dark;background:black

[dej611]

After some investigations, found a few blocking issue on Canvas and Elastic Charts sides:

• No matter what we pass as linkLabels.textColor for the Partition chart, the value is ignored and automatically assigned based on internal computations => [Partition] Link label text color parameter passed is ignored elastic-charts#1469
  • context: because the background is transparent, it is assimilated to white, hence the resulting black text color.
• Canvas requires embeddables to render with a transparent background in order to apply wrapping styles on them, as background color. (see [Lens] Remove background from lens embeddable #83061 )
  • On the other end Canvas could provide to the Lens embeddable the background color (panel.background || workpad.background) - possibly [Lens] API for Styling Lens Embeddables #69349 or even a partial implementation of it just for the background

[flash1293]

Not blocked anymore - reducing impact because it works correctly in most places now

[elasticmachine]

Pinging @elastic/kibana-presentation (Team:Presentation)

[elasticmachine]

Pinging @elastic/kibana-vis-editors @elastic/kibana-vis-editors-external (Team:VisEditors)

[flash1293]

@elastic/kibana-presentation How do you think this should be fixed for the Canvas case? Should there be a "on dark background" flag on the the lensEmbeddable function which is passed down to the chart? Should it try to infer it from the background color somehow?

Blocked on presentation team decision how Canvas wants to handle this case (manually by user selection or somehow automatically)

[thekofimensah]

I also ran into this issue and would be great if I could use lens in dark mode!

[flash1293]

Bumping this - @ThomThomson do you think it's worth putting this on the near term roadmap from the presentation team side of things?

[ThomThomson]

Hey @flash1293! @teresaalvarezsoler can correct me if I'm wrong, but we aren't focused on any enhancement requests in Canvas for the near-term. We are only doing maintenance work and major bug fixes.

That said, I would say the best course of action is to just have these labels infer their color solely based on theme.darkMode, and not try to infer anything based on the user-configured background color. It's definitely not ideal, but if the user has a workpad with a dark background that makes it hard to see the external labels, they can turn on dark mode.

The most canvas thing to do here would be to allow the color of those external labels to be user-configurable by exposing linkLabels.textColor through the expression. That said, I'm not sure if it's worth the work.

[flash1293]

Makes sense, happy with parking this for now

[teresaalvarezsoler]

Thanks Joe, we will consider this for the future. As Devon said, we are not prioritizing Canvas enhancements for now.

[ThomThomson]

@elastic/kibana-visualizations, I'm removing the Presentation team label from this because I don't believe we'll be able to prioritize this change in Canvas. Going to leave it open though, because it seems like it might be a problem with Lens more generally as well? Feel free to close if it's been resolved on that side.

[nickofthyme]

I verified this is no longer an issue for Lens and Aggs-based pie charts after elastic/elastic-charts#1402 was introduced. The issue would still remain if charts consumers elsewhere in kibana do to not apply a background to the chart. The background defaults to transparent however an opaque background is required for contrast logic to work.

There is a separate issue elastic/elastic-charts#718, that could be the solution for fixing this across all chart usage in kibana but this is not a high priority at the moment.