Star
Chart primitives
Layouts & specialized
Interactions
SVG utilities
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 />
  • * themeing

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 nameDescriptionUsage
(Animated)AreaSeriesConnect data points with a <path />, with a color fill to the zero baseline<AreaSeries />
(Animated)BarSeriesRender a <rect /> for each data point<BarSeries />
(Animated)BarGroupGroup multiple child <BarSeries /> values together<BarGroup><BarSeries /><BarSeries />...</BarGroup>
(Animated)BarStackStack multiple child <BarSeries /> values together<BarStack><BarSeries /><BarSeries />...</BarStack>
(Animated)GlyphSeriesRender a Glyph (any shape, defaults to <circle />) for each data point, e.g., a scatter plot<GlyphSeries renderGlyph={() => ...} />
(Animated)LineSeriesConnect 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 Tooltips 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 closest Datum, across all Series's dataKeys
  • tooltipData.datumByKey – the closest Datum for each Series's dataKey; this enables "shared tooltips" where you can render the nearest data point for each Series.
  • a shared colorScale which maps Series's dataKeys to theme colors
Event handlers

The following PointerEvents (handling both MouseEvents and TouchEvents) 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 Tooltips 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 nameSignatureXYChart 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.

CodeSandbox

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 XYCharts, Tooltip, and AnnotationLabel components rely on ResizeObservers. 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 XYCharts 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.

CodeSandbox

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/tooltips 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
<XYChart />

APIs

#<AnimatedAnnotation />

# childrenReactNoderequired

Annotation children (Subject, Label, Connector)

# datumDatumrequired

Datum to annotate, used for Annotation positioning.

# canEditLabelboolean

Whether the Label position (dx, dy) is editable.

# canEditSubjectboolean

Whether the Subject position (x, y) is editable.

# dataKeystring

Key for series to which datum belongs (used for x/yAccessors). Alternatively xAccessor + yAccessor may be specified.

# dxnumber

x delta of the Label from the Subject.

# dynumber

y delta of the Label from the Subject.

# editableboolean
# onDragEnd({ x, y, dx, dy, event }: HandlerArgs) => void

Callback invoked on drag end.

# onDragMove({ x, y, dx, dy, event }: HandlerArgs) => void

Callback invoked on drag move.

# onDragStart({ x, y, dx, dy, event }: HandlerArgs) => void

Callback invoked on drag start.

# xAccessor(d: Datum) => ScaleInput<XScale>

If dataKey is not specified, you must specify an xAccessor for datum.

# yAccessor(d: Datum) => ScaleInput<YScale>

If dataKey is not specified, you must specify an yAccessor for datum.

#<AnimatedAreaSeries />

# dataDatum[]required

Data for the Series.

# dataKeystringrequired

Required data key for the Series, should be unique across all series.

# xAccessor(d: Datum) => ScaleInput<XScale>required

Given a Datum, returns the x-scale value.

# yAccessor(d: Datum) => ScaleInput<YScale>required

Given a Datum, returns the y-scale value.

# curveCurveFactory

Sets the curve factory (from @visx/curve or d3-curve) for the line generator. Defaults to curveLinear.

# enableEventsboolean

Whether the Series emits and subscribes to PointerEvents and FocusEvents (including Tooltip triggering).

# linePropsPick<{ 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.

# onBlur((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.

# onFocus(({ 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.

# onPointerDown(({ 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.

# onPointerMove(({ 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.

# onPointerOut((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.

# onPointerUp(({ 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.

# renderLineboolean

Whether to render a Line along value of the Area shape (area is fill only).

# x0Accessor(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.

# y0Accessor(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 />

# childrenReactElement<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.

# curveCurveFactory

Sets the curve factory (from @visx/curve or d3-curve) for the line generator. Defaults to curveLinear.

# enableEventsboolean

Whether the Series emits and subscribes to PointerEvents and FocusEvents (including Tooltip triggering).

