@reincharts/annotations
Reference lines and areas, markers, labels, watermarks.
npm install @reincharts/annotationsEverything here is also re-exported by the umbrella package reincharts.
Components
| Name | Description |
|---|---|
| Label | Text (and/or an SVG path) at a data or pixel position. |
| Markers | Series markers above / below / in bars or at a price: arrows, shapes, flags, custom paths and text. |
| ReferenceArea | A highlighted rectangle / band between x and / or y values (ranges, sessions, target zones). |
| ReferenceDot | A dot at a data point with an optional label above it (highlights, peaks, events). |
| ReferenceLine | A horizontal (y) or vertical (x) reference line with an optional label (thresholds, targets, events). |
| Watermark | Big faint text behind the series (e.g. |
Functions
| Name | Description |
|---|---|
| addShape | Adds a marker shape of size s centered at (cx, cy) to a path. |
| fromEdge | Resolves a pixel coordinate: negative values count from the far edge. |
| indexOf | Index of the datum nearest to a data x value, or -1. |
| logicalOf | Logical x of a data x value (works in index and linear modes, extrapolates beyond the data). |
| pixelX | Plot-relative pixel x of a data x value. |
| svgPath | Parsed (cached) Path2D of an SVG path string. |
Types
| Name | Description |
|---|---|
| AnnotationShape | |
| DataX | A data x value: a Date / timestamp, a number (linear x or numeric data) or a category name. |
| LabelProps | Props of the Label component. |
| MarkerItem | One explicit marker placed by data x. |
| MarkerPosition | |
| MarkersProps | Props of the Markers component. |
| ReferenceAreaProps | Props of the ReferenceArea component. |
| ReferenceDotProps | Props of the ReferenceDot component. |
| ReferenceLineProps | Props of the ReferenceLine component. |
| ResolvedMarker | A marker resolved to pixels (passed to onClick). |
| WatermarkProps | Props of the Watermark component. |