VictorySharedEvents wrapper coordinates events between its child components. Specify a set of events on the
VictorySharedEvents wrapper to target children. VictoryChart, VictoryGroup, and VictoryStack all use
VictorySharedEvents, but it may also be used on its own.
VictorySharedEvents renders an array of children with new
sharedEvents props which define a set of events, and a shared state accessor.
events prop takes an array of event objects. Event objects are composed of a
eventHandlers. Targets may be any valid style namespace for a given component, so "data" and "labels" are valid targets for this components like
eventKey may be given as a single value, or as an array of values to specify individual targets. If
eventKey is not specified, the given
eventHandlers will be attached to all elements of the specified
target type. The
childName property may be given as a string or an array of strings to target multiple children. The
eventHandlers object should be given as an object whose keys are standard event names (i.e.
onClick) and whose values are event callbacks. The return value of an event handler is used to modify elements. The return value should be given as an object or an array of objects with optional
eventKey keys for specifying the element(s) to be modified, and a
mutation key whose value is a function. The
eventKey keys will default to those corresponding to the element the event handler was attached to. The
mutation function will be called with the calculated props for each element that should be modified (i.e. a bar label), and the object returned from the mutation function will override the props of that element via object assignment.
type: string || integer || array[string] || function
eventKey prop is used to assign eventKeys to data. This prop operates identically to the
y data accessor props. By default, the eventKey of each datum will be equal to its index in the data array.
eventKey may also be defined directly on each data object.
Occasionally is it necessary to trigger events in Victory's event system from some external element such as a button or a form field. Use the
externalEventMutation prop to specify a set of mutations to apply to a given chart. The
externalEventMutations should be given in the following form:
childName: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
target: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
childName (when applicable) must always be specified. The
mutation function will be called with the current props of the element specified by the
childName provided. The mutation function should return a mutation object for that element. The
callback prop should be used to clear the
externalEventMutations prop once the mutation has been applied. Clearing
externalEventMutations is crucial for charts that animate.
Note External mutations are applied to the same state object that is used to control events in Victory, so depending on the order in which they are triggered, external event mutations may override mutations caused by internal Victory events or vice versa.