# offset"none" | "expand" | "diverging" | "silhouette" | "wiggle"

Sets the stack offset to the pre-defined d3 offset, see https://github.com/d3/d3-shape#stack_offset.

# onBlur(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.

# onFocus({ 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.

# onPointerDown({ 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.

# onPointerMove({ 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.

# onPointerOut(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.

# onPointerUp({ 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.

# order"none" | "ascending" | "descending" | "reverse" | "insideout"

Sets the stack order to the pre-defined d3 function, see https://github.com/d3/d3-shape#stack_order.

# renderLineboolean

Whether to render a Line along value of the Area shape (area is fill only).

#<AnimatedAxis />

# orientation"top" | "left" | "right" | "bottom"required

Required axis orientation.

# animationTrajectoryAnimationTrajectory

Animation trjectory of axis ticks.

# axisClassNamestring

The class name applied to the outermost axis group element.

# axisLineClassNamestring

The class name applied to the axis line element.

# children(renderProps: AxisRendererProps<Scale>) => ReactNode

For more control over rendering or to add event handlers to datum, pass a function as children.

# hideAxisLineboolean

If true, will hide the axis line.

# hideTicksboolean

If true, will hide the ticks (but not the tick labels).

# hideZeroboolean

If true, will hide the '0' value tick and tick label.

# labelstring

The text for the axis label.

# labelClassNamestring

The class name applied to the axis label text element.

# labelOffsetnumber

Pixel offset of the axis label (does not include tick label font size, which is accounted for automatically)

# labelPropsPartial<TextProps>

Props applied to the axis label component.

# leftnumber

A left pixel offset applied to the entire axis.

# numTicksnumber

The number of ticks wanted for the axis (note this is approximate)

# rangePaddingnumber | { start?: number; end?: number; }

Pixel padding to apply to axis sides.

# strokestring

The color for the stroke of the lines.

# strokeDasharraystring

The pattern of dashes in the stroke.

# strokeWidthReactText

The pixel value for the width of the lines.

# tickClassNamestring

The class name applied to each tick group.

# tickComponent(tickRendererProps: TickRendererProps) => ReactNode

Override the component used to render tick labels (instead of <Text /> from @visx/text).

# tickFormatTickFormatter<ScaleInput<Scale>>

A d3 formatter for the tick text.

# tickLabelPropsTickLabelProps<ScaleInput<Scale>>

Either an object with the props for all tick labels or a function that returns props for a given tick label.

# tickLengthnumber

The length of the tick lines.

# tickLinePropsPick<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.

# ticksComponent(tickRendererProps: TicksRendererProps<Scale>) => ReactNode

Override the component used to render all tick lines and labels.

# tickStrokestring

The color for the tick's stroke value.

# tickTransformstring

A custom SVG transform value to be applied to each tick group.

# tickValuesScaleInput<Scale>[]

An array of values that determine the number and values of the ticks. Falls back to scale.ticks() or .domain().

# topnumber

A top pixel offset applied to the entire axis.

#<AnimatedBarGroup />

# childrenReactNoderequired

BarSeries elements

# enableEventsboolean

Whether the Series emits and subscribes to PointerEvents and FocusEvents (including Tooltip triggering).

# onBlur(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.

# onFocus({ 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.

# onPointerDown({ 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.

# onPointerMove({ 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.

# onPointerOut(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.

# onPointerUp({ 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.

# paddingnumber

Group band scale padding, 0, 1 where 0 = no padding, 1 = no bar.

# sortBars(dataKeyA: string, dataKeyB: string) => number

Comparator function to sort dataKeys within a bar group. By default the DOM rendering order of BarGroups children is used.

#<AnimatedBarSeries />

# dataDatum[]required

Data for the Series.

# dataKeystringrequired

Required data key for the Series, should be unique across all series.

# xAccessor(d: Datum) => ScaleInput<XScale>required

Given a Datum, returns the x-scale value.

