DATA

TooltipPosition

ZOOM

BrushAction

LegendOrientation

defaultInterpolator

Given a number t in the range [0,1], returns the corresponding color from the “viridis” perceptually-uniform color scheme designed by van der Walt, Smith and Firing for matplotlib,
represented as an RGB string.

usePageVisibility

A hook which returns whether the page is currently visible.

**The top-level component and starting point for creating Graphique visualizations**.

Pass in data, map data properties to visual properties ([`aes`](https://graphique.dev/docs/graphique/gg#Aes)), and fill with child Geoms
to start visualizing data. Configure and customize with a friendly, component-based API.

__namedParameters

React.JSX.Element

Datum

useGG

ContextProps

A headless component used to give your visualization a header and/or axis labels.

Labels

A headless component used to configure the **fill color** encoding for a visualization's geometry elements.

Available configuration options determined by an [`aes.fill`](https://graphique.dev/docs/graphique/gg#Aes) functional mapping and the type of data it returns (e.g. continuous vs. categorical).

ScaleFill

A headless component used to configure the **radius size** encoding for a visualization's GeomPoint elements.

Available configuration options determined by an [`aes.size`](https://graphique.dev/docs/graphique/gg#Aes) functional mapping.

ScaleRadius

A headless component used to configure the **stroke color** encoding for a visualization's geometry elements.

Available configuration options determined by an [`aes.stroke`](https://graphique.dev/docs/graphique/gg#Aes) functional mapping.

ScaleStroke

A headless component used to configure the **stroke pattern** encoding for a visualization's geometry elements.

Available configuration options determined by an [`aes.strokeDasharray`](https://graphique.dev/docs/graphique/gg#Aes) functional mapping.

ScaleStrokeDasharray

A headless component used to configure a visualization's **x axis** and the **horizontal** position of geometry elements in 2D space.

Available configuration options determined by an [`aes.x`](https://graphique.dev/docs/graphique/gg#Aes) functional mapping and the type of data it returns (e.g. continuous vs. categorical).

ScaleX

A headless component used to configure a visualization's **y axis** and the **vertical** position of geometry elements in 2D space.

Available configuration options determined by an [`aes.y`](https://graphique.dev/docs/graphique/gg#Aes) functional mapping and the type of data it returns (e.g. continuous vs. categorical).

ScaleY

A headless component used to customize the look and feel of a visualization.

Theme

A headless component used to customize a visualization's tooltip content and/or appearance.

Tooltip

TooltipContainer

XTooltip

YTooltip

useUnZoom

Zoom

EventArea

autoScale

IScale

parseDate

dateString

specifier

isDate

date

formatMonth

monthOnly

formatDate

format

debounce

delay

defineGroupAccessor

allowUndefined

focusNodes

unfocusNodes

elongate

data

keyName

valName

exclude

formatMissing

generateID

getYAlongPath

path

error

nodeToString

node

createSequentialScheme

interpolator

widen

pivot

getGroup

count

LabelsProps

An element or string placed above the visualization area — a great place for a title or anything else you'd like

header

React.ReactNode

An element or string used to label the y axis

VisualEncodingProps

An explicit scale imported from [`d3-scale`](https://d3js.org/d3-scale) used to determine relationship between data inputs and visual outputs (_default_: inferred from `aes` mapping's initial return type)

type

VisualEncoding

Used to create an explicit/fixed scale. Continuous scales should get `[min, max]` and categorical scales should get an ordered list of categories.

domain

Used to create an explicit/fixed scale. Continuous scales should get a function that maps the input domain to the output range (e.g. a [d3 interpolator](https://d3js.org/d3-scale-chromatic/sequential#sequential-schemes)), and categorical scales should get an ordered list of categories (e.g. a [d3 scheme](https://d3js.org/d3-scale-chromatic/categorical#categorical-schemes)).

values

For continuous scales, should the scale be reversed. _Note_: Categorical scales have their order controlled by `domain`.

reverse

SizeEncodingProps

Used to create an explicit/fixed scale given a `[min, max]` for the input domain (mapped data property)

Used to create an explicit/fixed scale given a `[min, max]` for the output range in pixels (_default_: `[3, 30]`)

range

XYScaleProps

XYScale

For continuous scales, should the scale (and relevant axis) be reversed. _Note_: Categorical scales have their order controlled by `domain`.

Approximate number of ticks to use in axis (_default_: derived from parent container's width or height)

numTicks

For categorical scales, should the focused data highlight the associated axis tick label

highlightOnFocus

For categorical scales, the tick labels that should be explicitly/programmatically focused

focusedTicks

This is passed to the top-level axis element, and can be used to control styling

className

ThemeProps

headerColor

stroke color for marker (_default_: `"#ffffff"`)

markerStroke

stroke color used for geoms with a default stroke attribute (_default_: `"#777777ee"`)

defaultStroke

fill color used for geoms with a default fill attribute (_default_: `"#777777ee"`)

defaultFill

internal state that is set automatically and can be retrieved for each used Geom. _Note: you shouldn't ever need to modify this directly._

geoms

GeomsTheme

sets the default font used throughout a visualization

font

FontTheme

sets appearance properties for grid lines

grid

GridTheme

theme properties applied to x and y axes (ticks, labels, etc.)

axis

theme properties applied to x axis (ticks, labels, etc.)

axisX

theme properties applied to y axis (ticks, labels, etc.)

axisY

legend

LegendTheme

tooltip

TooltipTheme

duration in milliseconds for animated transitions (_default_: `1000`)

animationDuration

TooltipContent

label

group

mark

__global.JSX.Element

formattedX

formattedY

formattedMeasure

datum

TooltipContent.Datum

containerWidth

xLab

yLab

TooltipProps

horizontal adjustment in pixels for tooltip's position relative to focused datum

vertical adjustment in pixels for tooltip's position relative to focused datum

should the tooltip be contained within the visualization area (_default_: `true`)

keepInParent

tooltip's position relative to focused datum (_default_: `TooltipPosition.DATA`)

position

xFormat

yFormat

formatting function for tooltip measure labels created with an [`aes.label`](https://graphique.dev/docs/graphique/gg#Aes) mapping

measureFormat

function that can be used to render a completely custom tooltip component based on the focused datum's individual parts

content

should the tooltip x value be rendered as an independent tooltip along the x axis

xAxis

used for programmatically focusing Geom elements/displaying tooltip when given a meaningful subset of `data`

TooltipProps.Datum

ZoomProps

xDomain

XYDomain

yDomain

onZoom

onUnzoom

ZoomSettings

functional mapping to `data` used to create an [x scale](https://graphique.dev/docs/graphique/scales/x)

DataValue

functional mapping to `data` used to create a [y scale](https://graphique.dev/docs/graphique/scales/y)

functional mapping to `data` used to create a [stroke scale](https://graphique.dev/docs/graphique/scales/stroke)

stroke

functional mapping to `data` used to create a [strokeDasharray scale](https://graphique.dev/docs/graphique/scales/stroke-dasharray)

strokeDasharray

functional mapping to `data` used to create a
continuous **size** scale

Right now it's only used with `<GeomPoint>` to create a [radius scale](https://graphique.dev/docs/graphique/scales/radius) for points.

size

functional mapping to `data` used to create a [fill scale](https://graphique.dev/docs/graphique/scales/fill)

fill

functional mapping to `data` used to create
distinct groups explicitly (without an associated scale)

functional mapping to `data` used to label tooltips and text values created with `GeomLabel`

functional mapping to `data` used to distinguish individual data points

RootGGProps

the data used to create the base, an array of objects

RootGGProps.Datum

the functional mapping of data characteristics to visual characteristics

the width of the visualization area in pixels (_default_: `550`)

Use `isContainerWidth` if you'd like it to be as wide as the parent container.

width

the height of the visualization area in pixels (_default_: `450`)

height

an object specifying the margins surrounding the visualization area

margin

Margin

when true, the visualization will fill its parent container's width
(and respond to changes in its width)

isContainerWidth

elements used to specify and configure the visualization
(e.g. Geoms, Scales, Labels, Theme, etc.)

name	description
`dx?`	horizontal adjustment in pixels for tooltip's position relative to focused datum `((props: HorizontalProps) => number) \| number`
`dy?`	vertical adjustment in pixels for tooltip's position relative to focused datum `((props: VerticalProps) => number) \| number`
`keepInParent?`	should the tooltip be contained within the visualization area (default: `true`) `((props: HorizontalProps) => boolean) \| boolean`
`position?`	tooltip's position relative to focused datum (default: `TooltipPosition.DATA`) `TooltipPosition`
`xFormat?`	formatting function for tooltip x values `(d: any) => string`
`yFormat?`	formatting function for tooltip y values `(d: any) => string`
`measureFormat?`	formatting function for tooltip measure labels created with an `aes.label` mapping `(d: any) => string`
`content?`	function that can be used to render a completely custom tooltip component based on the focused datum's individual parts `(value: TooltipContent[]) => React.ReactNode`
`xAxis?`	should the tooltip x value be rendered as an independent tooltip along the x axis `((x: number \| string \| Date \| null) => React.ReactNode) \| boolean`
`datum?`	used for programmatically focusing Geom elements/displaying tooltip when given a meaningful subset of `data` `Datum[]`

Tooltip

Examples

Custom (basics)

Custom (D.I.Y.)

Programmatic (stateful)

API

`Tooltip(props: TooltipProps) => null`

`TooltipPropsinterface`