@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
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>
);

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).


⚠️ ResizeObserver dependency

The Tooltip and AnnotationLabel components rely on ResizeObservers. If your browswer target needs a polyfill, you can either polute the window object or inject it cleanly using the resizeObserverPolyfill prop for these components.

Examples

Error: This browser does not support ResizeObserver out of the box

// no polyfill, no browser support
() => <XYChart {...}><Tooltip /></XYChart>

✅ No errors

// no polyfill, target browser supports ResizeObserver
() => <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 {...}>
    <Tooltip resizeObserverPolyfill={ResizeObserver} />
  </XYChart>
)

Examples

APIs

#<Annotation />

# childrenReactNoderequired

Annotation children (Subject, Label, Connector)

# datumDatumrequired

Datum to annotate, used for Annotation positioning.

# canEditLabelboolean | undefined

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

# canEditSubjectboolean | undefined

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

# dataKeystring | undefined

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

# dxnumber | undefined

x delta of the Label from the Subject.

# dynumber | undefined

y delta of the Label from the Subject.

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

Callback invoked on drag end.

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

Callback invoked on drag move.

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

Callback invoked on drag start.

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

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

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

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

#<AnimatedAnnotation />

# childrenReactNoderequired

Annotation children (Subject, Label, Connector)

# datumDatumrequired

Datum to annotate, used for Annotation positioning.

# canEditLabelboolean | undefined

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

# canEditSubjectboolean | undefined

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

# dataKeystring | undefined

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

# dxnumber | undefined

x delta of the Label from the Subject.

# dynumber | undefined

y delta of the Label from the Subject.

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

Callback invoked on drag end.

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

Callback invoked on drag move.

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

Callback invoked on drag start.

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

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

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

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

#<AnnotationLabel />

# anchorLineStrokestring | undefined

Stroke color of anchor line.

# backgroundFillstring | undefined

Background color of label.

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

Padding of text from background.

# backgroundPropsSVGProps<SVGRectElement> | undefined

Additional props to be passed to background SVGRectElement.

# classNamestring | undefined

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

# fontColorstring | undefined

Color of title and subtitle text.

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

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

# maxWidthnumber | undefined

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

# resizeObserverPolyfill(new (cb: ResizeObserverCallback) => ResizeObserver) | undefined

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

# showAnchorLineboolean | undefined

Whether to render a line indicating label text anchor.

# showBackgroundboolean | undefined

Whether to render a label background.

# subtitlestring | undefined

Optional subtitle.

# subtitleDynumber | undefined

The vertical offset of the subtitle from the title.

# subtitleFontSizestring | number | undefined

Optional title font size.

# subtitleFontWeightstring | number | undefined

Optional title font weight.

# subtitlePropsPartial<TextProps> | undefined

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

# titlestring | undefined

Optional title.

# titleFontSizestring | number | undefined

Optional title font size.

# titleFontWeightstring | number | undefined

Optional title font weight.

# titlePropsPartial<TextProps> | undefined

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

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

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

# widthnumber | undefined

Width of annotation, including background, for text wrapping.

# xnumber | undefined

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

# ynumber | undefined

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

#<AnnotationConnector />

# classNamestring | undefined

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

# dxnumber | undefined

x delta of the Label from the Subject.

# dynumber | undefined

y delta of the Label from the Subject.

# pathPropsSVGProps<SVGPathElement> | undefined

Optional additional props.

# strokestring | undefined

Color of the connector line.

# type"line" | "elbow" | undefined

Connector type.

# xnumber | undefined

x position of the Subject.

# ynumber | undefined

y position of the Subject.

#<AnnotationCircleSubject />

# classNamestring | undefined

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

# radiusnumber | undefined

Radius of CircleSubject.

# strokestring | undefined

Color of CircleSubject.

# xnumber | undefined

x position of the Subject.

# ynumber | undefined

y position of the Subject.

#<AnnotationLineSubject />

# classNamestring | undefined

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

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

Orientation of line.

# strokestring | undefined

Color of LineSubject.

# strokeWidthnumber | undefined

strokeWidth of LineSubject.

# xnumber | undefined

x position of LineSubject (for vertical LineSubjects).

# ynumber | undefined

