rumble-charts

Index

Type aliases

Functions

Type aliases

AnimateProps

AnimateProps: { children: ReactNode; className?: string; duration?: number; ease?: ((num: number) => number) | keyof typeof eases; interpolateProps?: keyof CommonProps[]; logFPS?: boolean; tag?: string; onCancel?: any; onEnd?: any; onStart?: any } & CommonProps

BarParams

BarParams: { point: Point; pointIndex: number; props: BarsProps; series: Series; seriesIndex: number }

Type declaration

point: Point
pointIndex: number
props: BarsProps
series: Series
seriesIndex: number

BarSeriesParams

BarSeriesParams: { props: BarsProps; series: Series; seriesIndex: number }

Type declaration

props: BarsProps
series: Series
seriesIndex: number

BarsProps

BarsProps: { barAttributes?: Record<string, any> | ((params: BarParams) => Record<string, any>); barStyle?: Style | ((params: BarParams) => Style); barVisible?: boolean | ((params: BarParams) => boolean); barWidth?: Size | ((props: BarsProps) => Size); combined?: boolean; groupPadding?: Size | ((props: BarsProps) => Size); groupStyle?: Style | ((params: BarParams) => Style); innerPadding?: Size | ((props: BarsProps) => Size); seriesAttributes?: Record<string, any> | ((params: BarSeriesParams) => Record<string, any>); seriesStyle?: Style | ((params: BarSeriesParams) => Style); seriesVisible?: boolean | ((params: BarSeriesParams) => boolean) } & GraphicProps

ChartProps

ChartProps: CommonProps & { children: ReactNode; height?: Size; layerHeight?: number; layerWidth?: number; tag?: string; viewBox?: string; width?: Size } & Record<string, any>

CloudLabel

CloudLabel: Point & { pointIndex: number; seriesIndex: number; size: number; text: string }

CloudLabelParams

CloudLabelParams: { label: CloudLabel; point: Point; pointIndex: number; props: CloudProps; series: Series; seriesIndex: number }

Type declaration

label: CloudLabel
point: Point
pointIndex: number
props: CloudProps
series: Series
seriesIndex: number

CloudProps

CloudProps: { font?: string | ((params: CloudLabel, index: number) => string); fontStyle?: FontStyle | ((params: CloudLabel, index: number) => FontStyle); fontWeight?: FontWeight | ((params: CloudLabel, index: number) => FontWeight); labelAttributes?: Record<string, unknown> | ((params: CloudLabelParams) => Record<string, unknown>); labelStyle?: Style | ((params: CloudLabelParams) => Style); labelVisible?: boolean | ((params: CloudLabelParams) => boolean); maxFontSize?: number; minFontSize?: number; padding?: number | ((params: CloudLabel, index: number) => number); rotate?: number | ((params: CloudLabel, index: number) => number); seriesAttributes?: Record<string, unknown> | ((params: CloudSeriesParams) => Record<string, unknown>); seriesStyle?: Style | ((params: CloudSeriesParams) => Style); seriesVisible?: boolean | ((params: CloudSeriesParams) => boolean); spiral?: "archimedean" | "rectangular" | ((size: [number, number]) => (t: number) => [number, number]); timeInterval?: number; random?: any } & GraphicProps

CloudSeriesParams

CloudSeriesParams: { props: CloudProps; series: Series; seriesIndex: number }

Type declaration

props: CloudProps
series: Series
seriesIndex: number

ColorScale

ColorScale: (param: any) => string

Type declaration

- (param: any): string
- Parameters
  - param: any
  Returns string

Colors

Colors: keyof typeof schemeMap | string[] | string[][] | ColorScale

CommonProps

CommonProps: SeriesProps & { layerHeight?: number; layerWidth?: number; scaleX?: ScaleX; scaleY?: ScaleY; seriesIndex?: number | number[] | ((series: Series, index: number) => boolean) }

Coords

