Options
All
  • Public
  • Public/Protected
  • All
Menu

React Charts Header

Simple, immersive and interactive charts for React

#TanStack Join the community on Spectrum

Enjoy this library? Try the entire TanStack! React Table, React Query, React Form

Visit react-charts.tanstack.com for docs, guides, API and more!

Quick Features

  • Line Charts
  • Bar Charts
  • Column Charts
  • Bubble Charts
  • Area Charts
  • Axis Stacking
  • Inverted Axes
  • Hyper Responsive
  • Invisibly Powered by D3
  • Declarative
  • Mutliple Axes

Become a Sponsor!

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Tanner Linsley

💻 🤔 💡 🚧 👀

This project follows the all-contributors specification. Contributions of any kind welcome!

Index

Type aliases

AlignMode

AlignMode: "auto" | "right" | "topRight" | "bottomRight" | "left" | "topLeft" | "bottomLeft" | "top" | "bottom" | "center"

AlignPosition

AlignPosition: "right" | "topRight" | "bottomRight" | "left" | "topLeft" | "bottomLeft" | "top" | "bottom"

AnchorMode

AnchorMode: "pointer" | "closest" | "center" | "top" | "bottom" | "left" | "right" | "gridTop" | "gridBottom" | "gridLeft" | "gridRight" | "gridCenter"

AxesInfo

AxesInfo: { xKey: "primary" | "secondary"; yKey: "primary" | "secondary" }

Type declaration

  • xKey: "primary" | "secondary"
  • yKey: "primary" | "secondary"

Axis

Axis<TDatum>: AxisTime<TDatum> | AxisLinear<TDatum> | AxisBand<TDatum>

Type parameters

  • TDatum

AxisBand

AxisBand<TDatum>: Omit<AxisBase<TDatum> & ResolvedAxisOptions<AxisBandOptions<TDatum>>, "format"> & { axisFamily: "band"; format: (value: ChartValue<any>) => string; outerScale: ScaleBand<any>; scale: ScaleBand<any> }

Type parameters

  • TDatum

AxisBandOptions

AxisBandOptions<TDatum>: AxisOptionsBase & { getValue: (datum: TDatum) => ChartValue<any>; minBandSize?: number; scaleType: "band" }

Type parameters

  • TDatum

AxisBase

AxisBase<TDatum>: { _?: TDatum; isVertical: boolean; range: [number, number] }

Type parameters

  • TDatum

Type declaration

  • Optional _?: TDatum
  • isVertical: boolean
  • range: [number, number]

AxisDimension

AxisDimension: { bottom: number; height: number; left: number; right: number; top: number; width: number }

Type declaration

  • bottom: number
  • height: number
  • left: number
  • right: number
  • top: number
  • width: number

AxisDimensions

AxisDimensions: { bottom: Record<string, AxisDimension>; left: Record<string, AxisDimension>; right: Record<string, AxisDimension>; top: Record<string, AxisDimension> }

Type declaration

AxisLinear

AxisLinear<TDatum>: Omit<AxisBase<TDatum> & ResolvedAxisOptions<AxisLinearOptions<TDatum>>, "format"> & { axisFamily: "linear"; bandScale: ScaleBand<number>; format: ReturnType<ScaleLinear<number, number, never>["tickFormat"]>; outerScale: ScaleLinear<number, number, never>; scale: ScaleLinear<number, number, never> }

Type parameters

  • TDatum

AxisLinearOptions

AxisLinearOptions<TDatum>: AxisOptionsBase & { base?: number; getValue: (datum: TDatum) => ChartValue<number>; hardMax?: number; hardMin?: number; max?: number; min?: number; scaleType: "linear" | "log" }

Type parameters

  • TDatum

AxisOptions

AxisOptions<TDatum>: AxisTimeOptions<TDatum> | AxisOrdinalOptions<TDatum> | AxisBandOptions<TDatum> | AxisLinearOptions<TDatum>

Type parameters

  • TDatum

AxisOptionsBase