y position of LineSubject (for horizontal LineSubjects).

#<AnimatedAxis />

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

Required axis orientation.

# animationTrajectory"max" | "min" | "center" | "outside" | undefined

Animation trjectory of axis ticks.

# axisClassNamestring | undefined

The class name applied to the outermost axis group element.

# axisLineClassNamestring | undefined

The class name applied to the axis line element.

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

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

# hideAxisLineboolean | undefined

If true, will hide the axis line.

# hideTicksboolean | undefined

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

# hideZeroboolean | undefined

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

# labelstring | undefined

The text for the axis label.

# labelClassNamestring | undefined

The class name applied to the axis label text element.

# labelOffsetnumber | undefined

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

# labelPropsPartial<TextProps> | undefined

Props applied to the axis label component.

# leftnumber | undefined

A left pixel offset applied to the entire axis.

# numTicksnumber | undefined

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

# rangePaddingnumber | undefined

Pixel padding to apply to both sides of the axis.

# strokestring | undefined

The color for the stroke of the lines.

# strokeDasharraystring | undefined

The pattern of dashes in the stroke.

# strokeWidthstring | number | undefined

The pixel value for the width of the lines.

# tickClassNamestring | undefined

The class name applied to each tick group.

# tickComponent((tickRendererProps: TickRendererProps) => ReactNode) | undefined

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

# tickFormatTickFormatter<ScaleInput<Scale>> | undefined

A d3 formatter for the tick text.

# tickLabelPropsTickLabelProps<ScaleInput<Scale>> | undefined

A function that returns props for a given tick label.

# tickLengthnumber | undefined

The length of the tick lines.

# tickLinePropsPick<SVGProps<SVGLineElement>, "string" | "children" | "className" | "width" | "height" | "scale" | "color" | "id" | "lang" | "max" | "media" | "method" | ... 455 more ... | "key"> | undefined

Props to be applied to individual tick lines.

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

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

# tickStrokestring | undefined

The color for the tick's stroke value.

# tickTransformstring | undefined

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

# tickValuesScaleInput<Scale>[] | undefined

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

# topnumber | undefined

A top pixel offset applied to the entire axis.

#<AnimatedGrid />

# animationTrajectory"max" | "min" | "center" | "outside" | undefined

Animation trajectory of grid lines.

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

Optionally override rendering of grid lines.

# classNamestring | undefined

classname to apply to line group element.

# columnsboolean | undefined

Whether to render GridColumns.

# leftnumber | undefined

Left offset to apply to glyph g element container.

# lineStyleCSSProperties | undefined

Styles to apply as grid line style.

# numTicksnumber | undefined

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

# offsetnumber | undefined

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

# rowsboolean | undefined

Whether to render GridRows.

# strokestring | undefined

Grid line stroke color.

# strokeDasharraystring | undefined

Grid line stroke-dasharray attribute.

# strokeWidthstring | number | undefined

Grid line stroke thickness.

# topnumber | undefined

Top offset to apply to glyph g element container.

#<Axis />

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

Required axis orientation.

# axisClassNamestring | undefined

The class name applied to the outermost axis group element.

# axisLineClassNamestring | undefined

The class name applied to the axis line element.

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

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

# hideAxisLineboolean | undefined

If true, will hide the axis line.

# hideTicksboolean | undefined

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

# hideZeroboolean | undefined

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

# labelstring | undefined

The text for the axis label.

# labelClassNamestring | undefined

The class name applied to the axis label text element.

# labelOffsetnumber | undefined

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

# labelPropsPartial<TextProps> | undefined

Props applied to the axis label component.

# leftnumber | undefined

A left pixel offset applied to the entire axis.

# numTicksnumber | undefined

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

# rangePaddingnumber | undefined

Pixel padding to apply to both sides of the axis.

# strokestring | undefined

The color for the stroke of the lines.

# strokeDasharraystring | undefined

The pattern of dashes in the stroke.

# strokeWidthstring | number | undefined

The pixel value for the width of the lines.

# tickClassNamestring | undefined

The class name applied to each tick group.

# tickComponent((tickRendererProps: TickRendererProps) => ReactNode) | undefined

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

