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"
AxisBandOptions
Axis
Band
Options<TDatum>
:
AxisOptionsBase & { getValue
: (datum
: TDatum) => ChartValue<any>; minBandSize
?: number; scaleType
: "band" }
Type parameters
AxisBase
AxisBase<TDatum>:
{ _?: TDatum; isVertical: boolean; range: [number, number] }
Type parameters
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
AxisLinear
Axis
Linear<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
AxisLinearOptions
Axis
Linear
Options<TDatum>
:
AxisOptionsBase & { base
?: number; getValue
: (datum
: TDatum) => ChartValue<number>; hardMax
?: number; hardMin
?: number; max
?: number; min
?: number; scaleType
: "linear" | "log" }
Type parameters
AxisOptions
Type parameters
AxisOptionsBase
Axis
Options
Base
:
{ 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
-
-
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
Type parameters
AxisTime
Axis
Time<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
AxisTimeOptions
Axis
Time
Options<TDatum>
:
AxisOptionsBase & { base
?: number; getValue
: (datum
: TDatum) => ChartValue<Date>; hardMax
?: number; hardMin
?: number; max
?: number; min
?: number; scaleType
: "time" | "localTime" }
Type parameters
AxisType
AxisType:
"ordinal" | "time" | "localTime" | "linear" | "log"
ChartContextValue
Type parameters
Type declaration
-
-
getDatumStatusStyle: (datum: Datum<TDatum>,
focusedDatum: Datum<TDatum> | null) => DatumStyles
-
-
Parameters
-
datum:
Datum<TDatum>
-
focusedDatum:
Datum<TDatum> | null
-
-
getSeriesStatusStyle: (series: Series<TDatum>,
focusedDatum: Datum<TDatum> | null) => SeriesStyles
-
-
Parameters
-
series:
Series<TDatum>
-
focusedDatum:
Datum<TDatum> | null
-
-
groupedDatums: 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>>]
-
-
(): [Datum<TDatum> | null, SetAtom<SetStateAction<Datum<TDatum> | null>>]
-
Returns [Datum<TDatum> | null, SetAtom<SetStateAction<Datum<TDatum> | null>>]
-
width: number
ChartOffset
ChartOffset:
{ height: number; left: number; top: number; width: number }
Type declaration
-
height: number
-
left: number
-
top: number
-
width: number
ChartOptions
Chart
Options<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
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
-
-
start: unknown
Returns
void
-
Optional
style?: CSSProperties
-
Optional
dark?: boolean
-
-
Optional
defaultColors?: string[]
-
-
Optional
getSeriesOrder?: (series: Series<TDatum>[]) => Series<TDatum>[]
-
-
Parameters
Returns
Series<TDatum>[]
-
-
-
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
-
-
Optional
primaryCursor?: boolean | CursorOptions
-
Optional
renderSVG?: () => 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
CursorOptions
CursorOptions:
{ axisId?: string; onChange?: () => void; show?: boolean; showLabel?: boolean; showLine?: boolean; value?: unknown }
Type declaration
-
Optional
axisId?: string
-
Optional
onChange?: () => 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
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"
PointerPressed
PointerPressed:
PointerBase & { dragging: true; startX: number; startY: number }
PointerUnpressed
PointerUnpressed:
PointerBase & { dragging: false }
Position
Position:
"top" | "right" | "bottom" | "left"
RequiredChartOptions
Required
Chart
Options<TDatum>
:
TSTB.Object.Required<ChartOptions<TDatum>, "getSeriesStyle" | "getDatumStyle" | "getSeriesOrder" | "interactionMode" | "showVoronoi" | "defaultColors" | "initialWidth" | "initialHeight">
Type parameters
ResolvedAxisOptions
ResolvedAxisOptions<TAxisOptions>:
TSTB.Object.Required<TAxisOptions & {}, "minTickPaddingForRotation" | "tickLabelRotationDeg" | "innerBandPadding" | "outerBandPadding" | "show" | "stacked">
Type parameters
ResolvedTooltipOptions
Resolved
Tooltip
Options<TDatum>
:
TSTB.Object.Required<TooltipOptions<TDatum>, "align" | "alignPriority" | "padding" | "tooltipArrowPadding" | "anchor" | "render">
Type parameters
Series
Series<TDatum>
:
{ datums
: Datum<TDatum>[]; id
: string; index
: number; label
: string; originalSeries
: UserSerie<TDatum>; secondaryAxisId
?: string; style
?: CSSProperties }
Type parameters
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
Stack
Datum<TDatum>
:
{ 0
: number; 1
: number; data
: Datum<TDatum> }
Type parameters
Type declaration
-
0: number
-
1: number
-
data: Datum<TDatum>
TooltipOptions
Tooltip
Options<TDatum>
:
{ align
?: AlignMode; alignPriority
?: AlignPosition[]; invert
?: boolean; padding
?: number; render
?: (props
: TooltipRendererProps<TDatum>) => React.ReactNode; tooltipArrowPadding
?: number }
Type parameters
Type declaration
-
-
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
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
-
Type parameters
Parameters
-
__namedParameters:
ComponentPropsWithoutRef<"div"> & { options: ChartOptions<TDatum> }
Returns Element