Highlight a selected bucket

[cauemarcondes]

Is your feature request related to a problem? Please describe.
APM has the Transactions duration distribution chart, it's a histogram bar chart, that shows the trace waterfall for the selected bucket in the chart.

*The selected bucket is the one that has the border around the bucket.

Currently, there's no easy way to do such a thing on Elastic charts.

Describe the solution you'd like
Maybe a new property where I would pass the index of the selected bucket, or maybe the coordinates or even use the existing styleAccessor to apply a new style to the whole bucket.

Describe alternatives you've considered
I managed to create a workaround for this by creating a ReactAnnotation using the selected bucket coordinates.

[markov00]

The workaround provided is the correct way to handle such a case at the moment. The annotation a semantically correct way to describe a selection and provides most features out of the box.

Including a select state on the chart means to deal with the following specific requirements:

• we should include a selected state style, probably specific for each mark (bar, point, line)
• we should allow the user to define when something is selected: does the selection comes from an outside event, an event triggered internally like the click or mouse over?
• we should provide a way to notify that selection? is that a different callback than the click one? What if the selection happens on a brush event?
• how to deal with overlapping selected elements like when clicking on a point that is on top of a bar? how we define what to include in the selection? should we include a way to specify to propagate the event down the rendering tree?
• do we want to provide a different tooltip for the selected elements? if so is that included or not within the current crosshair tooltip?
• does the selection relates just to the clicked marker/element or it has a broader concept like: select the bucket that contains the clicked element.