# tickFormatTickFormatter<ScaleInput<Scale>> | undefined

A d3 formatter for the tick text.

# tickLabelPropsTickLabelProps<ScaleInput<Scale>> | undefined

A function that returns props for a given tick label.

# tickLengthnumber | undefined

The length of the tick lines.

# tickLinePropsPick<SVGProps<SVGLineElement>, "string" | "children" | "className" | "width" | "height" | "scale" | "color" | "id" | "lang" | "max" | "media" | "method" | ... 455 more ... | "key"> | undefined

Props to be applied to individual tick lines.

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

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

# tickStrokestring | undefined

The color for the tick's stroke value.

# tickTransformstring | undefined

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

# tickValuesScaleInput<Scale>[] | undefined

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

# topnumber | undefined

A top pixel offset applied to the entire axis.

#<Grid />

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

Optionally override rendering of grid lines.

# classNamestring | undefined

classname to apply to line group element.

# columnsboolean | undefined

Whether to render GridColumns.

# leftnumber | undefined

Left offset to apply to glyph g element container.

# lineStyleCSSProperties | undefined

Styles to apply as grid line style.

# numTicksnumber | undefined

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

# offsetnumber | undefined

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

# rowsboolean | undefined

Whether to render GridRows.

# strokestring | undefined

Grid line stroke color.

# strokeDasharraystring | undefined

Grid line stroke-dasharray attribute.

# strokeWidthstring | number | undefined

Grid line stroke thickness.

# topnumber | undefined

Top offset to apply to glyph g element container.

#<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 | undefined

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

# classNamestring | undefined

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

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

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

# detectBoundsboolean | undefined

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

# glyphStyleSVGProps<SVGCircleElement> | undefined

Optional styles for the point, if visible.

# horizontalCrosshairStyleSVGProps<SVGLineElement> | undefined

Optional styles for the vertical crosshair, if visible.

# offsetLeftnumber | undefined

Offset the left position of the Tooltip by this margin.

# offsetTopnumber | undefined

Offset the top position of the Tooltip by this margin.

# renderGlyph((params: GlyphProps<Datum>) => ReactNode) | undefined

Function which handles rendering glyphs.

# resizeObserverPolyfill(new (cb: ResizeObserverCallback) => ResizeObserver) | undefined

Tooltip depends on ResizeObserver, which may be pollyfilled globally or injected into this component.

# scrollboolean | undefined

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

# showDatumGlyphboolean | undefined

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

# showHorizontalCrosshairboolean | undefined

Whether to show a horizontal line at tooltip position.

# showSeriesGlyphsboolean | undefined

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

# showVerticalCrosshairboolean | undefined

Whether to show a vertical line at tooltip position.

# snapTooltipToDatumXboolean | undefined

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

# snapTooltipToDatumYboolean | undefined

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

# styleCSSProperties | undefined

Styles to apply, unless unstyled=true.

# unstyledboolean | undefined

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> | undefined

Optional styles for the vertical crosshair, if visible.

# zIndexstring | number | undefined

Optional z-index to set on the Portal.

#<XYChart />

# childrenReactNoderequired

XYChart children (Series, Tooltip, etc.).

# accessibilityLabelstring | undefined

aria-label for the chart svg element.

# captureEventsboolean | undefined

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

# heightnumber | undefined

Total height of the desired chart svg, including margin.

# horizontalboolean | "auto" | undefined
# marginMargin | undefined

Margin to apply around the outside.

# onPointerMove(({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void) | undefined

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

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

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) | undefined

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

# pointerEventsDataKey"all" | "nearest" | undefined

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

# themeXYChartTheme | undefined

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

# widthnumber | undefined

Total width of the desired chart svg, including margin.

# xScaleXScaleConfig | undefined

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

# yScaleYScaleConfig | undefined

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

#<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 | undefined

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

# enableEventsboolean | undefined

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

# linePropsPick<{ data?: Datum[] | undefined; innerRef?: ((instance: SVGPathElement | null) => void) | RefObject<SVGPathElement> | null | undefined; children?: ((args: { ...; }) => ReactNode) | undefined; fill?: string | undefined; className?: string | undefined; } & LinePathConfig<...> & SVGProps<...>, "string" | ... 467 more...

