DocsGeomsGeomLine
NPM Version

@graphique/geom-line

For line charts and other lines in Graphique.

Install

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

Examples

Basics

Using aes to group

Missing data

API

GeomLine(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: true)

boolean
brushAction?

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

BrushAction.ZOOM
isZoomedOut?

used for programmatic zooming, should the zoom out button be hidden

boolean
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 pixels of the line marker's points (default: 3.5)

number
markerStroke?

stroke color of the line marker's points (default: "#ffffff")

string
entrance?

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

Entrance
focusType?

determines how pointer events focus data (default: FocusType.X)

FocusType
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

boolean

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

LegendPropsinterface

namedescription
title?

title of legend

React.ReactNode
style?

additional styles passed to legend container

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

should legend member stroke symbols include stroke dasharrays (default: true)

boolean
GeomLabelGeomPoint