Data utilities
Umbrella package
@visx/xychart
In contrast to other visx
packages which are low-level, this package seeks to abstract some of the
complexity of common visualization engineering, and exposes a high-level x,y (cartesian
coordinate) chart API. However, it is implemented using modularized React.context
layers for
theme, canvas dimensions, x/y/color scales, data, events, and tooltips which allows for more
expressivity and advanced use cases.
Out of the box it supports the following:
- * many common
<*Series />
types (animated or not) such as lines, bars, etc. - *
<Axis />
(animated or not) - *
<Grid />
(animated or not) - *
<Annotation />
(animated or not) - *
<Tooltip />
- *
theme
ing
The following illustrates basic usage to create an animated line chart with a bottom Axis
, Grid
,
and Tooltip
:
import {
AnimatedAxis, // any of these can be non-animated equivalents
AnimatedGrid,
AnimatedLineSeries,
XYChart,
Tooltip,
} from '@visx/xychart';
const data1 = [
{ x: '2020-01-01', y: 50 },
{ x: '2020-01-02', y: 10 },
{ x: '2020-01-03', y: 20 },
];
const data2 = [
{ x: '2020-01-01', y: 30 },
{ x: '2020-01-02', y: 40 },
{ x: '2020-01-03', y: 80 },
];
const accessors = {
xAccessor: (d) => d.x,
yAccessor: (d) => d.y,
};
const render = () => (
<XYChart height={300} xScale={{ type: 'band' }} yScale={{ type: 'linear' }}>
<AnimatedAxis orientation="bottom" />
<AnimatedGrid columns={false} numTicks={4} />
<AnimatedLineSeries dataKey="Line 1" data={data1} {...accessors} />
<AnimatedLineSeries dataKey="Line 2" data={data2} {...accessors} />
<Tooltip
snapTooltipToDatumX
snapTooltipToDatumY
showVerticalCrosshair
showSeriesGlyphs
renderTooltip={({ tooltipData, colorScale }) => (
<div>
<div style={{ color: colorScale(tooltipData.nearestDatum.key) }}>
{tooltipData.nearestDatum.key}
</div>
{accessors.xAccessor(tooltipData.nearestDatum.datum)}
{', '}
{accessors.yAccessor(tooltipData.nearestDatum.datum)}
</div>
)}
/>
</XYChart>
);
See sections below for more detailed guidance and advanced usage, or explore the comprehensive API below.
Basic usage
Installation
npm install --save @visx/xychart react-spring
Note: react-spring
is a required peerDependency
for importing Animated*
components.
Series types
The following Series
types are currently supported and we are happy to review or consider
additional Series types in the future.
Component name | Description | Usage | |
---|---|---|---|
(Animated)AreaSeries | Connect data points with a <path /> , with a color fill to the zero baseline | <AreaSeries /> | |
(Animated)BarSeries | Render a <rect /> for each data point | <BarSeries /> | |
(Animated)BarGroup | Group multiple child <BarSeries /> values together | <BarGroup><BarSeries /><BarSeries />...</BarGroup> | |
(Animated)BarStack | Stack multiple child <BarSeries /> values together | <BarStack><BarSeries /><BarSeries />...</BarStack> | |
(Animated)GlyphSeries | Render a Glyph (any shape, defaults to <circle /> ) for each data point, e.g., a scatter plot | <GlyphSeries renderGlyph={() => ...} /> | |
(Animated)LineSeries | Connect data points with a <path> | <GlyphSeries /> |
All Series
have animated and non-animated variants to give you more control over your bundle size,
support missing (null
) data, and can be rendered vertically or horizontally.
Theming
Default lightTheme
and darkTheme
themes are exported from @visx/xychart
and the utility
buildChartTheme
is exported to support easy creation of custom themes.
import { buildChartTheme, XYChart } from '@visx/xychart';
import { TextProps as SVGTextProps } from '@visx/text/lib/Text'; // just for types
const customTheme = buildChartTheme({
// colors
backgroundColor: string; // used by Tooltip, Annotation
colors: string[]; // categorical colors, mapped to series via `dataKey`s
// labels
svgLabelBig?: SVGTextProps;
svgLabelSmall?: SVGTextProps;
htmlLabel?: HTMLTextStyles;
// lines
xAxisLineStyles?: LineStyles;
yAxisLineStyles?: LineStyles;
xTickLineStyles?: LineStyles;
yTickLineStyles?: LineStyles;
tickLength: number;
// grid
gridColor: string;
gridColorDark: string; // used for axis baseline if x/yxAxisLineStyles not set
gridStyles?: CSSProperties;
});
() => <XYChart theme={customTheme} />
Tooltips
@visx/tooltip
Tooltip
s are integrated into @visx/xychart
, and should be rendered as a child of
XYChart
(or a child where TooltipContext
is provided).
Tooltip
positioning is handled by the Tooltip
itself, based on TooltipContext
. Tooltip
is rendered inside a Portal
, avoiding clipping by parent DOM elements with higher z-index
contexts. See the API below for a full list of props
to support additional behavior, such as
snapping to data point positions and rendering cross-hairs.
Tooltip
content is controlled by the specified prop.renderTooltip
which has access to:
tooltipData.nearestDatum
– the globally closestDatum
, across allSeries
'sdataKey
stooltipData.datumByKey
– the closestDatum
for eachSeries
'sdataKey
; this enables "shared tooltips" where you can render the nearest data point for eachSeries
.- a shared
colorScale
which mapsSeries
'sdataKey
s totheme
colors
Event handlers
The following PointerEvent
s (handling both MouseEvent
s and TouchEvent
s) are currently
supported. They may be set on individual Series
components (e.g.,
<BarSeries onPointerMove={() => ...} />
), or at the chart level (e.g.,
<XYChart onPointerMove={() => {}} />
) in which case they are invoked once for every *Series
.
To disable event emitting for any Series
set <*Series enableEvents=false />
. The
onFocus/onBlur
handlers enable you to make your chart events and Tooltip
s accessible via
keyboard interaction. Note that the current implementation requires your target browser to support
the SVG 2.0
spec for tabIndex
on SVG
elements.
Below, HandlerParms
has the following type signature:
type EventHandlerParams<Datum> = {
datum: Datum; // nearest Datum to event, for Series with `dataKey=key`
distanceX: number; // x distance between event and Datum, in px
distanceY;: number; // y distance between event and Datum, in px
event: React.PointerEvent | React.FocusEvent; // the event
index: number; // index of Datum in Series `data` array
key: string; // `dataKey` of Series to which `Datum` belongs
svgPoint: { x: number; y: number }; // event position in svg-coordinates
};
Prop name | Signature | XYChart support | *Series support |
---|---|---|---|
onPointerMove | (params: EventHandlerParams<Datum>) => void | ✅ | ✅ |
onPointerOut | (event: React.PointerEvent) => void | ✅ | ✅ |
onPointerUp | (params: EventHandlerParams<Datum>) => void | ✅ | ✅ |
onPointerDown | (params: EventHandlerParams<Datum>) => void | ✅ | ✅ |
onFocus | (params: EventHandlerParams<Datum>) => void | ❌ | ✅ |
onBlur | (event: React.TouchEvent) => void | ❌ | ✅ |
Annotations
Composable @visx/annotations
annotations are integrated into @visx/xychart
and use its theme and
dimension context. These components allow for annotation of individual points using
AnnotationCircleSubject
, or x- or y-thresholds using AnnotationLineSubject
.
import React from 'react';
import {
Annotation,
AnnotationLabel,
AnnotationConnector,
AnnotationCircleSubject,
Grid,
LineSeries,
XYChart,
} from '@visx/xychart';
const data = [
{ x: '2020-01-01', y: 50 },
{ x: '2020-01-02', y: 10 },
{ x: '2020-01-03', y: 20 },
{ x: '2020-01-04', y: 5 },
];
const labelXOffset = -40;
const labelYOffset = -50;
const chartConfig = {
xScale: { type: 'band' },
yScale: { type: 'linear' },
height: 300,
margin: { top: 10, right: 10, bottom: 10, left: 10 },
};
export default () => (
<XYChart {...chartConfig}>
<Grid numTicks={3} />
<LineSeries dataKey="line" data={data} xAccessor={d => d.x} yAccessor={d => d.y} />
<Annotation
dataKey="line" // use this Series's accessor functions, alternatively specify x/yAccessor here
datum={data[2]}
dx={labelXOffset}
dy={labelYOffset}
>
{/** Text label */}
<AnnotationLabel
title="Title"
subtitle="Subtitle deets"
showAnchorLine={false}
backgroundFill="rgba(0,150,150,0.1)"
/>
{/** Draw circle around point */}
<AnnotationCircleSubject />
{/** Connect label to CircleSubject */}
<AnnotationConnector />
</AnimatedAnnotation>
</XYChart>
);
⚠️ ResizeObserver
dependency
Responsive XYChart
s, Tooltip
, and AnnotationLabel
components rely on
ResizeObserver
s. If your
browser target needs a polyfill, you can either pollute the window
object or inject it cleanly
using the resizeObserverPolyfill
prop for these components. A polyfill passed to XYChart
will be
accessible to child Tooltip
and AnnotationLabel
components.
Examples ✅ ❌
❌ Error: This browser does not support ResizeObserver out of the box
// no polyfill, no browser support
() => <XYChart {...} />
() => <XYChart {...}><Tooltip /></XYChart>
✅ No errors
// no polyfill, target browser supports ResizeObserver
() => <XYChart {...} />
() => <XYChart {...}><Tooltip /></XYChart>
// import the polyfill in the needed module, or set it on `window` object
import ResizeObserver from 'resize-observer-polyfill';
() => <XYChart {...}><Tooltip /></XYChart> // 😎
// cleanly pass polyfill to component that needs it
import ResizeObserver from 'resize-observer-polyfill';
() => (
<XYChart resizeObserverPolyfill={ResizeObserver} {...}>
<Tooltip />
</XYChart>
)
Advanced usage
Examples
XYChart
is implemented using modularized React.context
layers for scales, canvas dimensions,
data, events, and tooltips which enables more advanced usage than many other chart-level
abstractions.
By default XYChart
renders all context providers if a given context is not available, but you can
share context across multiple XYChart
s to implement functionality such as linked tooltips, shared
themes, or shared data.
DataContext
This context provides chart canvas dimensions (width
, height
, and margin
), x/y/color scales,
and a data registry. The data registry includes data from all child *Series
, and x/y/color scales
are updated accordingly accounting for canvas dimensions.
ThemeContext
This context provides an XYChart
theme, its used by all visual elements that compose a chart, and
can be used to render custom visual elements that are on theme.
EventEmitterContext
This context provides an event publishing / subscription object which can be used via the
useEventEmitter
hook. Series
and XYChart
events, including tooltip updates, are emitted and
handled with through this context.
import React, { useState } from 'react';
import { useEventEmitter, EventEmitterProvider } from '@visx/xychart';
const eventSourceId = 'optional-source-id-filter';
const EmitEvent = () => {
const emit = useEventEmitter();
return (
<button onPointerUp={(event) => emit('pointerup', event, eventSourceId)}>emit event</button>
);
};
const SubscribeToEvent = () => {
const [clickCount, setClickCount] = useState(0);
const allowedEventSources = [eventSourceId];
useEventEmitter('pointerup', () => setClickCount(clickCount + 1), allowedEventSources);
return <div>Emitted {clickCount} events</div>;
};
export default function Example() {
return (
<EventEmitterProvider>
<EmitEvent />
<SubscribeToEvent />
</EventEmitterProvider>
);
}
TooltipContext
This context provides access to @visx/tooltip
s useTooltip
state, including whether the tooltip
is visible (tooltipOpen
), tooltlip position (tooltipLeft
, tooltipTop
),
tooltipData: { nearestDatum, datumByKey }
described above, and functions to update context
(hideTooltip
, showTooltip
, and updateTooltip
).
Examples
<XYChart />
APIs
#<AnimatedAnnotation />
Annotation children (Subject, Label, Connector)
Datum to annotate, used for Annotation positioning.
boolean
Whether the Label position (dx, dy) is editable.
boolean
Whether the Subject position (x, y) is editable.
string
Key for series to which datum belongs (used for x/yAccessors). Alternatively xAccessor + yAccessor may be specified.
number
x delta of the Label from the Subject.
number
y delta of the Label from the Subject.
boolean
({ x, y, dx, dy, event }: HandlerArgs) => void
Callback invoked on drag end.
({ x, y, dx, dy, event }: HandlerArgs) => void
Callback invoked on drag move.
({ x, y, dx, dy, event }: HandlerArgs) => void
Callback invoked on drag start.
(d: Datum) => ScaleInput<XScale>
If dataKey is not specified, you must specify an xAccessor for datum.
(d: Datum) => ScaleInput<YScale>
If dataKey is not specified, you must specify an yAccessor for datum.
#<AnimatedAreaSeries />
Data for the Series.
Required data key for the Series, should be unique across all series.
Given a Datum, returns the x-scale value.
Given a Datum, returns the y-scale value.
CurveFactory
Sets the curve factory (from @visx/curve or d3-curve) for the line generator. Defaults to curveLinear.
boolean
Whether the Series emits and subscribes to PointerEvents and FocusEvents (including Tooltip triggering).
Pick<{ data?: Datum[]; innerRef?: Ref<SVGPathElement>; children?: (args: { path: Line<Datum>; }) => ReactNode; fill?: string; className?: string; } & LinePathConfig<...> & SVGProps<...>, "string" | ... 467 more ... | "innerRef">
Props to be passed to the Line, if rendered.
((event: FocusEvent<Element>) => void) & ((event: FocusEvent<SVGPathElement>) => void)
Callback invoked for onBlur events for the nearest Datum to the FocusEvent. XYChart will NOT capture and emit FocusEvents, they are emitted from individual Series glyph shapes.
(({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void) & ((event: FocusEvent<SVGPathElement>) => void)
Callback invoked for onFocus events for the nearest Datum to the FocusEvent. XYChart will NOT capture and emit FocusEvents, they are emitted from individual Series glyph shapes.
(({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void) & ((event: PointerEvent<SVGPathElement>) => void)
Callback invoked for onPointerDown events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
(({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void) & ((event: PointerEvent<SVGPathElement>) => void)
Callback invoked for onPointerMove events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
((event: PointerEvent<Element>) => void) & ((event: PointerEvent<SVGPathElement>) => void)
Callback invoked for onPointerOut events. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
(({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void) & ((event: PointerEvent<SVGPathElement>) => void)
Callback invoked for onPointerUp events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
boolean
Whether to render a Line along value of the Area shape (area is fill only).
(d: Datum) => ScaleInput<XScale>
Optional accessor to override the baseline value of Area shapes per datum (useful to generate band shapes) when chart is rendered horizontally (vertical line). Defaults to the scale zero value, not compatible with AreaStack.
(d: Datum) => ScaleInput<YScale>
Optional accessor to override the baseline value of Area shapes per datum (useful to generate band shapes). Defaults to the scale zero value, not compatible with AreaStack.
#<AnimatedAreaStack />
ReactElement<Pick<BaseAreaSeriesProps<XScale, YScale, Datum>, "string" | "children" | "scale" | "width" | "height" | "dx" | "dy" | "className" | ... 465 more ... | "lineProps">, string | ... 1 more ... | (new (props: any) => Component<...>)> | ReactElement<...>[]
required AreaSeries
elements, note we can't strictly enforce this with TS yet.
CurveFactory
Sets the curve factory (from @visx/curve or d3-curve) for the line generator. Defaults to curveLinear.
boolean
Whether the Series emits and subscribes to PointerEvents and FocusEvents (including Tooltip triggering).
"none" | "expand" | "diverging" | "silhouette" | "wiggle"
Sets the stack offset to the pre-defined d3 offset, see https://github.com/d3/d3-shape#stack_offset.
(event: FocusEvent<Element>) => void
Callback invoked for onBlur events for the nearest Datum to the FocusEvent. XYChart will NOT capture and emit FocusEvents, they are emitted from individual Series glyph shapes.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onFocus events for the nearest Datum to the FocusEvent. XYChart will NOT capture and emit FocusEvents, they are emitted from individual Series glyph shapes.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerDown events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerMove events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
(event: PointerEvent<Element>) => void
Callback invoked for onPointerOut events. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerUp events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
"none" | "ascending" | "descending" | "reverse" | "insideout"
Sets the stack order to the pre-defined d3 function, see https://github.com/d3/d3-shape#stack_order.
boolean
Whether to render a Line along value of the Area shape (area is fill only).
#<AnimatedAxis />
Required axis orientation.
AnimationTrajectory
Animation trjectory of axis ticks.
string
The class name applied to the outermost axis group element.
string
The class name applied to the axis line element.
(renderProps: AxisRendererProps<Scale>) => ReactNode
For more control over rendering or to add event handlers to datum, pass a function as children.
boolean
If true, will hide the axis line.
boolean
If true, will hide the ticks (but not the tick labels).
boolean
If true, will hide the '0' value tick and tick label.
string
The text for the axis label.
string
The class name applied to the axis label text element.
number
Pixel offset of the axis label (does not include tick label font size, which is accounted for automatically)
Partial<TextProps>
Props applied to the axis label component.
number
A left pixel offset applied to the entire axis.
number
The number of ticks wanted for the axis (note this is approximate)
number | { start?: number; end?: number; }
Pixel padding to apply to axis sides.
string
The color for the stroke of the lines.
string
The pattern of dashes in the stroke.
ReactText
The pixel value for the width of the lines.
string
The class name applied to each tick group.
(tickRendererProps: TickRendererProps) => ReactNode
Override the component used to render tick labels (instead of <Text /> from @visx/text).
TickFormatter<ScaleInput<Scale>>
A d3 formatter for the tick text.
TickLabelProps<ScaleInput<Scale>>
Either an object with the props for all tick labels or a function that returns props for a given tick label.
number
The length of the tick lines.
Pick<SVGProps<SVGLineElement>, "string" | "children" | "scale" | "width" | "height" | "x" | "y" | "dx" | "dy" | "className" | "stroke" | "radius" | "color" | ... 453 more ... | "key">
Props to be applied to individual tick lines.
(tickRendererProps: TicksRendererProps<Scale>) => ReactNode
Override the component used to render all tick lines and labels.
string
The color for the tick's stroke value.
string
A custom SVG transform value to be applied to each tick group.
ScaleInput<Scale>[]
An array of values that determine the number and values of the ticks. Falls back to scale.ticks()
or .domain()
.
number
A top pixel offset applied to the entire axis.
#<AnimatedBarGroup />
BarSeries
elements
boolean
Whether the Series emits and subscribes to PointerEvents and FocusEvents (including Tooltip triggering).
(event: FocusEvent<Element>) => void
Callback invoked for onBlur events for the nearest Datum to the FocusEvent. XYChart will NOT capture and emit FocusEvents, they are emitted from individual Series glyph shapes.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onFocus events for the nearest Datum to the FocusEvent. XYChart will NOT capture and emit FocusEvents, they are emitted from individual Series glyph shapes.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerDown events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerMove events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
(event: PointerEvent<Element>) => void
Callback invoked for onPointerOut events. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerUp events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
(dataKeyA: string, dataKeyB: string) => number
Comparator function to sort dataKeys
within a bar group. By default the DOM rendering order of BarGroup
s children
is used.
#<AnimatedBarSeries />
Data for the Series.
Required data key for the Series, should be unique across all series.
Given a Datum, returns the x-scale value.
Given a Datum, returns the y-scale value.
number
Specify bar padding when bar thickness does not come from a band
scale.
Accepted values are 0, 1, 0 = no padding, 1 = no bar, defaults to 0.1.
(d: Datum, index: number) => string
Given a Datum, returns its color. Falls back to theme color if unspecified or if a null-ish value is returned.
boolean
Whether the Series emits and subscribes to PointerEvents and FocusEvents (including Tooltip triggering).
(event: FocusEvent<Element>) => void
Callback invoked for onBlur events for the nearest Datum to the FocusEvent. XYChart will NOT capture and emit FocusEvents, they are emitted from individual Series glyph shapes.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onFocus events for the nearest Datum to the FocusEvent. XYChart will NOT capture and emit FocusEvents, they are emitted from individual Series glyph shapes.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerDown events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerMove events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
(event: PointerEvent<Element>) => void
Callback invoked for onPointerOut events. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerUp events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
number
Optional radius to apply to bar corners.
boolean
Whether to apply radius to all corners.
boolean
Whether to apply radius to bottom corners.
boolean
Whether to apply radius to left corners.
boolean
Whether to apply radius to right corners.
boolean
Whether to apply radius to top corners.
#<AnimatedBarStack />
ReactElement<Pick<BaseBarSeriesProps<XScale, YScale, Datum>, "radius" | "onFocus" | "onBlur" | "onPointerDown" | "onPointerMove" | "onPointerUp" | ... 12 more ... | "colorAccessor">, string | ... 1 more ... | (new (props: any) => Component<...>)> | ReactElement<...>[]
required BarSeries
elements, note we can't strictly enforce this with TS yet.
boolean
Whether the Series emits and subscribes to PointerEvents and FocusEvents (including Tooltip triggering).
"none" | "expand" | "diverging" | "silhouette" | "wiggle"
Sets the stack offset to the pre-defined d3 offset, see https://github.com/d3/d3-shape#stack_offset.
(event: FocusEvent<Element>) => void
Callback invoked for onBlur events for the nearest Datum to the FocusEvent. XYChart will NOT capture and emit FocusEvents, they are emitted from individual Series glyph shapes.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onFocus events for the nearest Datum to the FocusEvent. XYChart will NOT capture and emit FocusEvents, they are emitted from individual Series glyph shapes.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerDown events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerMove events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
(event: PointerEvent<Element>) => void
Callback invoked for onPointerOut events. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerUp events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
"none" | "ascending" | "descending" | "reverse" | "insideout"
Sets the stack order to the pre-defined d3 function, see https://github.com/d3/d3-shape#stack_order.
#<AnimatedGlyphSeries />
Data for the Series.
Required data key for the Series, should be unique across all series.
Given a Datum, returns the x-scale value.
Given a Datum, returns the y-scale value.
(d: Datum, index: number) => string
Given a Datum, returns its color. Falls back to theme color if unspecified or if a null-ish value is returned.
boolean
Whether the Series emits and subscribes to PointerEvents and FocusEvents (including Tooltip triggering).
(event: FocusEvent<Element>) => void
Callback invoked for onBlur events for the nearest Datum to the FocusEvent. XYChart will NOT capture and emit FocusEvents, they are emitted from individual Series glyph shapes.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onFocus events for the nearest Datum to the FocusEvent. XYChart will NOT capture and emit FocusEvents, they are emitted from individual Series glyph shapes.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerDown events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerMove events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
(event: PointerEvent<Element>) => void
Callback invoked for onPointerOut events. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerUp events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
FC<GlyphProps<Datum>>
number | ((d: Datum) => number)
The size of a Glyph
, a number
or a function which takes a Datum
and returns a number
.
#<AnimatedGrid />
AnimationTrajectory
Animation trajectory of grid lines.
(props: { lines: GridLines; }) => ReactNode
Optionally override rendering of grid lines.
string
classname to apply to line group element.
boolean
Whether to render GridColumns.
number
Left offset to apply to glyph g element container.
CSSProperties
Styles to apply as grid line style.
number
Approximate number of grid lines. Approximate due to d3 alogrithm, specify tickValues
for precise control.
number
Pixel offset to apply as a translation (y- for Rows, x- for Columns) to each grid lines.
boolean
Whether to render GridRows.
string
Grid line stroke color.
string
Grid line stroke-dasharray attribute.
ReactText
Grid line stroke thickness.
number
Top offset to apply to glyph g element container.
#<AnimatedLineSeries />
Data for the Series.
Required data key for the Series, should be unique across all series.
Given a Datum, returns the x-scale value.
Given a Datum, returns the y-scale value.
(dataKey: string) => string
Given a datakey, returns its color. Falls back to theme color if unspecified or if a null-ish value is returned.
CurveFactory | CurveFactoryLineOnly
Sets the curve factory (from @visx/curve or d3-curve) for the line generator. Defaults to curveLinear.
boolean
Whether the Series emits and subscribes to PointerEvents and FocusEvents (including Tooltip triggering).
((event: FocusEvent<Element>) => void) & ((event: FocusEvent<SVGPathElement>) => void)
Callback invoked for onBlur events for the nearest Datum to the FocusEvent. XYChart will NOT capture and emit FocusEvents, they are emitted from individual Series glyph shapes.
(({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void) & ((event: FocusEvent<SVGPathElement>) => void)
Callback invoked for onFocus events for the nearest Datum to the FocusEvent. XYChart will NOT capture and emit FocusEvents, they are emitted from individual Series glyph shapes.
(({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void) & ((event: PointerEvent<SVGPathElement>) => void)
Callback invoked for onPointerDown events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
(({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void) & ((event: PointerEvent<SVGPathElement>) => void)
Callback invoked for onPointerMove events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
((event: PointerEvent<Element>) => void) & ((event: PointerEvent<SVGPathElement>) => void)
Callback invoked for onPointerOut events. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
(({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void) & ((event: PointerEvent<SVGPathElement>) => void)
Callback invoked for onPointerUp events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
#<Annotation />
Annotation children (Subject, Label, Connector)
Datum to annotate, used for Annotation positioning.
boolean
Whether the Label position (dx, dy) is editable.
boolean
Whether the Subject position (x, y) is editable.
string
Key for series to which datum belongs (used for x/yAccessors). Alternatively xAccessor + yAccessor may be specified.
number
x delta of the Label from the Subject.
number
y delta of the Label from the Subject.
boolean
({ x, y, dx, dy, event }: HandlerArgs) => void
Callback invoked on drag end.
({ x, y, dx, dy, event }: HandlerArgs) => void
Callback invoked on drag move.
({ x, y, dx, dy, event }: HandlerArgs) => void
Callback invoked on drag start.
(d: Datum) => ScaleInput<XScale>
If dataKey is not specified, you must specify an xAccessor for datum.
(d: Datum) => ScaleInput<YScale>
If dataKey is not specified, you must specify an yAccessor for datum.
#<AnnotationCircleSubject />
string
Optional className to apply to CircleSubject in addition to 'visx-annotation-subject'.
number
Radius of CircleSubject.
string
Color of CircleSubject.
number
x position of the Subject.
number
y position of the Subject.
#<AnnotationConnector />
string
Optional className to apply to container in addition to 'visx-annotation-connector'.
number
x delta of the Label from the Subject.
number
y delta of the Label from the Subject.
SVGProps<SVGPathElement>
Optional additional props.
string
Color of the connector line.
"line" | "elbow"
Connector type.
number
x position of the Subject.
number
y position of the Subject.
#<AnnotationLabel />
string
Stroke color of anchor line.
string
Background color of label.
number | { top?: number; right?: number; bottom?: number; left?: number; }
Padding of text from background.
SVGProps<SVGRectElement>
Additional props to be passed to background SVGRectElement.
string
Optional className to apply to container in addition to 'visx-annotation-label'.
string
Color of title and subtitle text.
"end" | "middle" | "inherit" | "start"
Whether the label is horizontally anchored to the start, middle, or end of its x position.
number
Max width of annotation, including background, for text wrapping.
new (cb: ResizeObserverCallback) => ResizeObserver
Optionally inject a ResizeObserver polyfill, else this must be globally available.
boolean
Whether to render a line indicating label text anchor.
boolean
Whether to render a label background.
string
Optional subtitle.
number
The vertical offset of the subtitle from the title.
ReactText
Optional title font size.
ReactText
Optional title font weight.
Partial<TextProps>
Optional subtitle Text props (to override color, etc.).
string
Optional title.
ReactText
Optional title font size.
ReactText
Optional title font weight.
Partial<TextProps>
Optional title Text props (to override color, etc.).
"end" | "middle" | "start"
Whether the label is vertically anchored to the start, middle, or end of its y position.
number
Width of annotation, including background, for text wrapping.
number
Left offset of entire AnnotationLabel, if not specified uses x + dx from Annotation.
number
Top offset of entire AnnotationLabel, if not specified uses y + dy from Annotation.
#<AnnotationLineSubject />
string
Optional className to apply to LineSubject in addition to 'visx-annotation-subject'.
number
number
"horizontal" | "vertical"
Orientation of line.
string
Color of LineSubject.
number
strokeWidth of LineSubject.
number
x position of LineSubject (for vertical LineSubjects).
number
y position of LineSubject (for horizontal LineSubjects).
#<AreaSeries />
Data for the Series.
Required data key for the Series, should be unique across all series.
Given a Datum, returns the x-scale value.
Given a Datum, returns the y-scale value.
CurveFactory
Sets the curve factory (from @visx/curve or d3-curve) for the line generator. Defaults to curveLinear.
boolean
Whether the Series emits and subscribes to PointerEvents and FocusEvents (including Tooltip triggering).
Pick<{ data?: Datum[]; innerRef?: Ref<SVGPathElement>; children?: (args: { path: Line<Datum>; }) => ReactNode; fill?: string; className?: string; } & LinePathConfig<...> & SVGProps<...>, "string" | ... 467 more ... | "innerRef">
Props to be passed to the Line, if rendered.
((event: FocusEvent<Element>) => void) & ((event: FocusEvent<SVGPathElement>) => void)
Callback invoked for onBlur events for the nearest Datum to the FocusEvent. XYChart will NOT capture and emit FocusEvents, they are emitted from individual Series glyph shapes.
(({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void) & ((event: FocusEvent<SVGPathElement>) => void)
Callback invoked for onFocus events for the nearest Datum to the FocusEvent. XYChart will NOT capture and emit FocusEvents, they are emitted from individual Series glyph shapes.
(({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void) & ((event: PointerEvent<SVGPathElement>) => void)
Callback invoked for onPointerDown events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
(({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void) & ((event: PointerEvent<SVGPathElement>) => void)
Callback invoked for onPointerMove events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
((event: PointerEvent<Element>) => void) & ((event: PointerEvent<SVGPathElement>) => void)
Callback invoked for onPointerOut events. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
(({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void) & ((event: PointerEvent<SVGPathElement>) => void)
Callback invoked for onPointerUp events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
boolean
Whether to render a Line along value of the Area shape (area is fill only).
(d: Datum) => ScaleInput<XScale>
Optional accessor to override the baseline value of Area shapes per datum (useful to generate band shapes) when chart is rendered horizontally (vertical line). Defaults to the scale zero value, not compatible with AreaStack.
(d: Datum) => ScaleInput<YScale>
Optional accessor to override the baseline value of Area shapes per datum (useful to generate band shapes). Defaults to the scale zero value, not compatible with AreaStack.
#<AreaStack />
ReactElement<Pick<BaseAreaSeriesProps<XScale, YScale, Datum>, "string" | "children" | "scale" | "width" | "height" | "dx" | "dy" | "className" | ... 465 more ... | "lineProps">, string | ... 1 more ... | (new (props: any) => Component<...>)> | ReactElement<...>[]
required AreaSeries
elements, note we can't strictly enforce this with TS yet.
CurveFactory
Sets the curve factory (from @visx/curve or d3-curve) for the line generator. Defaults to curveLinear.
boolean
Whether the Series emits and subscribes to PointerEvents and FocusEvents (including Tooltip triggering).
"none" | "expand" | "diverging" | "silhouette" | "wiggle"
Sets the stack offset to the pre-defined d3 offset, see https://github.com/d3/d3-shape#stack_offset.
(event: FocusEvent<Element>) => void
Callback invoked for onBlur events for the nearest Datum to the FocusEvent. XYChart will NOT capture and emit FocusEvents, they are emitted from individual Series glyph shapes.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onFocus events for the nearest Datum to the FocusEvent. XYChart will NOT capture and emit FocusEvents, they are emitted from individual Series glyph shapes.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerDown events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerMove events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
(event: PointerEvent<Element>) => void
Callback invoked for onPointerOut events. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerUp events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
"none" | "ascending" | "descending" | "reverse" | "insideout"
Sets the stack order to the pre-defined d3 function, see https://github.com/d3/d3-shape#stack_order.
boolean
Whether to render a Line along value of the Area shape (area is fill only).
#<Axis />
Required axis orientation.
string
The class name applied to the outermost axis group element.
string
The class name applied to the axis line element.
(renderProps: AxisRendererProps<Scale>) => ReactNode
For more control over rendering or to add event handlers to datum, pass a function as children.
boolean
If true, will hide the axis line.
boolean
If true, will hide the ticks (but not the tick labels).
boolean
If true, will hide the '0' value tick and tick label.
string
The text for the axis label.
string
The class name applied to the axis label text element.
number
Pixel offset of the axis label (does not include tick label font size, which is accounted for automatically)
Partial<TextProps>
Props applied to the axis label component.
number
A left pixel offset applied to the entire axis.
number
The number of ticks wanted for the axis (note this is approximate)
number | { start?: number; end?: number; }
Pixel padding to apply to axis sides.
string
The color for the stroke of the lines.
string
The pattern of dashes in the stroke.
ReactText
The pixel value for the width of the lines.
string
The class name applied to each tick group.
(tickRendererProps: TickRendererProps) => ReactNode
Override the component used to render tick labels (instead of <Text /> from @visx/text).
TickFormatter<ScaleInput<Scale>>
A d3 formatter for the tick text.
TickLabelProps<ScaleInput<Scale>>
Either an object with the props for all tick labels or a function that returns props for a given tick label.
number
The length of the tick lines.
Pick<SVGProps<SVGLineElement>, "string" | "children" | "scale" | "width" | "height" | "x" | "y" | "dx" | "dy" | "className" | "stroke" | "radius" | "color" | ... 453 more ... | "key">
Props to be applied to individual tick lines.
(tickRendererProps: TicksRendererProps<Scale>) => ReactNode
Override the component used to render all tick lines and labels.
string
The color for the tick's stroke value.
string
A custom SVG transform value to be applied to each tick group.
ScaleInput<Scale>[]
An array of values that determine the number and values of the ticks. Falls back to scale.ticks()
or .domain()
.
number
A top pixel offset applied to the entire axis.
#<BarGroup />
BarSeries
elements
boolean
Whether the Series emits and subscribes to PointerEvents and FocusEvents (including Tooltip triggering).
(event: FocusEvent<Element>) => void
Callback invoked for onBlur events for the nearest Datum to the FocusEvent. XYChart will NOT capture and emit FocusEvents, they are emitted from individual Series glyph shapes.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onFocus events for the nearest Datum to the FocusEvent. XYChart will NOT capture and emit FocusEvents, they are emitted from individual Series glyph shapes.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerDown events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerMove events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
(event: PointerEvent<Element>) => void
Callback invoked for onPointerOut events. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerUp events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
(dataKeyA: string, dataKeyB: string) => number
Comparator function to sort dataKeys
within a bar group. By default the DOM rendering order of BarGroup
s children
is used.
#<BarSeries />
Data for the Series.
Required data key for the Series, should be unique across all series.
Given a Datum, returns the x-scale value.
Given a Datum, returns the y-scale value.
number
Specify bar padding when bar thickness does not come from a band
scale.
Accepted values are 0, 1, 0 = no padding, 1 = no bar, defaults to 0.1.
(d: Datum, index: number) => string
Given a Datum, returns its color. Falls back to theme color if unspecified or if a null-ish value is returned.
boolean
Whether the Series emits and subscribes to PointerEvents and FocusEvents (including Tooltip triggering).
(event: FocusEvent<Element>) => void
Callback invoked for onBlur events for the nearest Datum to the FocusEvent. XYChart will NOT capture and emit FocusEvents, they are emitted from individual Series glyph shapes.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onFocus events for the nearest Datum to the FocusEvent. XYChart will NOT capture and emit FocusEvents, they are emitted from individual Series glyph shapes.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerDown events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerMove events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
(event: PointerEvent<Element>) => void
Callback invoked for onPointerOut events. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerUp events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
number
Optional radius to apply to bar corners.
boolean
Whether to apply radius to all corners.
boolean
Whether to apply radius to bottom corners.
boolean
Whether to apply radius to left corners.
boolean
Whether to apply radius to right corners.
boolean
Whether to apply radius to top corners.
#<BarStack />
ReactElement<Pick<BaseBarSeriesProps<XScale, YScale, Datum>, "radius" | "onFocus" | "onBlur" | "onPointerDown" | "onPointerMove" | "onPointerUp" | ... 12 more ... | "colorAccessor">, string | ... 1 more ... | (new (props: any) => Component<...>)> | ReactElement<...>[]
required BarSeries
elements, note we can't strictly enforce this with TS yet.
boolean
Whether the Series emits and subscribes to PointerEvents and FocusEvents (including Tooltip triggering).
"none" | "expand" | "diverging" | "silhouette" | "wiggle"
Sets the stack offset to the pre-defined d3 offset, see https://github.com/d3/d3-shape#stack_offset.
(event: FocusEvent<Element>) => void
Callback invoked for onBlur events for the nearest Datum to the FocusEvent. XYChart will NOT capture and emit FocusEvents, they are emitted from individual Series glyph shapes.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onFocus events for the nearest Datum to the FocusEvent. XYChart will NOT capture and emit FocusEvents, they are emitted from individual Series glyph shapes.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerDown events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerMove events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
(event: PointerEvent<Element>) => void
Callback invoked for onPointerOut events. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerUp events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
"none" | "ascending" | "descending" | "reverse" | "insideout"
Sets the stack order to the pre-defined d3 function, see https://github.com/d3/d3-shape#stack_order.
#<DataProvider />
boolean | "auto"
Partial<{ width: number; height: number; margin: { top: number; right: number; bottom: number; left: number; }; }>
ResizeObserverPolyfill
Optionally set the resizeObserverPolyfill context, which will be available to ParentSize, Tooltip, and AnnotationLabel components.
XYChartTheme
#<EventEmitterProvider />
#<GlyphSeries />
Data for the Series.
Required data key for the Series, should be unique across all series.
Given a Datum, returns the x-scale value.
Given a Datum, returns the y-scale value.
(d: Datum, index: number) => string
Given a Datum, returns its color. Falls back to theme color if unspecified or if a null-ish value is returned.
boolean
Whether the Series emits and subscribes to PointerEvents and FocusEvents (including Tooltip triggering).
(event: FocusEvent<Element>) => void
Callback invoked for onBlur events for the nearest Datum to the FocusEvent. XYChart will NOT capture and emit FocusEvents, they are emitted from individual Series glyph shapes.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onFocus events for the nearest Datum to the FocusEvent. XYChart will NOT capture and emit FocusEvents, they are emitted from individual Series glyph shapes.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerDown events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerMove events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
(event: PointerEvent<Element>) => void
Callback invoked for onPointerOut events. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerUp events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
FC<GlyphProps<Datum>>
number | ((d: Datum) => number)
The size of a Glyph
, a number
or a function which takes a Datum
and returns a number
.
#<Grid />
(props: { lines: GridLines; }) => ReactNode
Optionally override rendering of grid lines.
string
classname to apply to line group element.
boolean
Whether to render GridColumns.
number
Left offset to apply to glyph g element container.
CSSProperties
Styles to apply as grid line style.
number
Approximate number of grid lines. Approximate due to d3 alogrithm, specify tickValues
for precise control.
number
Pixel offset to apply as a translation (y- for Rows, x- for Columns) to each grid lines.
boolean
Whether to render GridRows.
string
Grid line stroke color.
string
Grid line stroke-dasharray attribute.
ReactText
Grid line stroke thickness.
number
Top offset to apply to glyph g element container.
#<LineSeries />
Data for the Series.
Required data key for the Series, should be unique across all series.
Given a Datum, returns the x-scale value.
Given a Datum, returns the y-scale value.
(dataKey: string) => string
Given a datakey, returns its color. Falls back to theme color if unspecified or if a null-ish value is returned.
CurveFactory | CurveFactoryLineOnly
Sets the curve factory (from @visx/curve or d3-curve) for the line generator. Defaults to curveLinear.
boolean
Whether the Series emits and subscribes to PointerEvents and FocusEvents (including Tooltip triggering).
((event: FocusEvent<Element>) => void) & ((event: FocusEvent<SVGPathElement>) => void)
Callback invoked for onBlur events for the nearest Datum to the FocusEvent. XYChart will NOT capture and emit FocusEvents, they are emitted from individual Series glyph shapes.
(({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void) & ((event: FocusEvent<SVGPathElement>) => void)
Callback invoked for onFocus events for the nearest Datum to the FocusEvent. XYChart will NOT capture and emit FocusEvents, they are emitted from individual Series glyph shapes.
(({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void) & ((event: PointerEvent<SVGPathElement>) => void)
Callback invoked for onPointerDown events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
(({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void) & ((event: PointerEvent<SVGPathElement>) => void)
Callback invoked for onPointerMove events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
((event: PointerEvent<Element>) => void) & ((event: PointerEvent<SVGPathElement>) => void)
Callback invoked for onPointerOut events. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
(({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void) & ((event: PointerEvent<SVGPathElement>) => void)
Callback invoked for onPointerUp events for the nearest Datum to the PointerEvent. By default XYChart will capture and emit PointerEvents, invoking this function for any Series with a defined handler. Alternatively you may set <XYChart captureEvents={false} /> and Series will emit their own events.
#<Tooltip />
When TooltipContext.tooltipOpen=true, this function is invoked and if the return value is non-null, its content is rendered inside the tooltip container. Content will be rendered in an HTML parent.
boolean
Applies position: 'absolute' for tooltips to correctly position themselves
when unstyled=true
. In a future major release this will be the default behavior.
string
Optional className to apply to the Tooltip in addition to visx-tooltip
.
number | { scroll: number; resize: number; }
Debounce resize or scroll events in milliseconds (needed for positioning)
boolean
whether TooltipWithBounds should be used to auto-detect (page) boundaries and reposition itself.
SVGProps<SVGCircleElement>
Optional styles for the point, if visible.
SVGProps<SVGLineElement>
Optional styles for the vertical crosshair, if visible.
number
Offset the left
position of the Tooltip by this margin.
number
Offset the top
position of the Tooltip by this margin.
(params: RenderTooltipGlyphProps<Datum>) => ReactNode
Function which handles rendering glyphs.
new (cb: ResizeObserverCallback) => ResizeObserver
Tooltip depends on ResizeObserver, which may be polyfilled globally, passed to XYChart, or injected into this component.
boolean
React to nested scroll changes, don't use this if you know your view is static
boolean
Whether to show a glyph at the tooltip position for the (single) nearest Datum.
boolean
Whether to show a horizontal line at tooltip position.
boolean
Whether to show a glyph for the nearest Datum in each series.
boolean
Whether to show a vertical line at tooltip position.
boolean
Whether to snap tooltip + crosshair x-coord to the nearest Datum x-coord instead of the event x-coord.
boolean
Whether to snap tooltip + crosshair y-coord to the nearest Datum y-coord instead of the event y-coord.
CSSProperties
Styles to apply, unless unstyled=true
.
boolean
Whether to omit applying any style, except left
/ top
.
In most cases if this is true
a developer must do one of the following
for positioning to work correctly:
- set
applyPositionStyle=true
- create a CSS selector like:
.visx-tooltip { position: 'absolute' }
SVGProps<SVGLineElement>
Optional styles for the vertical crosshair, if visible.
ReactText
Optional z-index to set on the Portal.
#<TooltipProvider />
number
Debounce time for when hideTooltip
is invoked.
Default 400
#<XYChart />
XYChart children (Series, Tooltip, etc.).
string
aria-label for the chart svg element.
boolean
Whether to capture and dispatch pointer events to EventEmitter context (which e.g., Series subscribe to).
number
Total height of the desired chart svg, including margin.
boolean | "auto"
Margin
Margin to apply around the outside.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerDown events for the nearest Datum to the PointerEvent for each Series with pointerEvents={true}.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerMove events for the nearest Datum to the PointerEvent for each Series with pointerEvents={true}.
(event: PointerEvent<Element>) => void
Callback invoked for onPointerOut events for the nearest Datum to the PointerEvent for each Series with pointerEvents={true}.
({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void
Callback invoked for onPointerUp events for the nearest Datum to the PointerEvent for each Series with pointerEvents={true}.
"all" | "nearest"
Whether to invoke PointerEvent handlers for all dataKeys, or the nearest dataKey.
ResizeObserverPolyfill
Responsive charts, <Tooltip />, and <AnnotationLabel /> depend on ResizeObserver which may be polyfilled globally, passed to individual components or injected once into this component.
XYChartTheme
If DataContext is not available, XYChart will wrap itself in a DataProvider and set this as the theme.
number
Total width of the desired chart svg, including margin.
XScaleConfig
If DataContext is not available, XYChart will wrap itself in a DataProvider and set this as the xScale config.
YScaleConfig
If DataContext is not available, XYChart will wrap itself in a DataProvider and set this as the yScale config.
#buildChartTheme()
CSSProperties
CSSProperties
TextProps
TextProps
Pick<SVGAttributes<SVGLineElement>, "string" | "children" | "scale" | "width" | "height" | "x" | "y" | "dx" | "dy" | "className" | "stroke" | "radius" | ... 455 more ... | "onTransitionEndCapture">
Pick<SVGAttributes<SVGLineElement>, "string" | "children" | "scale" | "width" | "height" | "x" | "y" | "dx" | "dy" | "className" | "stroke" | "radius" | ... 455 more ... | "onTransitionEndCapture">
Pick<SVGAttributes<SVGLineElement>, "string" | "children" | "scale" | "width" | "height" | "x" | "y" | "dx" | "dy" | "className" | "stroke" | "radius" | ... 455 more ... | "onTransitionEndCapture">
Pick<SVGAttributes<SVGLineElement>, "string" | "children" | "scale" | "width" | "height" | "x" | "y" | "dx" | "dy" | "className" | "stroke" | "radius" | ... 455 more ... | "onTransitionEndCapture">
#useEventEmitter()
Exports
- <AnimatedAnnotation />
- <AnimatedAreaSeries />
- <AnimatedAreaStack />
- <AnimatedAxis />
- <AnimatedBarGroup />
- <AnimatedBarSeries />
- <AnimatedBarStack />
- <AnimatedGlyphSeries />
- <AnimatedGrid />
- <AnimatedLineSeries />
- <Annotation />
- <AnnotationCircleSubject />
- <AnnotationConnector />
- <AnnotationLabel />
- <AnnotationLineSubject />
- <AreaSeries />
- <AreaStack />
- <Axis />
- <BarGroup />
- <BarSeries />
- <BarStack />
- <DataProvider />
- <EventEmitterProvider />
- <GlyphSeries />
- <Grid />
- <LineSeries />
- <ThemeProvider />
- <Tooltip />
- <TooltipProvider />
- <XYChart />
- buildChartTheme()
- useEventEmitter()