# yAccessor(d: Datum) => ScaleInput<YScale>required

Given a Datum, returns the y-scale value.

# barPaddingnumber

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.

# colorAccessor(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.

# enableEventsboolean

Whether the Series emits and subscribes to PointerEvents and FocusEvents (including Tooltip triggering).

# onBlur(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.

# onFocus({ 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.

# onPointerDown({ 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.

# onPointerMove({ 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.

# onPointerOut(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.

# onPointerUp({ 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.

# radiusnumber

Optional radius to apply to bar corners.

# radiusAllboolean

Whether to apply radius to all corners.

# radiusBottomboolean

Whether to apply radius to bottom corners.

# radiusLeftboolean

Whether to apply radius to left corners.

# radiusRightboolean

Whether to apply radius to right corners.

# radiusTopboolean

Whether to apply radius to top corners.

#<AnimatedBarStack />

# childrenReactElement<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.

# enableEventsboolean

Whether the Series emits and subscribes to PointerEvents and FocusEvents (including Tooltip triggering).

# offset"none" | "expand" | "diverging" | "silhouette" | "wiggle"

Sets the stack offset to the pre-defined d3 offset, see https://github.com/d3/d3-shape#stack_offset.

# onBlur(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.

# onFocus({ 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.

# onPointerDown({ 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.

# onPointerMove({ 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.

# onPointerOut(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.

# onPointerUp({ 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.

# order"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 />

# dataDatum[]required

Data for the Series.

# dataKeystringrequired

Required data key for the Series, should be unique across all series.

# xAccessor(d: Datum) => ScaleInput<XScale>required

Given a Datum, returns the x-scale value.

# yAccessor(d: Datum) => ScaleInput<YScale>required

Given a Datum, returns the y-scale value.

# colorAccessor(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.

# enableEventsboolean

Whether the Series emits and subscribes to PointerEvents and FocusEvents (including Tooltip triggering).

# onBlur(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.

# onFocus({ 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.

# onPointerDown({ 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.

# onPointerMove({ 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.

# onPointerOut(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.

# onPointerUp({ 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.

# renderGlyphFC<GlyphProps<Datum>>
# sizenumber | ((d: Datum) => number)

The size of a Glyph, a number or a function which takes a Datum and returns a number.

#<AnimatedGrid />

# animationTrajectoryAnimationTrajectory

Animation trajectory of grid lines.

# children(props: { lines: GridLines; }) => ReactNode

Optionally override rendering of grid lines.

# classNamestring

classname to apply to line group element.

# columnsboolean

Whether to render GridColumns.

# leftnumber

Left offset to apply to glyph g element container.

# lineStyleCSSProperties

Styles to apply as grid line style.

# numTicksnumber

Approximate number of grid lines. Approximate due to d3 alogrithm, specify tickValues for precise control.

# offsetnumber

Pixel offset to apply as a translation (y- for Rows, x- for Columns) to each grid lines.

# rowsboolean

Whether to render GridRows.

# strokestring

Grid line stroke color.

# strokeDasharraystring

Grid line stroke-dasharray attribute.

# strokeWidthReactText

Grid line stroke thickness.

# topnumber

Top offset to apply to glyph g element container.

#<AnimatedLineSeries />

# dataDatum[]required

Data for the Series.

# dataKeystringrequired

Required data key for the Series, should be unique across all series.

# xAccessor(d: Datum) => ScaleInput<XScale>required

Given a Datum, returns the x-scale value.

# yAccessor(d: Datum) => ScaleInput<YScale>required

Given a Datum, returns the y-scale value.

# colorAccessor(dataKey: string) => string

Given a datakey, returns its color. Falls back to theme color if unspecified or if a null-ish value is returned.

# curveCurveFactory | CurveFactoryLineOnly

Sets the curve factory (from @visx/curve or d3-curve) for the line generator. Defaults to curveLinear.

# enableEventsboolean

