Multiple Stacked Bar Charts + externalEventMutations

[maks-io]

(I marked all the elements in the provided checklist with 'x' so I excluded it here for the sake of clarity)

Hi,
I am trying to render multiple (!) stacked bar charts next to each other and make it possible for users to highlight certain elements (that belong together semantically) via external button clicks.

I have built a quick example on codesandbox.io.
The buttons there should highlight data of a given person across multiple days and multiple projects.

I have read through the documentation regarding externalEventMutations etc., but still cannot get my head around how to correctly implement this. What I don't quite get are the following parts:

My hierarchical structure of one given chart (I render multiple of those next to each other!) looks like this:

VictoryChart
  VictoryGroup
    [VictoryStack] // array
      [VictoryBar] // array

• Do I need to define the externalEventMutations prop on the VictoryChart component?
• If yes, what would be the necessary className value on the mutation (in my highlight() method)? Right now it cannot work in my example - see line number 56 - current value is TODO.
  Note: I want my VictoryBars to change their styles, which are actually 3 levels below the VictoryChart.
• Do I just ignore the two levels "in between" (VictoryGroup and VictoryStack), or do I have to propagate events or something?
• Right now, I don't have any events prop defined - neither on VictoryChart nor on any other component. Does externalEventMutations require events to be defined? If yes - how, and on what component(s)?
• I want to first find answers to the questions above, however, I am also wondering how everything above would change (would it?) if I also wanted to allow the user to click on the VictoryBars themselves to automatically highlighted all the other related Bars (in other stacks and/or charts). I guess (?) it would be sufficient to include a click event on the VictoryBar level and to simply reuse the technique above (externalEventMutations etc.). But I am also wondering - since I am aware of the VictorySharedEvents - if there would be a better way? I think not, because I want to highlight Bars across multiple (!) charts. Is this assumption correct?
• One last unrelated (!) question: as you can see in my sandbox example I also defined the chart's domain. I actually only wanted to define the x axis to show values between 0.5 and 2.5 and I would have preferred to leave the y domain to be automatically chosen. However, it is not possible to use the domain prop without defining both x and y - is this supposed to work this way? And if so - is there any way to still tell the library to use "auto" values for the y axis?

I am really looking forward to your answers - I hope you can help me there - thanks already in advance!

[becca-bailey]

Hi @maks-io , sorry that this issue got lost in the pile! I don't know the answers to these off the top of my head, but I am going to migrate this issue to to a Q&A discussion in an attempt to surface some of these questions you had in case other people also have the same questions.