@reincharts/interactive
Drawing tools, brush and zoom controls.
npm install @reincharts/interactiveEverything here is also re-exported by the umbrella package reincharts.
Components
| Name | Description |
|---|---|
| Brush | Drag a rectangle to zoom into / report a range. |
| Drawings | Renders and edits the drawings of a controller. |
| DrawingStyleToolbar | Floating style editor shown above the selected drawing(s): color, width, dash, fill, lock, clone, delete. |
| DrawingToolbar | Drawing tools toolbar with group flyouts, magnet, keep drawing, lock / hide / remove all. |
| ZoomButtons | Zoom out / zoom in / scroll / reset buttons at the bottom of the chart. |
Hooks
| Name | Description |
|---|---|
| useDrawings | Creates a drawing controller for <Drawings>, <DrawingToolbar> and <DrawingStyleToolbar>. |
| useDrawingState | Subscribes a component to a controller's state. |
Functions
| Name | Description |
|---|---|
| arrowHead | Filled arrow head at to, pointing away from from. |
| constrainAngle | Constrains p relative to origin to the nearest multiple of 45° (shift key). |
| createDrawingController | Framework agnostic drawing store: drawings, selection, active tool, undo / redo, clipboard, serialization and events. |
| createEditor | Framework agnostic editing logic of <Drawings>: rendering, hit testing, creation, dragging, keyboard shortcuts and alerts. |
| createGeometry | Converts a drawing to pixels for the given pane. |
| defineTool | Defines a drawing tool. |
| dist | Distance between two points in pixels. |
| distToSegment | Distance from p to segment ab. |
| drawingId | Generates a unique drawing id. |
| extendSegment | Extends segment a→b far beyond a box of size w×h (the canvas clip trims it). |
| fillOf | Translucent version of the drawing color for fills. |
| fillPolygon | Fills a closed polygon through points with a color. |
| handle | Draws one edit handle. |
| inPolygon | Even-odd point in polygon test. |
| inRect | Whether (x, y) lies inside the rectangle spanned by a and b. |
| label | A filled label box. |
| linearRegression | Least squares fit y = intercept + slope * x. |
| lineCross | Price of the line through the first two points at a logical x (respecting style.extend). |
| multiLabel | Multi-line label box (measure / position stats). |
| nearPolyline | True when (x, y) is near any segment of the polyline. |
| nearSegment | Whether (x, y) is within the hit tolerance of segment a–b. |
| polyline | Traces a polyline through points into the current path. |
| rectOf | Normalized rect spanned by two points. |
| regression | Linear regression of the source values between the two points (logical x). |
| renderOrder | Drawings sorted for rendering (by z, then creation order). |
| segment | Strokes a straight line between two points (uses the current stroke style). |
| strokeOf | Applies the drawing's color / width / dash. |
| text | Plain text (no box). |
| textBox | Layout of a multi-line text box whose top-left is at. |
Constants
| Name | Description |
|---|---|
| annotationTools | Drawing tools of one toolbar group: textTool, callout, priceLabel, priceLine. |
| arrow | The Arrow drawing tool (type: "arrow"). |
| brush | The Brush drawing tool (type: "brush"). |
| builtinTools | Every built-in tool, in toolbar order. |
| callout | The Callout drawing tool (type: "callout"). |
| crossLine | The Cross Line drawing tool (type: "crossLine"). |
| dateAndPriceRange | The Date and Price Range drawing tool (type: "dateAndPriceRange"). |
| dateRange | The Date Range drawing tool (type: "dateRange"). |
| DRAWING_COLORS | Default color swatches. |
| ellipse | The Ellipse drawing tool (type: "ellipse"). |
| extendedLine | The Extended Line drawing tool (type: "extendedLine"). |
| FIB_LEVELS | Default fibonacci levels and colors. |
| fibExtension | The Trend-Based Fib Extension drawing tool (type: "fibExtension"). |
| fibRetracement | The Fib Retracement drawing tool (type: "fibRetracement"). |
| fibTools | Drawing tools of one toolbar group: fibRetracement, fibExtension, gannFan. |
| freehandTools | Freehand tools: brush and highlighter. |
| GANN_LEVELS | Default gann fan ratios (time/price). |
| gannFan | The Gann Fan drawing tool (type: "gannFan"). |
| highlighter | Thick, translucent freehand strokes for marking up a chart. |
| horizontalLineTool | The Horizontal Line drawing tool (type: "horizontalLine"). |
| horizontalRay | The Horizontal Ray drawing tool (type: "horizontalRay"). |
| icons | Built-in 28×28 line icons (tool and toolbar icons), drawn with currentColor. |
| infoLine | The Info Line drawing tool (type: "infoLine"). |
| lineTools | Drawing tools of one toolbar group: trendLine, ray, infoLine, extendedLine, arrow, horizontalLineTool, horizontalRay, verticalLineTool, crossLine, parallelChannel, regressionChannel, pitchfork. |
| longPosition | The Long position drawing tool (type: "longPosition"). |
| measureTools | Drawing tools of one toolbar group: longPosition, shortPosition, priceRange, dateRange, dateAndPriceRange. |
| parallelChannel | The Parallel Channel drawing tool (type: "parallelChannel"). |
| path | The Path drawing tool (type: "path"). |
| pitchfork | The Pitchfork drawing tool (type: "pitchfork"). |
| priceLabel | The Price Label drawing tool (type: "priceLabel"). |
| priceLine | Draggable horizontal price line with a label and a close button (orders, alerts). |
| priceRange | The Price Range drawing tool (type: "priceRange"). |
| ray | The Ray drawing tool (type: "ray"). |
| rectangle | The Rectangle drawing tool (type: "rectangle"). |
| regressionChannel | The Regression Trend drawing tool (type: "regressionChannel"). |
| shapeTools | Drawing tools of one toolbar group: rectangle, ellipse, triangle, path. |
| shortPosition | The Short position drawing tool (type: "shortPosition"). |
| textTool | The Text drawing tool (type: "text"). |
| TOLERANCE | Hit tolerance in pixels. |
| toolGroups | Toolbar groups (toolbar order). |
| trendLine | The Trend Line drawing tool (type: "trendLine"). |
| triangle | The Triangle drawing tool (type: "triangle"). |
| verticalLineTool | The Vertical Line drawing tool (type: "verticalLine"). |
Types
| Name | Description |
|---|---|
| BrushProps | Props of the Brush component. |
| BrushRange | Range selected with <Brush>. |
| CrossEvent | Fired when new data crosses a line drawing (price alerts). |
| CursorMode | Pointer mode of the chart when no drawing tool is active. |
| Drawing | One drawing on the chart. |
| DrawingController | The drawing controller returned by useDrawings() / createDrawingController(). |
| DrawingControllerEvents | |
| DrawingControllerOptions | |
| DrawingControllerState | Snapshot of the controller state (immutable, safe for React). |
| DrawingEditor | |
| DrawingLevel | A fibonacci / gann level. |
| DrawingPoint | A drawing anchor: data x value (timestamp / number) and raw price. |
| DrawingsJSON | Serialized drawings (toJSON / load). |
| DrawingsProps | Props of the Drawings component. |
| DrawingStyle | Visual style of a drawing. |
| DrawingStyleToolbarProps | Props of the DrawingStyleToolbar component. |
| DrawingToolbarProps | Props of the DrawingToolbar component. |
| DrawState | Render state of a drawing. |
| EditorOptions | Options of the drawing editor (props of <Drawings>). |
| Geometry | The drawing converted to pixels plus helpers, handed to tool draw / hitTest / handles. |
| GeometryContext | |
| HitPart | Result of a hit test: false = miss, "body" (or true) = the drawing, a number = handle index, "remove" = a close button. |
| IconName | |
| MagnetMode | Magnet mode used while placing points. |
| NewDrawing | Input of add: a drawing without id (the pane defaults to "main"). |
| Pt | A point in pane plot pixels. |
| StyleControl | Controls of the floating style toolbar. |
| ToolDefinition | A drawing tool. |
| UseDrawingsOptions | Options of useDrawings (the controller options). |
| ZoomButtonsProps | Props of the ZoomButtons component. |