Coords: { x: number; y: number }

Type declaration

x: number
y: number

DotParams

DotParams: { point: Point; pointIndex: number; props: DotsProps; series: Series; seriesIndex: number }

Type declaration

point: Point
pointIndex: number
props: DotsProps
series: Series
seriesIndex: number

DotRenderProps

DotRenderProps: { color: ColorScale; dotAttributes: Record<string, any>; dotStyle: Style; key?: string | number; point: Point; pointIndex: number; props: DotsProps; seriesIndex: number }

Type declaration

color: ColorScale
dotAttributes: Record<string, any>
dotStyle: Style
Optional key?: string | number
point: Point
pointIndex: number
props: DotsProps
seriesIndex: number

DotSeriesParams

DotSeriesParams: { props: DotsProps; series: Series; seriesIndex: number }

Type declaration

props: DotsProps
series: Series
seriesIndex: number

DotTypeParams

DotTypeParams: DotParams & { dotType: DotType | DotType[] }

DotsProps

DotsProps: { circleAttributes?: Record<string, any> | ((params: DotParams) => Record<string, any>); circleRadius?: number | string | ((params: DotParams) => number | string); dotAttributes?: Record<string, any> | ((params: DotTypeParams) => Record<string, any>); dotStyle?: Style | ((params: DotTypeParams) => Style); dotType?: DotType | DotType[] | ((params: DotParams) => DotType | DotType[]); dotVisible?: boolean | ((params: DotParams) => boolean); ellipseAttributes?: Record<string, any> | ((params: DotParams) => Record<string, any>); ellipseRadiusX?: number | string | ((params: DotParams) => number | string); ellipseRadiusY?: number | string | ((params: DotParams) => number | string); groupStyle?: Style | ((params: DotParams) => Style); label?: ReactNode | ((params: DotParams) => ReactNode); labelAttributes?: Record<string, any> | ((params: DotParams) => Record<string, any>); path?: string | ((params: DotParams) => string); pathAttributes?: Record<string, any> | ((params: DotParams) => Record<string, any>); seriesAttributes?: Record<string, any> | ((params: DotSeriesParams) => Record<string, any>); seriesStyle?: Style | ((params: DotSeriesParams) => Style); seriesVisible?: boolean | ((params: DotSeriesParams) => boolean); symbolAttributes?: Record<string, any> | ((params: DotParams) => Record<string, any>); symbolType?: DotSymbolType | ((params: DotParams) => DotSymbolType); dotRender?: any } & GraphicProps

DropShadowProps

DropShadowProps: { blurDeviation?: number; blurIn?: "SourceAlpha" | "SourceGraphic" | "BackgroundImage" | "BackgroundAlpha" | "FillPaint" | "StrokePaint"; dx?: number; dy?: number; id: string }

Type declaration

Optional blurDeviation?: number
Optional blurIn?: "SourceAlpha" | "SourceGraphic" | "BackgroundImage" | "BackgroundAlpha" | "FillPaint" | "StrokePaint"
Optional dx?: number
Optional dy?: number
id: string

FontStyle

FontStyle: "normal" | "italic" | "oblique" | "inherit"

FontWeight

FontWeight: "normal" | "bold" | "bolder" | "lighter" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900"

GradientProps

GradientProps: { center?: [Size, Size]; children?: ReactNode; cx?: Size; cy?: Size; focalPoint?: [Size, Size]; from?: [Size, Size]; fx?: Size; fy?: Size; gradientTransform?: string; gradientUnits?: "userSpaceOnUse" | "objectBoundingBox"; id?: string; idPrefix?: string; r?: Size; radius?: Size; spreadMethod?: "pad" | "repeat" | "reflect"; to?: [Size, Size]; type?: "linear" | "radial"; x1?: Size; x2?: Size; y1?: Size; y2?: Size }

Type declaration

Optional center?: [Size, Size]