Props to be passed to the Line, if rendered.

# onBlur(((event: FocusEvent<Element>) => void) & ((event: FocusEvent<SVGPathElement>) => void)) | undefined

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)) | undefined

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.

# onPointerMove((({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void) & ((event: PointerEvent<SVGPathElement>) => void)) | undefined

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)) | undefined

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)) | undefined

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 | undefined

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

# x0Accessor((d: Datum) => ScaleInput<XScale>) | undefined

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>) | undefined

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" | "className" | "width" | "height" | "scale" | "color" | ... 466 more ... | "lineProps">, string | ... 1 more ... | (new (props: any) => Component<...>)> | ReactElement<...>[]required

AreaSeries elements, note we can't strictly enforce this with TS yet.

# curveCurveFactory | undefined

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

# enableEventsboolean | undefined

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

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

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

# onBlur((event: FocusEvent<Element>) => void) | undefined

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) | undefined

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.

# onPointerMove(({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void) | undefined

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) | undefined

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) | undefined

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" | undefined

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

# renderLineboolean | undefined

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

#<BarGroup />

# childrenElement | Element[]required

BarSeries elements

# enableEventsboolean | undefined

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

# onBlur((event: FocusEvent<Element>) => void) | undefined

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) | undefined

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.

# onPointerMove(({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void) | undefined

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) | undefined

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) | undefined

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 | undefined

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

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

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 | undefined

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 | null | undefined) | undefined

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

# enableEventsboolean | undefined

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

# onBlur((event: FocusEvent<Element>) => void) | undefined

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) | undefined

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.

# onPointerMove(({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void) | undefined

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) | undefined

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) | undefined

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.

#<BarStack />

# childrenReactElement<Pick<BaseBarSeriesProps<XScale, YScale, Datum>, "onFocus" | "onBlur" | "onPointerMove" | "onPointerUp" | "onPointerOut" | ... 6 more ... | "colorAccessor">, string | ... 1 more ... | (new (props: any) => Component<...>)> | ReactElement<...>[]required

BarSeries elements, note we can't strictly enforce this with TS yet.

# enableEventsboolean | undefined

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

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

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

# onBlur((event: FocusEvent<Element>) => void) | undefined

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) | undefined

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.

# onPointerMove(({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void) | undefined

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) | undefined

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) | undefined

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" | undefined

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

#<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 | null | undefined) | undefined

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

# enableEventsboolean | undefined

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

# onBlur((event: FocusEvent<Element>) => void) | undefined

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) | undefined

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.

# onPointerMove(({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void) | undefined

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) | undefined

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) | undefined

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>> | undefined
# sizenumber | ((d: Datum) => number) | undefined

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

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

# curveCurveFactory | CurveFactoryLineOnly | undefined

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

# enableEventsboolean | undefined

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

# onBlur(((event: FocusEvent<Element>) => void) & ((event: FocusEvent<SVGPathElement>) => void)) | undefined

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)) | undefined

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.

# onPointerMove((({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void) & ((event: PointerEvent<SVGPathElement>) => void)) | undefined

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)) | undefined

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)) | undefined

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.

#<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 | undefined

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

# enableEventsboolean | undefined

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

# linePropsPick<{ data?: Datum[] | undefined; innerRef?: ((instance: SVGPathElement | null) => void) | RefObject<SVGPathElement> | null | undefined; children?: ((args: { ...; }) => ReactNode) | undefined; fill?: string | undefined; className?: string | undefined; } & LinePathConfig<...> & SVGProps<...>, "string" | ... 467 more...

Props to be passed to the Line, if rendered.

# onBlur(((event: FocusEvent<Element>) => void) & ((event: FocusEvent<SVGPathElement>) => void)) | undefined

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)) | undefined

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.

# onPointerMove((({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void) & ((event: PointerEvent<SVGPathElement>) => void)) | undefined

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)) | undefined

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)) | undefined

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 | undefined

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

# x0Accessor((d: Datum) => ScaleInput<XScale>) | undefined

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>) | undefined

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" | "className" | "width" | "height" | "scale" | "color" | ... 466 more ... | "lineProps">, string | ... 1 more ... | (new (props: any) => Component<...>)> | ReactElement<...>[]required

