ChartPopover

The ChartPopover component defines the popover that will appear when the user selects a mark on the chart. ChartPopover must be used as a child of Area, Bar, Line, or AxisAnnotation. You should only have one popover defined per Chart visualization.

You can add interactive elements like buttons to the popover.

The ChartPopover uses the React Spectrum Dialog. Follow the React Spectrum documentation to properly setup your dialog content.

<Chart data={data} >
    <Bar>
        <ChartPopover>
            {(datum, close) => (
                <Content>
                    <Text>Average: {datum.average}</Text>
                    <ActionButton onPress={close}>Close</ActionButton>
                </Content>
            )}
        </ChartPopover>
    </Bar>
</Chart>

Props

name	type	default	description
children*	(datum: Datum, close: () => void) => ReactElement	–	Sets what is displayed by the popover. Supplies the datum for the value(s) that is currently selected and a close event handler. Function should return a ReactElement which will be the content of the popover.
width	number \| 'auto'	—	Sets the width of the popover. `auto` will fit the contents plus any padding.
minWidth	number	0	Sets the minimum width of the popover in pixels.
maxWidth	number	—	Sets the maximum width of the popover in pixels.
height	number \| 'auto'	'auto'	Sets the height of the popover. `auto` will fit the contents plus any padding.
minHeight	number	—	Sets the minimum height of the popover in pixels.
maxHeight	number	—	Sets the maximum height of the popover in pixels.
containerPadding	number	12	The placement padding that should be applied between the popover and its surrounding container. See React Spectrum docs
onOpenChange	(isOpen: boolean) => void	—	Handler that is called when the popover's open state changes.

Props​

Props