For type=radial
Optional children?: ReactNode
Optional cx?: Size
Optional cy?: Size
Optional focalPoint?: [Size, Size]

For type=radial
Optional from?: [Size, Size]

For type=linear
Optional fx?: Size
Optional fy?: Size
Optional gradientTransform?: string
Optional gradientUnits?: "userSpaceOnUse" | "objectBoundingBox"
Optional id?: string
Optional idPrefix?: string
Optional r?: Size
Optional radius?: Size
Optional spreadMethod?: "pad" | "repeat" | "reflect"
Optional to?: [Size, Size]

For type=linear
Optional type?: "linear" | "radial"
Optional x1?: Size
Optional x2?: Size
Optional y1?: Size
Optional y2?: Size

GraphicProps

GraphicProps: { className?: string; colors?: Colors; opacity?: number; style?: Style } & CommonProps

HandlersProps

HandlersProps: CommonProps & { children: ReactNode; className?: string; distance?: "x" | "y"; onMouseLeave?: React.MouseEventHandler; optimized?: boolean; sensitivity?: number; onClick?: any; onMouseMove?: any }

LabelsProps

LabelsProps: Omit<DotsProps, "dotType">

LayerProps

LayerProps: CommonProps & { children?: ReactNode; className?: string; height?: Size; position?: Position; style?: Style; width?: Size }

LineSeriesParams

LineSeriesParams: { props: LinesProps; series: Series; seriesIndex: number }

Type declaration

props: LinesProps
series: Series
seriesIndex: number

LinesProps

LinesProps: { asAreas?: boolean; interpolation?: keyof typeof curves | CurveFactory; lineAttributes?: Record<string, any> | ((params: LineSeriesParams) => Record<string, any>); lineStyle?: Style | ((params: LineSeriesParams) => Style); lineVisible?: boolean | ((params: LineSeriesParams) => boolean); lineWidth?: Size | ((params: LineSeriesParams) => Size); seriesAttributes?: Record<string, any> | ((params: LineSeriesParams) => Record<string, any>); seriesStyle?: Style | ((params: LineSeriesParams) => Style); seriesVisible?: boolean | ((params: LineSeriesParams) => boolean) } & GraphicProps

MouseEvent

MouseEvent: { clientX: number; clientY: number; closestPoints: Point[]; originalEvent: React.MouseEvent; scaleX: ScaleContinuousNumeric<any, any>; scaleY: ScaleContinuousNumeric<any, any>; x: number; y: number }

Type declaration

clientX: number
clientY: number
closestPoints: Point[]
originalEvent: React.MouseEvent
scaleX: ScaleContinuousNumeric<any, any>
scaleY: ScaleContinuousNumeric<any, any>
x: number
y: number

NormalizedSeries

NormalizedSeries: Omit<Series, "data"> & { data: Point[] }

NormalizedSeriesProps

NormalizedSeriesProps: Omit<SeriesProps, "series" & "seriesNormalized"> & { series?: NormalizedSeries[]; seriesNormalized?: true }

PieParams

PieParams: { point: Point; pointIndex: number; props: PiesProps; series: Series; seriesIndex: number }

Type declaration

point: Point
pointIndex: number
props: PiesProps
series: Series
seriesIndex: number

PieSeriesParams

PieSeriesParams: { props: PiesProps; series: Series; seriesIndex: number }

Type declaration

props: PiesProps
series: Series
seriesIndex: number

PiesProps

PiesProps: { combined?: boolean; cornerRadius?: Size | ((params: PieParams) => Size); endAngle?: number; gradientStep?: number; groupPadding?: Size; groupStyle?: Style | ((params: PieParams) => Style); innerPadding?: Size; innerRadius?: Size; padAngle?: number; pieAttributes?: Record<string, any> | ((params: PieParams) => Record<string, any>); pieStyle?: Style | ((params: PieParams) => Style); pieVisible?: boolean | ((params: PieParams) => boolean); pieWidth?: Size; position?: Position; seriesAttributes?: Record<string, any> | ((params: PieSeriesParams) => Record<string, any>); seriesStyle?: Style | ((params: PieSeriesParams) => Style); seriesVisible?: boolean | ((params: PieSeriesParams) => boolean); startAngle?: number } & GraphicProps