AreaSeries elements, note we can't strictly enforce this with TS yet.

# curveCurveFactory | undefined

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

# enableEventsboolean | undefined

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

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

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

# onBlur((event: FocusEvent<Element>) => void) | undefined

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) | undefined

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.

# onPointerMove(({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void) | undefined

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) | undefined

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) | undefined

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" | undefined

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

# renderLineboolean | undefined

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

#<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 | undefined

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 | null | undefined) | undefined

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

# enableEventsboolean | undefined

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

# onBlur((event: FocusEvent<Element>) => void) | undefined

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) | undefined

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.

# onPointerMove(({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void) | undefined

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) | undefined

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) | undefined

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.

#<AnimatedBarStack />

# childrenReactElement<Pick<BaseBarSeriesProps<XScale, YScale, Datum>, "onFocus" | "onBlur" | "onPointerMove" | "onPointerUp" | "onPointerOut" | ... 6 more ... | "colorAccessor">, string | ... 1 more ... | (new (props: any) => Component<...>)> | ReactElement<...>[]required

BarSeries elements, note we can't strictly enforce this with TS yet.

# enableEventsboolean | undefined

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

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

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

# onBlur((event: FocusEvent<Element>) => void) | undefined

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) | undefined

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.

# onPointerMove(({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void) | undefined

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) | undefined

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) | undefined

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" | undefined

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

#<AnimatedBarGroup />

# childrenElement | Element[]required

BarSeries elements

# enableEventsboolean | undefined

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

# onBlur((event: FocusEvent<Element>) => void) | undefined

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) | undefined

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.

# onPointerMove(({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void) | undefined

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) | undefined

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) | undefined

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 | undefined

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

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

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

#<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 | null | undefined) | undefined

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

# enableEventsboolean | undefined

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

# onBlur((event: FocusEvent<Element>) => void) | undefined

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) | undefined

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.

# onPointerMove(({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void) | undefined

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) | undefined

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) | undefined

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>> | undefined
# sizenumber | ((d: Datum) => number) | undefined

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

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

# curveCurveFactory | CurveFactoryLineOnly | undefined

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

# enableEventsboolean | undefined

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

# onBlur(((event: FocusEvent<Element>) => void) & ((event: FocusEvent<SVGPathElement>) => void)) | undefined

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)) | undefined

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.

# onPointerMove((({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void) & ((event: PointerEvent<SVGPathElement>) => void)) | undefined

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)) | undefined

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)) | undefined

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.

#<DataProvider />

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

#<EventEmitterProvider />

#<ThemeProvider />

# themeXYChartTheme | undefined

#<TooltipProvider />

# hideTooltipDebounceMsnumber | undefined

Debounce time for when hideTooltip is invoked.

Default 400

#useEventEmitter()

#buildChartTheme()

# backgroundColorstringrequired
# colorsstring[]required
# gridColorstringrequired
# gridColorDarkstringrequired
# tickLengthnumberrequired
# gridStylesCSSProperties | undefined
# htmlLabelCSSProperties | undefined
# svgLabelBigTextProps | undefined
# svgLabelSmallTextProps | undefined
# xAxisLineStylesPick<SVGAttributes<SVGLineElement>, "string" | "children" | "className" | "width" | "height" | "scale" | "color" | "id" | "lang" | "max" | "media" | ... 456 more ... | "onTransitionEndCapture"> | undefined
# xTickLineStylesPick<SVGAttributes<SVGLineElement>, "string" | "children" | "className" | "width" | "height" | "scale" | "color" | "id" | "lang" | "max" | "media" | ... 456 more ... | "onTransitionEndCapture"> | undefined
# yAxisLineStylesPick<SVGAttributes<SVGLineElement>, "string" | "children" | "className" | "width" | "height" | "scale" | "color" | "id" | "lang" | "max" | "media" | ... 456 more ... | "onTransitionEndCapture"> | undefined
# yTickLineStylesPick<SVGAttributes<SVGLineElement>, "string" | "children" | "className" | "width" | "height" | "scale" | "color" | "id" | "lang" | "max" | "media" | ... 456 more ... | "onTransitionEndCapture"> | undefined