AxisOptionsBase: { curve?: CurveFactory; elementType?: "line" | "area" | "bar"; id?: string; innerBandPadding?: number; invert?: boolean; isPrimary?: boolean; minTickPaddingForRotation?: number; outerBandPadding?: number; position: Position; primaryAxisId?: string; show?: boolean; showDatumElements?: boolean; showGrid?: boolean; showOrphanDatumElements?: boolean; stackOffset?: typeof stackOffsetNone; stacked?: boolean; styles?: CSSProperties & { line?: CSSProperties; tick?: CSSProperties }; tickLabelRotationDeg?: number }

Type declaration

  • Optional curve?: CurveFactory
  • Optional elementType?: "line" | "area" | "bar"
  • Optional id?: string
  • Optional innerBandPadding?: number
  • Optional invert?: boolean
  • Optional isPrimary?: boolean
  • Optional minTickPaddingForRotation?: number
  • Optional outerBandPadding?: number
  • position: Position
  • Optional primaryAxisId?: string
  • Optional show?: boolean
  • Optional showDatumElements?: boolean
  • Optional showGrid?: boolean
  • Optional showOrphanDatumElements?: boolean
  • Optional stackOffset?: typeof stackOffsetNone
  • Optional stacked?: boolean
  • Optional styles?: CSSProperties & { line?: CSSProperties; tick?: CSSProperties }
  • Optional tickLabelRotationDeg?: number

AxisOrdinalOptions

AxisOrdinalOptions<TDatum>: AxisOptionsBase & { getValue: (datum: TDatum) => ChartValue<any>; scaleType: "ordinal" }

Type parameters

  • TDatum

AxisTime

AxisTime<TDatum>: Omit<AxisBase<TDatum> & ResolvedAxisOptions<AxisTimeOptions<TDatum>>, "format"> & { axisFamily: "time"; bandScale: ScaleBand<number>; format: ReturnType<ScaleTime<number, number, never>["tickFormat"]>; outerScale: ScaleTime<number, number, never>; scale: ScaleTime<number, number, never> }

Type parameters

  • TDatum

AxisTimeOptions

AxisTimeOptions<TDatum>: AxisOptionsBase & { base?: number; getValue: (datum: TDatum) => ChartValue<Date>; hardMax?: number; hardMin?: number; max?: number; min?: number; scaleType: "time" | "localTime" }

Type parameters

  • TDatum

AxisType

AxisType: "ordinal" | "time" | "localTime" | "linear" | "log"

ChartContextValue

ChartContextValue<TDatum>: { axesInfo: AxesInfo; getDatumStatusStyle: (datum: Datum<TDatum>, focusedDatum: Datum<TDatum> | null) => DatumStyles; getOptions: () => RequiredChartOptions<TDatum>; getSeriesStatusStyle: (series: Series<TDatum>, focusedDatum: Datum<TDatum> | null) => SeriesStyles; gridDimensions: GridDimensions; datumsByInteractionGroup: Map<any, Datum<TDatum>[]>; height: number; orderedSeries: Series<TDatum>[]; primaryAxis: Axis<TDatum>; secondaryAxes: Axis<TDatum>[]; series: Series<TDatum>[]; svgRect: ClientRect; useAxisDimensionsAtom: () => [AxisDimensions, SetAtom<SetStateAction<AxisDimensions>>]; useFocusedDatumAtom: () => [Datum<TDatum> | null, SetAtom<SetStateAction<Datum<TDatum> | null>>]; width: number }

Type parameters

  • TDatum

Type declaration

ChartOffset

ChartOffset: { height: number; left: number; top: number; width: number }

Type declaration

  • height: number
  • left: number
  • top: number
  • width: number

ChartOptions

ChartOptions<TDatum>: { brush?: { onSelect?: (selection: { end: unknown; pointer: Pointer; start: unknown }) => void; style?: CSSProperties }; dark?: boolean; data: UserSerie<TDatum>[]; defaultColors?: string[]; getDatumStyle?: (datum: Datum<TDatum>, status: DatumFocusStatus) => DatumStyles; getSeriesOrder?: (series: Series<TDatum>[]) => Series<TDatum>[]; getSeriesStyle?: (series: Series<TDatum>, status: SeriesFocusStatus) => SeriesStyles; interactionMode?: GroupingMode; initialHeight?: number; initialWidth?: number; onClickDatum?: (datum: Datum<TDatum> | null, event: React.MouseEvent<SVGSVGElement, MouseEvent>) => void; onFocusDatum?: (datum: Datum<TDatum> | null) => void; primaryAxis: AxisOptions<TDatum>; primaryCursor?: boolean | CursorOptions; renderSVG?: () => React.ReactNode; secondaryAxes: AxisOptions<TDatum>[]; secondaryCursor?: boolean | CursorOptions; showDebugAxes?: boolean; showVoronoi?: boolean; tooltip?: boolean | TooltipOptions<TDatum> }