Point

Point: { color?: string; opacity?: number; style?: Style; x?: number; y: number } & Record<string, any>

Position

Position: Size | [Size?, Size?]

RadialLinesProps

RadialLinesProps: { asAreas?: boolean; endAngle?: number; innerRadius?: Size; interpolation?: keyof typeof curves | CurveFactory; lineAttributes?: Record<string, any> | ((params: RadialLineParams) => Record<string, any>); lineStyle?: Style | ((params: RadialLineParams) => Style); lineVisible?: boolean | ((params: RadialLineParams) => boolean); lineWidth?: Size | ((params: RadialLineParams) => Size); position?: Position; seriesAttributes?: Record<string, any> | ((params: RadialLineParams) => Record<string, any>); seriesStyle?: Style | ((params: RadialLineParams) => Style); seriesVisible?: boolean | ((params: RadialLineParams) => boolean); startAngle?: number } & GraphicProps

ScaleX

ScaleX: { direction?: number; paddingEnd?: number; paddingLeft?: number; paddingRight?: number; paddingStart?: number; swap?: boolean; factory?: any }

Type declaration

Optional direction?: number

1 or -1, default value is 1
Optional paddingEnd?: number

Padding at the end of the scale domain, default value is 0.5
Optional paddingLeft?: number

Left padding in pixels, default value is 0
Optional paddingRight?: number

Right padding in pixels, default value is 0
Optional paddingStart?: number

Padding at the start of the scale domain, default value is 0.5
Optional swap?: boolean
factory: function
- factory(props: CommonProps): ScaleContinuousNumeric<any, any, never>
- - Defined in types.ts:54
  Parameters
  - props: CommonProps
  Returns ScaleContinuousNumeric<any, any, never>

ScaleY

ScaleY: { direction?: number; paddingBottom?: number; paddingEnd?: number; paddingStart?: number; paddingTop?: number; swap?: boolean; factory?: any }

Type declaration

Optional direction?: number

1 or -1, default value is 1
Optional paddingBottom?: number

Bottom padding in pixels, default value is 0
Optional paddingEnd?: number

Padding at the end of the scale domain, default value is 0
Optional paddingStart?: number

Padding at the start of the scale domain, default value is 0
Optional paddingTop?: number

Top padding in pixels, default value is 0
Optional swap?: boolean
factory: function
- factory(props: CommonProps): ScaleContinuousNumeric<any, any, never>
- - Defined in types.ts:79
  Parameters
  - props: CommonProps
  Returns ScaleContinuousNumeric<any, any, never>

Series

Series: { color?: string; data: (number | [number, number] | Point)[]; name?: string; opacity?: number; style?: Style }

Type declaration

Optional color?: string
data: (number | [number, number] | Point)[]
Optional name?: string
Optional opacity?: number
Optional style?: Style

SeriesProps

SeriesProps: { maxX?: number; maxY?: number; minX?: number; minY?: number; series?: Series[]; seriesNormalized?: boolean } & Record<string, any>

Size

Size: number | string

Style

Style: Record<string, any>

Tick

Tick: Partial<{ label: ReactNode | (() => ReactNode); labelAttributes: Record<string, any>; labelStyle: Style; lineAttributes: Record<string, any>; lineLength: Size; lineOffset: Size; lineStyle: Style; x: number; y: number }>

TickParams

TickParams: { index: number; props: TicksProps; tick: Tick; ticksLength: number }

Type declaration

index: number
props: TicksProps
tick: Tick
ticksLength: number

TicksConfig

TicksConfig: number | TicksDefinition | (number | Tick)[]

