Is your feature request related to a problem? Please describe.
In Kibana values in a chart are not always primitive values like strings or numbers (e.g. when working with ranges). In these cases, the table looks like this (this would be rendered as a bar chart with an ordinal x axis):

Of course in this case we have a formatter ready to render a nice string tick label out of the object. One solution would be to map over the data and turn all of the objects into the string representation before passing the data to elastic-charts:

However the problem with this solution is that it makes it harder to get back to the original object. This is necessary on interactions - e.g. if the user clicks a bar associated with the first row in the table, we need the orginial object to turn it into a filter. The string representation doesn't help in that case.

Currently, elastic-charts seems to filter out rows containing objects, so nothing is rendered:

String values (works)
https://codesandbox.io/s/sweet-sunset-f1s3i?file=/src/App.tsx

Object values (breaks)
https://codesandbox.io/s/festive-jang-z78p6?file=/src/App.tsx

Describe the solution you'd like
Ideally elastic-charts would simply be able to work with objects as values in the data and treat them as ordinal values. Equality checks could be done using JSON.stringify or a similar way of serializing the object.

Describe alternatives you've considered

Another option would be to make it possible to pass "additional data" into the click handler, maybe like this:

<Chart size={[500, 200]}>
        <Settings
          onElementClick={([[geometry]]) => {
            console.log(geometry.clickHandlerContext[0]); // will be { name: "trousers " }
          }}
        />
        <Axis id="count" title="count" position={Position.Left} />
        <Axis
          id="x"
          title="goods"
          position={Position.Bottom}
          tickFormat={d => `xXx${d}xXx`}
        />
        <BarSeries
          id="bars"
          name="amount"
          xScaleType={ScaleType.Ordinal}
          xAccessor="x"
         clickHandlerContextAccessors={["additional"]}
          yAccessors={["y"]}
          data={[{ x: "trousers", additional: { name: "trousers " }, y: 390, val: 1222 },
            { x: "bags", additional: { name: "bags" }, y: 750, val: 1222 }]}
        />
      </Chart>

It's possible to work around this in "user land" as well, by keeping the original table around and doing a reverse lookup in the click handler to get the object for the clicked string, like this: https://codesandbox.io/s/great-browser-ef00i?file=/src/App.tsx

However it would be nice if it wouldn't be necessary to do this intermediary step, especially because it's possible to run into edge cases.

Additional context
A similar issue in vislib was solved by overriding the toString function of the object: elastic/kibana#62004

We are running into this issue in elastic/kibana#76121

Kibana Cross Issues

Checklist

Delete any items that are not applicable to this feature request.

• 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