DocsGeomsGeomLabel
NPM Version

@graphique/geom-label

For creating labels based on data in Graphique.

Install

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

Examples

Basics

Geom-level data

API

GeomLabel(props: GeomProps) => React.JSX.Element

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.

GeomAes
attr?

attributes passed to the underlying SVG elements

React.SVGAttributes
showTooltip?

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

boolean
brushAction?

determines what happens when brushing (clicking and dragging) over the drawing area

BrushAction.ZOOM
entrance?

where elements should start as they enter the drawing area (default: Entrance.BOTTOM)

Entrance
isClipped?

should elements be strictly clipped at the bounds of the drawing area (default: false)

boolean
focusedKeys?

array of keys (of the kind that are generated by aes.key) used to programmatically focus associated points

string[]
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
GeomHLineGeomLine