Elastic-charts on non-white backgrounds

[flash1293]

Is your feature request related to a problem? Please describe.
Currently elastic-charts renders under the assumption of having a full white (#fff) background. If this isn't the case, there are some minor UI issues:

Describe the solution you'd like

• No fading background on legend container (or having this behavior configurable)
• Small margin on .echContainer (This could also be done on the consumer side, but it's probably a nice default)

Describe alternatives you've considered
Having a full white background, which works in this specific case, but it would be nice to even out these cases.

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

[markov00]

Good catch. I've seen this behaviour and we will for sure fix that.
Let's cc @cchaos because I want to find a nice solution for the gradient: do you think it's possible to change the gradient of the container to reflect the background color?
For the margin, we can do few things:

• add a padding settings on the component or on the theme (it can create some confusion together with the chartMargins chartPaddings property of the theme)
• we can compute the parent size minus the .echContainer padding value if someone added a class with that style
• we can keep it like that and inform the user to specify the padding on the parent
• any other ideas?

[cchaos]

The overflow gradient is created via a SASS mixin and can take any color to replace the white. However, @flash1293 I'm guessing that your screenshot is more of a "temporary" background color for the chart? Meaning, that looks like the droppable area background highlight when dragging an item. I don't know what the best approach should be for a highlighted background versus a theme selected background color.

As for the padding around the chart, this should be left to the consumer. Either by supplying them with a top level prop on <Chart> or by informing them to supply their own wrapper to <Chart> with the padding they need.

[flash1293]

You are right @cchaos, this is about dynamic background colors.
I haven’t tried it but could we use the mask-image property for the overflow effect instead? https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image
Then it would be background independent. I can look into whether this would be possible in our case if you haven’t tried already.

I agree with your comment regarding padding.

[cchaos]

@flash1293 Good idea with the mask-image. I've created a PR in EUI to fix those.elastic/eui#2088

[flash1293]

@markov00 The fix will be released with eui 12.3.0 elastic/eui#2088 Can we close this issue?

[markov00]

@flash1293 I've created a PR to fix that issue, it's on review

[markov00]

🎉 This issue has been resolved in version 8.1.3 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