DocsGeomsGeomBar
NPM Version

@graphique/geom-bar

For visualizing data as horizontal bars in Graphique. For vertical bars/columns, try @graphique/geom-col.

Install

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

Examples

Basics

Stacked

Filled

Dodged

API

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

GeomPropsinterface

namedescription
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.

Aes
attr?

attributes passed to the underlying SVG elements

React.SVGAttributes
position?

determines how grouped elements are positioned relative to each other (default: Position.STACK)

Position
focusType?

determines how elements within bar groups are focused (default: FocusType.GROUP)

FocusType
showTooltip?

should this Geom have a tooltip associated with it (default: true)

boolean
yPadding?

padding value (0-1) that sets the space between bars/bar groups (default: 0.2)

number
dodgePadding?

padding value (0-1) that sets the space between elements positioned with position={POSITION.DODGE} (default: 0.05)

number
focusedStyle?

styles applied to focused elements

React.CSSProperties
unfocusedStyle?

styles applied to unfocused elements

React.CSSProperties
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

namedescription
title?

title of legend

React.ReactNode
orientation?

determines vertical/horizontal orientation of categorical legend members (default: LegendOrientation.V)

LegendOrientation
format?

function for formatting legend member labels (categorical) or tick labels (continuous)

(v: string, i: number) => string
width?

width of continuous legend in pixels (default: 320)

number
numTicks?

approximate number of ticks for continuous legend (default: width / 64)

number
onSelection?

callback called for click events on legend members

(v: string) => void
style?

additional styles passed to legend container

React.CSSProperties
GeomAreaGeomCol