Whether the Series emits and subscribes to PointerEvents and FocusEvents (including Tooltip triggering).

# onBlur((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.

# onFocus(({ 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.

# onPointerDown(({ 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.

# onPointerMove(({ 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.

# onPointerOut((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.

# onPointerUp(({ 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 />

# childrenReactNoderequired

Annotation children (Subject, Label, Connector)

# datumDatumrequired

Datum to annotate, used for Annotation positioning.

# canEditLabelboolean

Whether the Label position (dx, dy) is editable.

# canEditSubjectboolean

Whether the Subject position (x, y) is editable.

# dataKeystring

Key for series to which datum belongs (used for x/yAccessors). Alternatively xAccessor + yAccessor may be specified.

# dxnumber

x delta of the Label from the Subject.

# dynumber

y delta of the Label from the Subject.

# editableboolean
# onDragEnd({ x, y, dx, dy, event }: HandlerArgs) => void

Callback invoked on drag end.

# onDragMove({ x, y, dx, dy, event }: HandlerArgs) => void

Callback invoked on drag move.

# onDragStart({ x, y, dx, dy, event }: HandlerArgs) => void

Callback invoked on drag start.

# xAccessor(d: Datum) => ScaleInput<XScale>

If dataKey is not specified, you must specify an xAccessor for datum.

# yAccessor(d: Datum) => ScaleInput<YScale>

If dataKey is not specified, you must specify an yAccessor for datum.

#<AnnotationCircleSubject />

# classNamestring

Optional className to apply to CircleSubject in addition to 'visx-annotation-subject'.

# radiusnumber

Radius of CircleSubject.

# strokestring

Color of CircleSubject.

# xnumber

x position of the Subject.

# ynumber

y position of the Subject.

#<AnnotationConnector />

# classNamestring

Optional className to apply to container in addition to 'visx-annotation-connector'.

# dxnumber

x delta of the Label from the Subject.

# dynumber

y delta of the Label from the Subject.

# pathPropsSVGProps<SVGPathElement>

Optional additional props.

# strokestring

Color of the connector line.

# type"line" | "elbow"

Connector type.

# xnumber

x position of the Subject.

# ynumber

y position of the Subject.

#<AnnotationLabel />

# anchorLineStrokestring

Stroke color of anchor line.

# backgroundFillstring

Background color of label.

# backgroundPaddingnumber | { top?: number; right?: number; bottom?: number; left?: number; }

Padding of text from background.

# backgroundPropsSVGProps<SVGRectElement>

Additional props to be passed to background SVGRectElement.

# classNamestring

Optional className to apply to container in addition to 'visx-annotation-label'.

# fontColorstring

Color of title and subtitle text.

# horizontalAnchor"end" | "middle" | "inherit" | "start"

Whether the label is horizontally anchored to the start, middle, or end of its x position.

# maxWidthnumber

Max width of annotation, including background, for text wrapping.

# resizeObserverPolyfillnew (cb: ResizeObserverCallback) => ResizeObserver

Optionally inject a ResizeObserver polyfill, else this must be globally available.

# showAnchorLineboolean

Whether to render a line indicating label text anchor.

# showBackgroundboolean

Whether to render a label background.

# subtitlestring

Optional subtitle.

# subtitleDynumber

The vertical offset of the subtitle from the title.

# subtitleFontSizeReactText

Optional title font size.

# subtitleFontWeightReactText

Optional title font weight.

# subtitlePropsPartial<TextProps>

Optional subtitle Text props (to override color, etc.).

# titlestring

Optional title.

# titleFontSizeReactText

Optional title font size.

# titleFontWeightReactText

Optional title font weight.

# titlePropsPartial<TextProps>

Optional title Text props (to override color, etc.).

# verticalAnchor"end" | "middle" | "start"

Whether the label is vertically anchored to the start, middle, or end of its y position.

# widthnumber

Width of annotation, including background, for text wrapping.

# xnumber