TicksDefinition

TicksDefinition: { distance?: number; maxTicks?: number; minDistance?: number }

Type declaration

Optional distance?: number
Optional maxTicks?: number
Optional minDistance?: number

TicksProps

TicksProps: { axis?: "x" | "y"; label?: ReactNode | ((params: TickParams) => ReactNode); labelAttributes?: Record<string, any> | ((params: TickParams) => Record<string, any>); labelStyle?: Style | ((params: TickParams) => Style); labelVisible?: boolean | ((params: TickParams) => boolean); lineAttributes?: Record<string, any> | ((params: TickParams) => Record<string, any>); lineLength?: Size | ((params: TickParams) => Size); lineOffset?: Size | ((params: TickParams) => Size); lineStyle?: Style | ((params: TickParams) => Style); lineVisible?: boolean | ((params: TickParams) => boolean); position?: "top" | "bottom" | "left" | "right"; tickAttributes?: Record<string, any> | ((params: TickParams) => Record<string, any>); tickStyle?: Style | ((params: TickParams) => Style); tickVisible?: boolean | ((params: TickParams) => boolean); ticks?: TicksConfig | ((props: TicksProps) => number | TicksConfig); labelFormat?: any } & Omit<GraphicProps, "colors">

TitleProps

TitleProps: { children: ReactNode | ((props: TitleProps) => ReactNode); className?: string; height?: number; layerHeight?: number; layerWidth?: number; position?: Position; series?: Series[]; style?: Style; textAnchor?: "start" | "middle" | "end"; width?: number }

Type declaration

children: ReactNode | ((props: TitleProps) => ReactNode)
Optional className?: string
Optional height?: number
Optional layerHeight?: number
Optional layerWidth?: number
Optional position?: Position
Optional series?: Series[]
Optional style?: Style
Optional textAnchor?: "start" | "middle" | "end"
Optional width?: number

TransformMethod

TransformMethod: BaseMethod | { method: BaseMethod; options: any }

TransformProps

TransformProps: { children: ReactNode; className?: string; method: TransformMethod | TransformMethod[] } & CommonProps

Functions

Animate

Animate(props: AnimateProps): ReactElement

- Defined in Animate.tsx:35
Animates (actually interpolates) your series data. Very useful when you want to have simple and nice transitions between data state.

As a wrapper it takes series obtained from its parent and gives it to its children.

By default, interpolateProps list contains all the common props: ['series', 'maxX', 'maxY', 'minX', 'minY', 'layerWidth', 'layerHeight']. Though, sometimes it makes a lot of sense to interpolate only series. Especially, when the components wrapped by <Animate> are "jumping". Also, you can explicitly define minY as a prop to make the limits stable (and therefore prevent the "jumping" effect)

Parameters
- props: AnimateProps
Returns ReactElement

Bars

Bars(props: BarsProps): ReactElement

- Defined in Bars.tsx:43
Renders bars for your bar chart.

Parameters
- props: BarsProps
Returns ReactElement

Chart

Chart(allProps: ChartProps): ReactElement

- Defined in Chart.tsx:52
Every chart should start with <Chart> component. It serves to set sizes (width and height) and to wrap all another components:
Also read more about hidden props.
Parameters
- allProps: ChartProps
Returns ReactElement

Cloud

Cloud(props: CloudProps): ReactElement

- Defined in Cloud.tsx:75
Renders cloud of tags/keywords. Uses d3-cloud for calculations. Please notice, series data points should have label attribute. See example below.

Parameters
- props: CloudProps
Returns ReactElement

Dots

Dots(props: DotsProps): ReactElement

- Defined in Dots.tsx:112
Renders dots for your scatter plot.

Parameters
- props: DotsProps
Returns ReactElement

DropShadow

DropShadow(__namedParameters: DropShadowProps): ReactElement