Type parameters

  • TDatum

Type declaration

  • Optional brush?: { onSelect?: (selection: { end: unknown; pointer: Pointer; start: unknown }) => void; style?: CSSProperties }
    • Optional onSelect?: (selection: { end: unknown; pointer: Pointer; start: unknown }) => void
        • (selection: { end: unknown; pointer: Pointer; start: unknown }): void
        • Parameters

          • selection: { end: unknown; pointer: Pointer; start: unknown }
            • end: unknown
            • pointer: Pointer
            • start: unknown

          Returns void

    • Optional style?: CSSProperties
  • Optional dark?: boolean
  • data: UserSerie<TDatum>[]
  • Optional defaultColors?: string[]
  • Optional getDatumStyle?: (datum: Datum<TDatum>, status: DatumFocusStatus) => DatumStyles
  • Optional getSeriesOrder?: (series: Series<TDatum>[]) => Series<TDatum>[]
  • Optional getSeriesStyle?: (series: Series<TDatum>, status: SeriesFocusStatus) => SeriesStyles
  • Optional groupingMode?: GroupingMode
  • Optional initialHeight?: number
  • Optional initialWidth?: number
  • Optional onClickDatum?: (datum: Datum<TDatum> | null, event: React.MouseEvent<SVGSVGElement, MouseEvent>) => void
      • (datum: Datum<TDatum> | null, event: React.MouseEvent<SVGSVGElement, MouseEvent>): void
      • Parameters

        • datum: Datum<TDatum> | null
        • event: React.MouseEvent<SVGSVGElement, MouseEvent>

        Returns void

  • Optional onFocusDatum?: (datum: Datum<TDatum> | null) => void
      • (datum: Datum<TDatum> | null): void
      • Parameters

        • datum: Datum<TDatum> | null

        Returns void

  • primaryAxis: AxisOptions<TDatum>
  • Optional primaryCursor?: boolean | CursorOptions
  • Optional renderSVG?: () => React.ReactNode
      • (): React.ReactNode
      • Returns React.ReactNode

  • secondaryAxes: AxisOptions<TDatum>[]
  • Optional secondaryCursor?: boolean | CursorOptions
  • Optional showDebugAxes?: boolean
  • Optional showVoronoi?: boolean
  • Optional tooltip?: boolean | TooltipOptions<TDatum>

ChartValue

ChartValue<T>: T | null | undefined

Type parameters

  • T

CursorOptions

CursorOptions: { axisId?: string; onChange?: () => void; show?: boolean; showLabel?: boolean; showLine?: boolean; value?: unknown }

Type declaration

  • Optional axisId?: string
  • Optional onChange?: () => void
      • (): void
      • Returns void

  • Optional show?: boolean
  • Optional showLabel?: boolean
  • Optional showLine?: boolean
  • Optional value?: unknown

Datum

Datum<TDatum>: { element?: Element | null; group?: Datum<TDatum>[]; index: number; originalDatum: TDatum; originalSeries: UserSerie<TDatum>; secondaryAxisId?: string; seriesId: string; seriesIndex: number; seriesLabel: string; stackData?: StackDatum<TDatum>; style?: CSSProperties }

Type parameters

  • TDatum

Type declaration

  • Optional element?: Element | null
  • Optional group?: Datum<TDatum>[]
  • index: number
  • originalDatum: TDatum
  • originalSeries: UserSerie<TDatum>
  • Optional secondaryAxisId?: string
  • seriesId: string
  • seriesIndex: number
  • seriesLabel: string
  • Optional stackData?: StackDatum<TDatum>
  • Optional style?: CSSProperties