Left offset of entire AnnotationLabel, if not specified uses x + dx from Annotation.

# ynumber

Top offset of entire AnnotationLabel, if not specified uses y + dy from Annotation.

#<AnnotationLineSubject />

# classNamestring

Optional className to apply to LineSubject in addition to 'visx-annotation-subject'.

# maxnumber
# minnumber
# orientation"horizontal" | "vertical"

Orientation of line.

# strokestring

Color of LineSubject.

# strokeWidthnumber

strokeWidth of LineSubject.

# xnumber

x position of LineSubject (for vertical LineSubjects).

# ynumber

y position of LineSubject (for horizontal LineSubjects).

#<AreaSeries />

# dataDatum[]required

Data for the Series.

# dataKeystringrequired

Required data key for the Series, should be unique across all series.

# xAccessor(d: Datum) => ScaleInput<XScale>required

Given a Datum, returns the x-scale value.

# yAccessor(d: Datum) => ScaleInput<YScale>required

Given a Datum, returns the y-scale value.

# curveCurveFactory

Sets the curve factory (from @visx/curve or d3-curve) for the line generator. Defaults to curveLinear.

# enableEventsboolean

Whether the Series emits and subscribes to PointerEvents and FocusEvents (including Tooltip triggering).

# linePropsPick<{ 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.

# onBlur((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.

# onFocus(({ 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.

# onPointerDown(({ 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.

# onPointerMove(({ 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.

# onPointerOut((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.

# onPointerUp(({ 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.

# renderLineboolean

Whether to render a Line along value of the Area shape (area is fill only).

# x0Accessor(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.

# y0Accessor(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 />

# childrenReactElement<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.

# curveCurveFactory

Sets the curve factory (from @visx/curve or d3-curve) for the line generator. Defaults to curveLinear.

# enableEventsboolean

Whether the Series emits and subscribes to PointerEvents and FocusEvents (including Tooltip triggering).

# offset"none" | "expand" | "diverging" | "silhouette" | "wiggle"

Sets the stack offset to the pre-defined d3 offset, see https://github.com/d3/d3-shape#stack_offset.

# onBlur(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.

# onFocus({ 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.

# onPointerDown({ 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.

# onPointerMove({ 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.

# onPointerOut(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.

# onPointerUp({ 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.

# order"none" | "ascending" | "descending" | "reverse" | "insideout"

Sets the stack order to the pre-defined d3 function, see https://github.com/d3/d3-shape#stack_order.

# renderLineboolean

Whether to render a Line along value of the Area shape (area is fill only).

#<Axis />

# orientation"top" | "left" | "right" | "bottom"required

Required axis orientation.

# axisClassNamestring

The class name applied to the outermost axis group element.

# axisLineClassNamestring

The class name applied to the axis line element.

# children(renderProps: AxisRendererProps<Scale>) => ReactNode

For more control over rendering or to add event handlers to datum, pass a function as children.

# hideAxisLineboolean

If true, will hide the axis line.

# hideTicksboolean

If true, will hide the ticks (but not the tick labels).

# hideZeroboolean

If true, will hide the '0' value tick and tick label.

# labelstring

The text for the axis label.

# labelClassNamestring

The class name applied to the axis label text element.

# labelOffsetnumber

Pixel offset of the axis label (does not include tick label font size, which is accounted for automatically)

# labelPropsPartial<TextProps>

Props applied to the axis label component.

# leftnumber

A left pixel offset applied to the entire axis.

# numTicksnumber

The number of ticks wanted for the axis (note this is approximate)

# rangePaddingnumber | { start?: number; end?: number; }

Pixel padding to apply to axis sides.

# strokestring

The color for the stroke of the lines.

# strokeDasharraystring

The pattern of dashes in the stroke.

# strokeWidthReactText

The pixel value for the width of the lines.

# tickClassNamestring

The class name applied to each tick group.

# tickComponent(tickRendererProps: TickRendererProps) => ReactNode