- Defined in DropShadow.tsx:13
Parameters
- __namedParameters: DropShadowProps
Returns ReactElement

Gradient

Gradient(__namedParameters: GradientProps): ReactElement

- Defined in Gradient.tsx:48
Wrapper around standard svg linearGradient and radialGradient.

Parameters
- __namedParameters: GradientProps
Returns ReactElement

Handlers

Handlers(props: HandlersProps): ReactElement

- Defined in Handlers.tsx:35
Helps to use mouse events. For now supports only onClick, onMouseMove and onMouseLeave.

This component will be improved and simplified in the future.

Parameters
- props: HandlersProps
Returns ReactElement

Labels

Labels(props: LabelsProps): ReactElement

- Defined in Labels.tsx:13
Renders labels for dots. Internally it's just a wrapper for <Dots> component with dotType="circle".

Parameters
- props: LabelsProps
Returns ReactElement

Layer

Layer(__namedParameters: LayerProps): ReactElement

- Defined in Layer.tsx:20
Creates a new layer using specific width and height at specific position. It's useful when you have two or more graphics on the same chart. Or in case you to have a margins.

Parameters
- __namedParameters: LayerProps
Returns ReactElement

Lines

Lines(props: LinesProps): ReactElement

- Defined in Lines.tsx:34
Renders lines for your line chart.

Parameters
- props: LinesProps
Returns ReactElement

Pies

Pies(props: PiesProps): ReactElement

- Defined in Pies.tsx:57
Renders pies for you pie chart or donut chart

Parameters
- props: PiesProps
Returns ReactElement

RadialLines

RadialLines(props: RadialLinesProps): ReactElement

- Defined in RadialLines.tsx:48
Renders radial lines for your radar chart

Parameters
- props: RadialLinesProps
Returns ReactElement

Ticks

Ticks(props: TicksProps): ReactElement

- Defined in Ticks.tsx:61
Renders ticks (labels and lines) for axis (x and y).

Parameters
- props: TicksProps
Returns ReactElement

Title

Title(props: TitleProps): ReactElement

- Defined in Title.tsx:23
Parameters
- props: TitleProps
Returns ReactElement

Transform

Transform(props: TransformProps): ReactElement

- Defined in Transform.tsx:23
Transforms series data according chosen method.

As a wrapper it takes series obtained from its parent and gives it to its children.

Parameters
- props: TransformProps
Returns ReactElement

Index

Type aliases

Functions

Type aliases

AnimateProps

BarParams

Type declaration

point: Point

pointIndex: number

props: BarsProps

series: Series

seriesIndex: number

BarSeriesParams

Type declaration

props: BarsProps

series: Series

seriesIndex: number

BarsProps

ChartProps

CloudLabel

CloudLabelParams

Type declaration

label: CloudLabel

point: Point

pointIndex: number

props: CloudProps

series: Series

seriesIndex: number

CloudProps

CloudSeriesParams

Type declaration

props: CloudProps

series: Series

seriesIndex: number

ColorScale

Type declaration

Parameters

param: any

Returns string

Colors

CommonProps

Coords

Type declaration

x: number

y: number

DotParams

Type declaration

point: Point

pointIndex: number

props: DotsProps

series: Series

seriesIndex: number

DotRenderProps

Type declaration

color: ColorScale

dotAttributes: Record<string, any>

dotStyle: Style

Optional key?: string | number

point: Point

pointIndex: number

props: DotsProps

seriesIndex: number

DotSeriesParams

Type declaration

props: DotsProps

series: Series

seriesIndex: number

DotTypeParams

DotsProps

DropShadowProps

Type declaration

Optional blurDeviation?: number

Optional blurIn?: "SourceAlpha" | "SourceGraphic" | "BackgroundImage" | "BackgroundAlpha" | "FillPaint" | "StrokePaint"

Optional dx?: number

Optional dy?: number

id: string

FontStyle

FontWeight

GradientProps

Type declaration