Non-synchronous responsivity to container size

[monfera]

Describe the bug
Upon resize, the elements lag relative to one another, resulting in momentary inconsistent visual state (legend overlapping with data ink) eg. this capture from @cchaos

To Reproduce
Steps to reproduce the behavior:

1. Go to a chart with a legend
2. Resize horizontally
3. Observe lack of synchrony in the transition

Expected behavior
Synchronous changes, eg. the chart could be scale-d even while we await a possible new bucketing or axis ticks

Screenshots
If applicable, add screenshots to help explain your problem.

Version (please complete the following information):

• OS: OS X
• Browser: current Chrome
• Elastic Charts: current

Additional context
Add any other context about the problem here.

Errors in browser console
none

Kibana Cross Issues
Has an impact on Lens

Checklist

• 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

[nickofthyme]

@markov00 This is almost purely a computational efficiency issue I think. Would be interesting to see the improvement of this when the redux changes are in (#281).

[markov00]

I've removed the bug label as this was currently designed like that.
We had a small discussion on that during our last sync with some possible solutions:

• remove the debounce effect on the resize event (can have some drawbacks when resizing multiple charts in a single dashboard)
• selectively disable the event debounce only for resizing of a single chart, keep it when resizing a whole window
• try few image scaling fallback: scale on the dom the canvas element and than recompute the chart when the resize event is ended. (the image can also be blurred a bit)
• fade out the legend when resizing to avoid the legend to overflow the chart