Override the component used to render tick labels (instead of <Text /> from @visx/text).

# tickFormatTickFormatter<ScaleInput<Scale>>

A d3 formatter for the tick text.

# tickLabelPropsTickLabelProps<ScaleInput<Scale>>

Either an object with the props for all tick labels or a function that returns props for a given tick label.

# tickLengthnumber

The length of the tick lines.

# tickLinePropsPick<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.

# ticksComponent(tickRendererProps: TicksRendererProps<Scale>) => ReactNode

Override the component used to render all tick lines and labels.

# tickStrokestring

The color for the tick's stroke value.

# tickTransformstring

A custom SVG transform value to be applied to each tick group.

# tickValuesScaleInput<Scale>[]

An array of values that determine the number and values of the ticks. Falls back to scale.ticks() or .domain().

# topnumber

A top pixel offset applied to the entire axis.

#<BarGroup />

# childrenReactNoderequired

BarSeries elements

# enableEventsboolean

Whether the Series emits and subscribes to PointerEvents and FocusEvents (including Tooltip triggering).

# onBlur(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.

# onFocus({ 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.

# onPointerDown({ 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.

# onPointerMove({ 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.

# onPointerOut(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.

# onPointerUp({ 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.

# paddingnumber

Group band scale padding, 0, 1 where 0 = no padding, 1 = no bar.

# sortBars(dataKeyA: string, dataKeyB: string) => number

Comparator function to sort dataKeys within a bar group. By default the DOM rendering order of BarGroups children is used.

#<BarSeries />

# dataDatum[]required

Data for the Series.

# dataKeystringrequired

Required data key for the Series, should be unique across all series.

# xAccessor(d: Datum) => ScaleInput<XScale>required

Given a Datum, returns the x-scale value.

# yAccessor(d: Datum) => ScaleInput<YScale>required

Given a Datum, returns the y-scale value.

# barPaddingnumber

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.

# colorAccessor(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.

# enableEventsboolean

Whether the Series emits and subscribes to PointerEvents and FocusEvents (including Tooltip triggering).

# onBlur(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.

# onFocus({ 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.

# onPointerDown({ 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.

# onPointerMove({ 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.

# onPointerOut(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.

# onPointerUp({ 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.

# radiusnumber

Optional radius to apply to bar corners.

# radiusAllboolean

Whether to apply radius to all corners.

# radiusBottomboolean

Whether to apply radius to bottom corners.

# radiusLeftboolean

Whether to apply radius to left corners.

# radiusRightboolean

Whether to apply radius to right corners.

# radiusTopboolean

Whether to apply radius to top corners.

#<BarStack />

# childrenReactElement<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.

# enableEventsboolean

Whether the Series emits and subscribes to PointerEvents and FocusEvents (including Tooltip triggering).

# offset"none" | "expand" | "diverging" | "silhouette" | "wiggle"

Sets the stack offset to the pre-defined d3 offset, see https://github.com/d3/d3-shape#stack_offset.

# onBlur(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.

# onFocus({ 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.

# onPointerDown({ 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.

# onPointerMove({ 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.

# onPointerOut(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.

# onPointerUp({ 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.

# order"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 />

# xScaleXScaleConfigrequired
# yScaleYScaleConfigrequired
# horizontalboolean | "auto"
# initialDimensionsPartial<{ width: number; height: number; margin: { top: number; right: number; bottom: number; left: number; }; }>
# resizeObserverPolyfillResizeObserverPolyfill

Optionally set the resizeObserverPolyfill context, which will be available to ParentSize, Tooltip, and AnnotationLabel components.

# themeXYChartTheme

#<EventEmitterProvider />

#<GlyphSeries />

# dataDatum[]required

Data for the Series.

# dataKeystringrequired

Required data key for the Series, should be unique across all series.

# xAccessor(d: Datum) => ScaleInput<XScale>required

Given a Datum, returns the x-scale value.

