@reincharts/widget
The batteries-included <TradingChart> component.
npm install @reincharts/widgetEverything here is also re-exported by the umbrella package reincharts.
Components
| Name | Description |
|---|---|
| MainSeries | The main series element for a chart type. |
| TradingChart | A batteries-included stock chart: toolbar (symbol search, intervals, chart types, indicators, compare, layouts, replay, screenshot, fullscreen, theme), drawing tools, legends with controls, indicator settings, context menu, object tree, range presets and scale modes, multi-chart layouts with sync — in data mode (data) or datafeed mode (datafeed). |
| WidgetIcon | A small inline SVG line icon (stroke = currentColor). |
Functions
| Name | Description |
|---|---|
| applyPreset | Shows a range preset: from the preset start to the last bar (plus the usual right margin). |
| chartData | Chart data for a chart type: the bars unchanged, or the transform's new bars. |
| chartTypeInfo | Info of a chart type (candles for unknown ids). |
| defaultState | A state with every required field. |
| layoutCount | Number of charts in a layout. |
| normalizeState | Validates anything (parsed JSON, a partial object) into a complete state: unknown fields are dropped, invalid values fall back to defaults, duplicate indicator ids are removed. |
| parseState | Parses a JSON string (or object) produced by serializeState / save(). |
| presetStart | Start time (ms) of a range preset ending at last (the last bar time), in UTC calendar terms. |
| reduceState | Pure state reducer behind every TradingChart interaction. |
| serializeState | JSON string of a state (stable field order, no undefined values). |
Constants
| Name | Description |
|---|---|
| CHART_TYPE_IDS | Every chart type id, in chart type menu order (unknown ids in a saved state fall back to "candles"). |
| CHART_TYPES | Every chart type, in menu order. |
| LAYOUTS | Every multi-chart layout id, in layout menu order. |
| PRICE_PANE | Id of the main (price) pane. |
| RANGE_PRESETS | Range buttons of the bottom bar, in display order ("All" fits every loaded bar). |
| SCALE_MODES | Every price scale mode: linear, logarithmic, percent change from the first visible bar, indexed to 100. |
Types
| Name | Description |
|---|---|
| ChartType | Main series styles offered by the chart type menu. |
| ChartTypeInfo | Describes one chart type of the chart type menu. |
| IndicatorConfig | An indicator to start with: a registry id ("rsi") or an object with inputs / styles. |
| IndicatorState | One indicator on the chart (serializable). |
| LayoutKind | Multi-chart grid: one chart, two side by side ("2h"), two stacked ("2v"), one big + two ("3") or 2×2 ("4"). |
| MainSeriesProps | Props passed to the main series. |
| RangePreset | Bottom bar range buttons. |
| ScaleMode | Price scale mode of the main pane. |
| StateAction | An action of reduceState: one user change (pick a symbol, add an indicator, load a state...). |
| TradingChartBar | An OHLCV bar for data mode: a date (Date) or time (ms epoch) plus prices. |
| TradingChartHandle | Imperative API of <TradingChart ref>. |
| TradingChartProps | Props of <TradingChart>. |
| TradingChartSettings | User preferences edited in the settings dialog (missing fields fall back to the TradingChart props). |
| TradingChartState | Whole-layout state of a TradingChart. |
| WidgetIconName | Name of a built-in widget icon. |
| WidgetIconProps | Props of WidgetIcon. |