-
Notifications
You must be signed in to change notification settings - Fork 18
ChartPopover
Marshall Peterson edited this page May 23, 2024
·
6 revisions
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>
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. |
@adobe/react-spectrum-charts - Adobe 2024
Chart Components
Supplemental Chart Components
Layout Components