# yAccessor(d: Datum) => ScaleInput<YScale>required

Given a Datum, returns the y-scale value.

# colorAccessor(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.

# enableEventsboolean

Whether the Series emits and subscribes to PointerEvents and FocusEvents (including Tooltip triggering).

# onBlur(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.

# onFocus({ 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.

# onPointerDown({ 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.

# onPointerMove({ 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.

# onPointerOut(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.

# onPointerUp({ 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.

# renderGlyphFC<GlyphProps<Datum>>
# sizenumber | ((d: Datum) => number)

The size of a Glyph, a number or a function which takes a Datum and returns a number.

#<Grid />

# children(props: { lines: GridLines; }) => ReactNode

Optionally override rendering of grid lines.

# classNamestring

classname to apply to line group element.

# columnsboolean

Whether to render GridColumns.

# leftnumber

Left offset to apply to glyph g element container.

# lineStyleCSSProperties

Styles to apply as grid line style.

# numTicksnumber

Approximate number of grid lines. Approximate due to d3 alogrithm, specify tickValues for precise control.

# offsetnumber

Pixel offset to apply as a translation (y- for Rows, x- for Columns) to each grid lines.

# rowsboolean

Whether to render GridRows.

# strokestring

Grid line stroke color.

# strokeDasharraystring

Grid line stroke-dasharray attribute.

# strokeWidthReactText

Grid line stroke thickness.

# topnumber

Top offset to apply to glyph g element container.

#<LineSeries />

# dataDatum[]required

Data for the Series.

# dataKeystringrequired

Required data key for the Series, should be unique across all series.

# xAccessor(d: Datum) => ScaleInput<XScale>required

Given a Datum, returns the x-scale value.

# yAccessor(d: Datum) => ScaleInput<YScale>required

Given a Datum, returns the y-scale value.

# colorAccessor(dataKey: string) => string

Given a datakey, returns its color. Falls back to theme color if unspecified or if a null-ish value is returned.

# curveCurveFactory | CurveFactoryLineOnly

Sets the curve factory (from @visx/curve or d3-curve) for the line generator. Defaults to curveLinear.

# enableEventsboolean

Whether the Series emits and subscribes to PointerEvents and FocusEvents (including Tooltip triggering).

# onBlur((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.

# onFocus(({ 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.

# onPointerDown(({ 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.

# onPointerMove(({ 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.

# onPointerOut((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.

# onPointerUp(({ 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.

#<ThemeProvider />

# themeXYChartTheme

#<Tooltip />

# renderTooltip(params: RenderTooltipParams<Datum>) => ReactNoderequired

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.

# applyPositionStyleboolean

Applies position: 'absolute' for tooltips to correctly position themselves when unstyled=true. In a future major release this will be the default behavior.

# classNamestring

Optional className to apply to the Tooltip in addition to visx-tooltip.

# debouncenumber | { scroll: number; resize: number; }

Debounce resize or scroll events in milliseconds (needed for positioning)

# detectBoundsboolean

whether TooltipWithBounds should be used to auto-detect (page) boundaries and reposition itself.

# glyphStyleSVGProps<SVGCircleElement>

Optional styles for the point, if visible.

# horizontalCrosshairStyleSVGProps<SVGLineElement>

Optional styles for the vertical crosshair, if visible.

# offsetLeftnumber

Offset the left position of the Tooltip by this margin.

# offsetTopnumber

Offset the top position of the Tooltip by this margin.

# renderGlyph(params: RenderTooltipGlyphProps<Datum>) => ReactNode

Function which handles rendering glyphs.

# resizeObserverPolyfillnew (cb: ResizeObserverCallback) => ResizeObserver

Tooltip depends on ResizeObserver, which may be polyfilled globally, passed to XYChart, or injected into this component.

# scrollboolean

React to nested scroll changes, don't use this if you know your view is static

# showDatumGlyphboolean

Whether to show a glyph at the tooltip position for the (single) nearest Datum.