DatumFocusStatus

DatumFocusStatus: "none" | "focused" | "groupFocused"

DatumStyles

DatumStyles: CSSProperties & { area?: CSSProperties; circle?: CSSProperties; line?: CSSProperties; rectangle?: CSSProperties }

GridDimensions

GridDimensions: { height: number; width: number; gridX: number; gridY: number }

Type declaration

  • gridHeight: number
  • gridWidth: number
  • gridX: number
  • gridY: number

GroupingMode

GroupingMode: "single" | "series" | "primary" | "secondary"

Measurement

Measurement: Side | "width" | "height"

Pointer

PointerPressed

PointerPressed: PointerBase & { dragging: true; startX: number; startY: number }

PointerUnpressed

PointerUnpressed: PointerBase & { dragging: false }

Position

Position: "top" | "right" | "bottom" | "left"

RequiredChartOptions

RequiredChartOptions<TDatum>: TSTB.Object.Required<ChartOptions<TDatum>, "getSeriesStyle" | "getDatumStyle" | "getSeriesOrder" | "interactionMode" | "showVoronoi" | "defaultColors" | "initialWidth" | "initialHeight">

Type parameters

  • TDatum

ResolvedAxisOptions

ResolvedAxisOptions<TAxisOptions>: TSTB.Object.Required<TAxisOptions & {}, "minTickPaddingForRotation" | "tickLabelRotationDeg" | "innerBandPadding" | "outerBandPadding" | "show" | "stacked">

Type parameters

  • TAxisOptions

ResolvedTooltipOptions

ResolvedTooltipOptions<TDatum>: TSTB.Object.Required<TooltipOptions<TDatum>, "align" | "alignPriority" | "padding" | "tooltipArrowPadding" | "anchor" | "render">

Type parameters

  • TDatum

Series

Series<TDatum>: { datums: Datum<TDatum>[]; id: string; index: number; label: string; originalSeries: UserSerie<TDatum>; secondaryAxisId?: string; style?: CSSProperties }

Type parameters

  • TDatum

Type declaration

  • datums: Datum<TDatum>[]
  • id: string
  • index: number
  • label: string
  • originalSeries: UserSerie<TDatum>
  • Optional secondaryAxisId?: string
  • Optional style?: CSSProperties

SeriesFocusStatus

SeriesFocusStatus: "none" | "focused"

SeriesStyles

SeriesStyles: CSSProperties & { area?: CSSProperties; circle?: CSSProperties; line?: CSSProperties; rectangle?: CSSProperties }

Side

Side: "left" | "right" | "top" | "bottom"

StackDatum

StackDatum<TDatum>: { 0: number; 1: number; data: Datum<TDatum> }

Type parameters

  • TDatum

Type declaration

  • 0: number
  • 1: number
  • data: Datum<TDatum>

TooltipOptions

TooltipOptions<TDatum>: { align?: AlignMode; alignPriority?: AlignPosition[]; invert?: boolean; padding?: number; render?: (props: TooltipRendererProps<TDatum>) => React.ReactNode; tooltipArrowPadding?: number }

Type parameters

  • TDatum

Type declaration

  • Optional align?: AlignMode
  • Optional alignPriority?: AlignPosition[]
  • Optional invert?: boolean
  • Optional padding?: number
  • Optional render?: (props: TooltipRendererProps<TDatum>) => React.ReactNode
      • (props: TooltipRendererProps<TDatum>): React.ReactNode
      • Parameters

        • props: TooltipRendererProps<TDatum>

        Returns React.ReactNode

  • Optional tooltipArrowPadding?: number

UserSerie

UserSerie<TDatum>: { color?: string; data: TDatum[]; id?: string; label?: string; primaryAxisId?: string; secondaryAxisId?: string }

Type parameters

  • TDatum

Type declaration

  • Optional color?: string
  • data: TDatum[]
  • Optional id?: string
  • Optional label?: string
  • Optional primaryAxisId?: string
  • Optional secondaryAxisId?: string

Functions

Chart

  • Chart<TDatum>(__namedParameters: ComponentPropsWithoutRef<"div"> & { options: ChartOptions<TDatum> }): Element

Legend

Generated using TypeDoc