@graphique/geom-area

For area charts, stacked area charts, and streamgraphs in Graphique.

Install

npm install @graphique/geom-area # @graphique/graphique is a peer dependency

pnpm add @graphique/geom-area # @graphique/graphique is a peer dependency

yarn add @graphique/geom-area # @graphique/graphique is a peer dependency

bun add @graphique/geom-area # @graphique/graphique is a peer dependency

Examples

Basics

Stacked

Filled

Streamed

Bands

API

`GeomArea(props: GeomProps) => React.JSX.Element | null`

`GeomPropsinterface`

name	description
`data?`	data used by this Geom This will overwrite top-level `data` passed to `GG` as it relates to mappings defined in `aes`. `Datum[]`
`aes?`	functional mapping applied to `data` for this Geom This extends the top-level `aes` passed to `GG`. Any repeated mappings defined here will take precedence within the Geom. `GeomAes`
`attr?`	attributes passed to the underlying SVG elements `React.SVGAttributes`
`position?`	determines how grouped elements are positioned relative to each other (default: `Position.IDENTITY`) `Position`
`showTooltip?`	should this Geom have a tooltip associated with it (default: `true`) `boolean`
`brushAction?`	determines what happens when brushing (clicking and dragging) over the drawing area `BrushAction.ZOOM`
`curve?`	d3 curve factory imported from `d3-shape` (default: `curveLinear`) `CurveFactory`
`showLineMarker?`	should this Geom have a line marker for its focused data (default: `true`) `boolean`
`markerRadius?`	radius in px of the line marker's points (default: `3.5`) `number`
`markerStroke?`	stroke color of the line marker's points (default: `"#ffffff"`) `string`
`onDatumFocus?`	callback called for mousemove events on the drawing area when focusing data `(data: Datum[], index: number[]) => void`
`onDatumSelection?`	callback called for click events on the drawing area when selecting focused data `(data: Datum[], index: number[]) => void`
`onExit?`	callback called for mouseleave events on the drawing area `() => void`
`isAnimated?`	should elements enter/update/exit with animated transitions (default: `true`) `boolean`

`Legend(props: LegendProps) => React.JSX.Element | null`

`LegendPropsinterface`

name	description
`title?`	title of legend `React.ReactNode`
`orientation?`	determines vertical/horizontal orientation of legend members (default: `LegendOrientation.V`) `LegendOrientation`
`format?`	function for formatting legend member labels `(v: string, i: number) => string`
`onSelection?`	callback called for click events on legend members `(v: string) => void`
`style?`	additional styles passed to legend container `React.CSSProperties`

ScaleRadius GeomBar