# showHorizontalCrosshairboolean

Whether to show a horizontal line at tooltip position.

# showSeriesGlyphsboolean

Whether to show a glyph for the nearest Datum in each series.

# showVerticalCrosshairboolean

Whether to show a vertical line at tooltip position.

# snapTooltipToDatumXboolean

Whether to snap tooltip + crosshair x-coord to the nearest Datum x-coord instead of the event x-coord.

# snapTooltipToDatumYboolean

Whether to snap tooltip + crosshair y-coord to the nearest Datum y-coord instead of the event y-coord.

# styleCSSProperties

Styles to apply, unless unstyled=true.

# unstyledboolean

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' }
# verticalCrosshairStyleSVGProps<SVGLineElement>

Optional styles for the vertical crosshair, if visible.

# zIndexReactText

Optional z-index to set on the Portal.

#<TooltipProvider />

# hideTooltipDebounceMsnumber

Debounce time for when hideTooltip is invoked.

Default 400

#<XYChart />

# childrenReactNoderequired

XYChart children (Series, Tooltip, etc.).

# accessibilityLabelstring

aria-label for the chart svg element.

# captureEventsboolean

Whether to capture and dispatch pointer events to EventEmitter context (which e.g., Series subscribe to).

# heightnumber

Total height of the desired chart svg, including margin.

# horizontalboolean | "auto"
# marginMargin

Margin to apply around the outside.

# onPointerDown({ 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}.

# onPointerMove({ 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}.

# onPointerOut(event: PointerEvent<Element>) => void

Callback invoked for onPointerOut events for the nearest Datum to the PointerEvent for each Series with pointerEvents={true}.

# onPointerUp({ 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}.

# pointerEventsDataKey"all" | "nearest"

Whether to invoke PointerEvent handlers for all dataKeys, or the nearest dataKey.

# resizeObserverPolyfillResizeObserverPolyfill

Responsive charts, <Tooltip />, and <AnnotationLabel /> depend on ResizeObserver which may be polyfilled globally, passed to individual components or injected once into this component.

# themeXYChartTheme

If DataContext is not available, XYChart will wrap itself in a DataProvider and set this as the theme.

# widthnumber

Total width of the desired chart svg, including margin.

# xScaleXScaleConfig

If DataContext is not available, XYChart will wrap itself in a DataProvider and set this as the xScale config.

# yScaleYScaleConfig

If DataContext is not available, XYChart will wrap itself in a DataProvider and set this as the yScale config.

#buildChartTheme()

# backgroundColorstringrequired
# colorsstring[]required
# gridColorstringrequired
# gridColorDarkstringrequired
# tickLengthnumberrequired
# gridStylesCSSProperties
# htmlLabelCSSProperties
# svgLabelBigTextProps
# svgLabelSmallTextProps
# xAxisLineStylesPick<SVGAttributes<SVGLineElement>, "string" | "children" | "scale" | "width" | "height" | "x" | "y" | "dx" | "dy" | "className" | "stroke" | "radius" | ... 455 more ... | "onTransitionEndCapture">
# xTickLineStylesPick<SVGAttributes<SVGLineElement>, "string" | "children" | "scale" | "width" | "height" | "x" | "y" | "dx" | "dy" | "className" | "stroke" | "radius" | ... 455 more ... | "onTransitionEndCapture">
# yAxisLineStylesPick<SVGAttributes<SVGLineElement>, "string" | "children" | "scale" | "width" | "height" | "x" | "y" | "dx" | "dy" | "className" | "stroke" | "radius" | ... 455 more ... | "onTransitionEndCapture">
# yTickLineStylesPick<SVGAttributes<SVGLineElement>, "string" | "children" | "scale" | "width" | "height" | "x" | "y" | "dx" | "dy" | "className" | "stroke" | "radius" | ... 455 more ... | "onTransitionEndCapture">

#useEventEmitter()

Exports