Introduction
Welcome to Reincharts
What is Reincharts?
Reincharts is a set of composable React components built for interactive charting. It provides primitives like ChartCanvas, Chart, Axes, Series, Tooltips, Coordinates, and Interactive tools. It leverages D3 scales and a canvas-first rendering approach for speed, while keeping a React-friendly API.
Key Features
- Composable primitives: Build charts from small, reusable components
- Performance: Canvas-first rendering, handles large datasets
- Interactive: Zoom/pan, brush, trend lines, Fibonacci tools
- TypeScript: Types across all packages
- Modular: Import from a single entry point or per-package
Packages Overview
reincharts: Aggregated entry point re-exporting all packages@reincharts/core: ChartCanvas, Chart, Generic components@reincharts/axes: XAxis, YAxis@reincharts/series: LineSeries, CandlestickSeries, BarSeries, etc.@reincharts/coordinates: CrossHairCursor, MouseCoordinateX/Y, EdgeIndicator@reincharts/tooltip: OHLCTooltip, SingleValueTooltip, MACDTooltip…@reincharts/interactive: TrendLine, Brush, ZoomButtons, Fibonacci tools@reincharts/annotations: Label, BarAnnotation, SvgPathAnnotation@reincharts/scales: Discontinuous time scale providers@reincharts/indicators: Indicator helpers@reincharts/utils: withSize, withDeviceRatio HOCs
Chart Types
Line
Line chart for trends over time
Area
Standard area chart for trends over time
Bar
Bar series for volume or categorical data
Candlestick
Visualize OHLC price action with wicks and bodies
Scatter
Scatter plot for visualizing data points
Heikin Ashi
Smooths price action for trend analysis
Kagi
Price movement chart that ignores time
OHLC
Open, High, Low, Close rendered as bars
Point & Figure
Charts price movement with Xs and Os
Renko
Brick-based chart for filtering out minor price moves
Getting Started
Ready to start building charts? Follow the step-by-step guide to get Reincharts up and running in your app.