@windborne/grapher 1.0.24 → 1.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windborne/grapher",
-  "version": "1.0.24",
+  "version": "1.0.26",
   "description": "Graphing library",
   "main": "src/index.js",
   "module": "dist/bundle.esm.js",

package/readme.md

@@ -1,19 +1,23 @@
 
 # WindBorne Grapher
+
+[![npm version](https://img.shields.io/npm/v/@windborne/grapher.svg)](https://www.npmjs.com/package/@windborne/grapher)
+[![npm downloads](https://img.shields.io/npm/dm/@windborne/grapher.svg)](https://www.npmjs.com/package/@windborne/grapher)
+
 Powerful, performant graphing.
 
-Grapher is designed primarily for internal infrastructure with lots of data and lots of axes. 
+**Grapher** is designed primarily for internal infrastructure with lots of data and lots of axes. 
 Key features include:
- - Performance. Grapher can render a million points in 100ms and support new data coming in at hundreds of points per second without degraded performance.
- - Async data sources. Grapher supports observables directly as well as generator functions to generate data on the fly
- - Axis management. Series can be moved between axes and new axes created with ease.
- - Long data ranges.
+ - *Performance*. Grapher can render a million points in 100ms and support new data coming in at hundreds of points per second without degraded performance.
+ - *Async data sources*. Grapher supports observables directly as well as generator functions to generate data on the fly
+ - *Axis management*. Series can be moved between axes and new axes created with ease.
+ - *Long data ranges*.
 
 You _shouldn't_ use this package if:
- - You need to support older browsers. While it may work in older browsers, no guarantees are made. 
+ - *You need to support older browsers*. While it may work in older browsers, no guarantees are made. 
    New features will be used as they become available without regard for maintaining legacy support. 
- - You don't want to add a react dependency (though the rendering engine may be used without react). 
- - Asset size is a big concern. Despite not having dependencies, this is a relatively heavy engine compared to alternatives.
+ - *You don't want to add a react dependency* (though the rendering engine may be used without react). 
+ - *Asset size is a big concern*. Despite not having dependencies, this is a relatively heavy engine compared to alternatives.
 
 ## As a developer importing this package
 
@@ -48,63 +52,12 @@ You can find a full list in the package.json devDependencies, but they can be su
 
 # Grapher Component
 
-## Props
-Like any React component, Grapher is primarily configured via props.
-Refer to the Grapher PropTypes for complete type information.
-
-### Core Props
-
-**series** (required)
-This sets the data for the graph and is the only property that is truly required.
-See "Series" section for more details.
-
-**webgl**
-If true, will render with WebGL rather than a 2D context.
-This is more performant, but uses more resources.
-
-**requireWASM**
-If true, will wait until the WASM extensions are ready before it renders.
-This can be useful when your app has expensive initialization.
-
-### Series Format
-The `series` prop requires an array of objects, where each object represents a data series with the following properties:
-
-- **data** (required): The actual data points (see Data Formats below)
-- **type**: Data type or 'infer' to automatically detect
-- **xKey**: Property name for x-values when using object data
-- **yKey**: Property name for y-values when using object data
-- **xUnixDates**: Whether x-values are Unix timestamps (boolean)
-- **color**: Series color (string or number)
-- **name**: Series name for display in legend
-- **xLabel**: Label for x-axis
-- **yLabel**: Label for y-axis
-- **rendering**: Visual representation ('line', 'bar', 'area', or 'shadow', defaults to 'line'). The 'shadow' option creates an area chart with individual point-based (trapezoid) gradients extending downward.
-- **ignoreDiscontinuities**: Whether to connect points across gaps (boolean)
-- **dashed**: Whether to use dashed lines (boolean)
-- **dashPattern**: Array defining dash pattern (array of numbers)
-- **width**: Line width (number)
-- **axis**: Axis specification for the series (string or object)
-- **rangeSelectorWidth**: Width of the range selector for this series (number)
-- **expandYWith**: Values to include when calculating y-axis range (array of numbers)
-- **defaultAlwaysTooltipped**: Whether to always show tooltip for this series (boolean)
-- **square**: Whether to render the series with square points (boolean)
-- **shiftXBy**: Value to shift x-coordinates by (number)
-- **graph**: Affects which graph this series belongs to in multigrapher (number)
-- **background**: Background configuration (object)
-- **hideFromKey**: Whether to hide this series from the legend (boolean)
-- **showIndividualPoints**: Whether to show individual data points (boolean)
-- **negativeColor**: Color for negative values
-- **gradient**: Gradient configuration, only applies to area rendering (array)
-- **zeroLineWidth**: Width of the zero line, only applies to bar and area rendering (number)
-- **zeroLineColor**: Color of the zero line, only applies to bar and area rendering (string)
-- **zeroLineY**: Y-coordinate of the zero line, only applies to bar and area rendering (number or "bottom"). Defaults to zero; may also be the string "bottom".
-- **pointRadius**: Radius of points, only applies to area rendering (number)
-- **tooltipWidth**: Expected width of the tooltip (number). Will make the tooltip switch sides when this width plus the tooltip left position is greater than the graph width.
-- **hasAreaBottom**: read the bottom of the area from data (boolean). By default, the bottom of an area will just be zero; this allows changing that via passing in `[[x1, bottom], [x1, top], [x2, bottom], [x2, top]]` to data (see [examples/dynamic_bottom_area_chart.js](examples/dynamic_bottom_area_chart.js)).
-- **shadowColor**: color of the shadow (string)
-- **rangeKey**: if provided, will draw range bars (string). The range value should be of shape `{min: number, max: number}`. Not compatible with webgl.
-
-#### Series Data Formats
+### Props
+
+Like any other React component, Grapher is primarily configured via props. Refer to the [GrapherProps](#grapherprops) schema for complete type information.
+
+### Series Data Formats
+
 Grapher supports multiple data formats within a series:
 
 1. **Array of y-values**: Simple array where index is used as x-value
@@ -113,204 +66,168 @@ Grapher supports multiple data formats within a series:
 4. **Observable**: Object with an observe method, which may emit tuples or objects
 5. **Generator function**: Function that generates an array data points as a function of zoom
 
-### Event Handlers
-
-**onAxisChange**
-If passed in, this function will be called every time the axes change.
-It will be called with an array of objects, where each object is a single series object with the `axis`
-property set to {left, right}-{index}. This can be useful for saving state between reloads.
-
-**onRenderTime**
-If passed in, this function will be called every time the grapher renders.
-It will be called with diagnostic information about how long rendering took.
-
-**onPointDrag**
-Callback function that fires when draggable points are moved.
-
-**onDraggablePointsDoubleClick**
-Callback function that fires when draggable points are double-clicked.
-
-**timingFrameCount**
-Sets the number of frames for when the state controller's `averageLoopTime` method is called.
-
-### Appearance
-
-**theme**
-Sets the theme of grapher to either 'day', 'night', or 'export'.
-You can also override any CSS property directly in a stylesheet.
-
-**title**
-Sets the title text for the graph.
-
-**fullscreen**
-If true, displays the graph in fullscreen mode.
-
-**bodyHeight**
-Sets the height of the graph body (i.e., excluding range graph, series controls, etc.).
-
-**height**
-Sets the height of the entire graph.
-
-**width**
-Sets the width of the graph.
-
-### Display Options
-
-**showAxes**
-Whether to show the axes on the graph.
-
-**showRangeGraph**
-Whether to show the smaller range graph below the main graph.
-
-**showRangeSelectors**
-Whether to show the top bar with range selection (e.g., "last day" button) and other options.
-
-**showSeriesKey**
-Whether to show the key of which series have which colors.
-
-**showTooltips**
-Whether to display tooltips when hovering over data points.
-
-**showGrid**
-Whether to show grid lines on the graph.
-
-**showAxisColors**
-Whether to color-code axes based on the series they represent.
-
-**bigLabels**
-If true, uses larger text for labels.
-
-**xTickUnit**
-Specifies the unit for x-axis ticks. Currently supports 'year'.
-
-**xAxisIntegersOnly**
-If true, only displays integer values on the x-axis.
-
-**formatXAxisLabel**
-A custom function to format the x-axis labels. This function should take a single argument (the raw x-value) and return a string to display as the label.
-
-**clockStyle**
-Format for displaying time, either '12h' or '24h'.
-
-**timeZone**
-Time zone for date/time display. Can be 'local', 'utc', or a full timezone string.
-
-**markRangeGraphDates**
-Whether to mark significant dates on the range graph.
-
-**tooltipOptions**
-Configures tooltip appearance and behavior with properties including:
-- `includeSeriesLabel`: Whether to show series name in tooltip
-- `includeXLabel`: Whether to show x-axis label in tooltip
-- `includeYLabel`: Whether to show y-axis label in tooltip
-- `includeXValue`: Whether to show x-axis value in tooltip
-- `includeYValue`: Whether to show y-axis value in tooltip
-- `floating`: Whether tooltip floats or is fixed position
-- `alwaysFixedPosition`: Forces tooltip to always use fixed position
-- `floatPosition`: Placement of floating tooltip ('top' or 'bottom')
-- `floatDelta`: Pixel offset for floating tooltip positioning
-- `savingDisabled`: Prevents tooltip settings from being saved
-- `customTooltip`: A react component to use as a custom tooltip. See [examples/custom_tooltips_graph.js](examples/custom_tooltips_graph.js) for an example. If used in conjunction with `combineTooltips`, see [examples/combined_tooltips_graph.js](examples/combined_tooltips_graph.js) 
-- `combineTooltips`: If true, combines multiple tooltips into one when multiple series are shown. Can alternatively be set to a threshold in pixels for how close values need to be in order to be combined.
-
-**customBoundsSelectors**
-Array of custom range selector objects with properties:
-- `label`: Display text for the selector
-- `calculator`: Function that determines the bounds
-- `datesOnly`: If true, only works with date values
-
-**customBoundsSelectorsOnly**
-If true, only displays custom bounds selectors.
-
-**defaultBoundsCalculator**
-String identifier for the default bounds calculator to use.
-
-**defaultShowOptions**
-Default visibility of the options panel.
-
-**defaultShowIndividualPoints**
-Default setting for showing individual data points.
-
-**defaultShowSidebar**
-Default visibility of the sidebar.
-
-**defaultShowAnnotations**
-Default visibility of annotations.
-
-**defaultLineWidth**
-Default width of the lines in the graph.
-
-**boundsSelectionEnabled**
-Whether to enable the bounds selection feature.
-
-**sidebarEnabled**
-Whether to enable the sidebar.
-
-**percentile**
-Sets the percentile value for calculations.
-
-
-### Advanced Features
-
-**tooltipOptions**
-Configures tooltip appearance and behavior with properties including:
-- `includeSeriesLabel`: Whether to show series name in tooltip
-- `includeXLabel`: Whether to show x-axis label in tooltip
-- `includeYLabel`: Whether to show y-axis label in tooltip
-- `includeXValue`: Whether to show x-axis value in tooltip
-- `includeYValue`: Whether to show y-axis value in tooltip
-- `floating`: Whether tooltip floats or is fixed position
-- `alwaysFixedPosition`: Forces tooltip to always use fixed position
-- `floatPosition`: Placement of floating tooltip ('top' or 'bottom')
-- `floatDelta`: Pixel offset for floating tooltip positioning
-- `savingDisabled`: Prevents tooltip settings from being saved
-
-**customBoundsSelectors**
-Array of custom range selector objects with properties:
-- `label`: Display text for the selector
-- `calculator`: Function that determines the bounds
-- `datesOnly`: If true, only works with date values
-
-**customBoundsSelectorsOnly**
-If true, only displays custom bounds selectors.
-
-**defaultBoundsCalculator**
-String identifier for the default bounds calculator to use.
-
-**annotations**
-Array of annotation objects to display on the graph with properties:
-- `x`: Position on x-axis (string, number, or Date) where annotation should appear
-- `xEnd`: Optional end position for range annotations
-- `series`: Optional array of series names the annotation applies to
-- `content`: Text content of the annotation
-
-**draggablePoints**
-Array of interactive point objects with properties:
-- `x`: X-coordinate position
-- `y`: Y-coordinate position
-- `radius`: Optional size of the point
-- `fillColor`: Optional interior color
-- `strokeColor`: Optional outline color
-- `strokeWidth`: Optional outline width
-- `onClick`: Optional click handler function
-- `onDoubleClick`: Optional double-click handler function
-
-**verticalLines**
-Array of vertical line objects to display on the graph with properties:
-- `x`: X-coordinate position where the line should appear
-- `color`: Optional line color
-- `width`: Optional line width
-- `markTop`: Whether to add a marker at the top of the line
-- `style`: Optional styling object for the line
-- `markerStyle`: Optional styling object for the marker
-- `lineTop`: Optional value to specify the top position of the line
-- `text`: Optional text to display alongside the line
-- `textTop`: Optional value to specify the vertical position of the text
-- `textStyle`: Optional styling object for the text
-- `minPixelX`: Optional number. If the x position of the line in pixels is less than this value, the line will be hidden
-- `maxPixelX`: Optional number. If the x position of the line in pixels is greater than this value, the line will be hidden
-- `onRangeGraph`: If true, will show the line on the range graph as well. This may also be an object with any of the above options to adjust the styling
-- `onRangeGraphOnly`: If true, the vertical line will only appear on the range graph and not the primary graph
+### <a id="grapherprops"></a>Schema `GrapherProps`
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| **series** | [SeriesData](#seriesdata)`[]` | **✓** | The data for the graph and is the only property that is truly required. See "Series Data Formats" section for more details. |
+| id | `string` | ✗ | Unique identifier for the grapher instance. |
+| webgl | `boolean` | ✗ | If true, will render with WebGL rather than a 2D context. This is more performant, but uses more resources. |
+| requireWASM | `boolean` | ✗ | If true, will wait until the WASM extensions are ready before it renders. This can be useful when your app has expensive initialization. |
+| checkIntersection | `boolean` | ✗ | Controls intersection observer usage for performance optimization. |
+| onAxisChange | `(axes: any) => void` | ✗ | Called every time the axes change. Receives an array of objects with the `axis` property set to {left, right}-{index}. Useful for saving state between reloads. |
+| onRenderTime | `(time: number) => void` | ✗ | Called every time the grapher renders with diagnostic information about how long rendering took. |
+| exportStateController | `(controller: any) => void` | ✗ | Callback that receives the state controller instance for external manipulation. |
+| onPointDrag | `(point: any) => void` | ✗ | Callback function that fires when draggable points are moved. |
+| onDraggablePointsDoubleClick | `(point: any) => void` | ✗ | Callback function that fires when draggable points are double-clicked. |
+| onPointClick | `(point: any) => void` | ✗ | Click handler for data points. |
+| timingFrameCount | `number` | ✗ | Sets the number of frames for when the state controller's `averageLoopTime` method is called. |
+| stateControllerInitialization | `object` | ✗ | Options for initializing the internal state controller. |
+| syncPool | `SyncPool` | ✗ | For synchronizing with other grapher instances. |
+| dragPositionYOffset | `number` | ✗ | Y-offset for drag positioning, used in multigrapher. |
+| theme | `'day' \| 'night' \| 'export'` | ✗ | Sets the theme of grapher. You can also override any CSS property directly in a stylesheet. |
+| title | `string` | ✗ | Sets the title text for the graph. |
+| fullscreen | `boolean` | ✗ | If true, displays the graph in fullscreen mode. |
+| bodyHeight | `number` | ✗ | Sets the height of the graph body (i.e., excluding range graph, series controls, etc.). |
+| height | `number \| string` | ✗ | Sets the height of the entire graph. |
+| width | `number \| string` | ✗ | Sets the width of the graph. |
+| showAxes | `boolean` | ✗ | Whether to show the axes on the graph. |
+| showRangeGraph | `boolean` | ✗ | Whether to show the smaller range graph below the main graph. |
+| showRangeSelectors | `boolean` | ✗ | Whether to show the top bar with range selection (e.g., "last day" button) and other options. |
+| showSeriesKey | `boolean` | ✗ | Whether to show the key of which series have which colors. |
+| showTooltips | `boolean` | ✗ | Whether to display tooltips when hovering over data points. |
+| showGrid | `boolean` | ✗ | Whether to show grid lines on the graph. |
+| showAxisColors | `boolean` | ✗ | Whether to color-code axes based on the series they represent. |
+| bigLabels | `boolean` | ✗ | If true, uses larger text for labels. |
+| xTickUnit | `'year'` | ✗ | Specifies the unit for x-axis ticks. Currently supports 'year'. |
+| formatXAxisLabel | `(value: any) => string` | ✗ | A custom function to format the x-axis labels. This function should take a single argument (the raw x-value) and return a string to display as the label. |
+| xAxisIntegersOnly | `boolean` | ✗ | If true, only displays integer values on the x-axis. |
+| clockStyle | `'12h' \| '24h'` | ✗ | Format for displaying time, either '12h' or '24h'. |
+| timeZone | `string` | ✗ | Time zone for date/time display. Can be 'local', 'utc', or a full timezone string. |
+| markRangeGraphDates | `boolean` | ✗ | Whether to mark significant dates on the range graph. |
+| boundsSelectionEnabled | `boolean` | ✗ | Whether to enable the bounds selection feature. |
+| customBoundsSelectors | [CustomBoundsSelector](#customboundsselector)`[]` | ✗ | Array of custom range selector objects with label, calculator, and optional datesOnly properties. |
+| customBoundsSelectorsOnly | `boolean` | ✗ | If true, only displays custom bounds selectors. |
+| sidebarEnabled | `boolean` | ✗ | Whether to enable the sidebar. |
+| defaultBoundsCalculator | `string` | ✗ | String identifier for the default bounds calculator to use. |
+| percentile | `number` | ✗ | Sets the percentile value for calculations. |
+| defaultShowAnnotations | `boolean` | ✗ | Default visibility of annotations. |
+| defaultShowOptions | `boolean` | ✗ | Default visibility of the options panel. |
+| defaultShowIndividualPoints | `boolean` | ✗ | Default setting for showing individual data points. |
+| defaultShowSidebar | `boolean` | ✗ | Default visibility of the sidebar. |
+| defaultLineWidth | `number` | ✗ | Default width of the lines in the graph. |
+| tooltipOptions | [TooltipOptions](#tooltipoptions) | ✗ | Configures tooltip appearance and behavior with various options. |
+| annotations | [Annotation](#annotation)`[]` | ✗ | Array of annotation objects to display on the graph with position, content, and series targeting. |
+| draggablePoints | [DraggablePoint](#draggablepoint)`[]` | ✗ | Array of interactive point objects with position, styling, and event handlers. |
+| verticalLines | [VerticalLine](#verticalline)`[]` | ✗ | Array of vertical line objects to display on the graph with position, styling, and text options. |
+
+### <a id="seriesdata"></a>Schema `SeriesData`
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| **data** | `any[] \| Observable \| Function` | **✓** | The actual data points (see Data Formats section). |
+| type | `'values' \| 'tuples' \| 'objects' \| 'tuple_observable' \| 'object_observable' \| 'infer'` | ✗ | Data type or 'infer' to automatically detect. |
+| xKey | `string` | ✗ | Property name for x-values when using object data. |
+| yKey | `string` | ✗ | Property name for y-values when using object data. |
+| xUnixDates | `boolean` | ✗ | Whether x-values are Unix timestamps. |
+| color | `string \| number` | ✗ | Series color (string or number). |
+| name | `string` | ✗ | Series name for display in legend. |
+| xLabel | `string` | ✗ | Label for x-axis. |
+| yLabel | `string` | ✗ | Label for y-axis. |
+| rendering | `'line' \| 'bar' \| 'area' \| 'shadow'` | ✗ | Visual representation (defaults to 'line'). The 'shadow' option creates an area chart with individual point-based trapezoid gradients extending downward. |
+| ignoreDiscontinuities | `boolean` | ✗ | Whether to connect points across gaps. |
+| dashed | `boolean` | ✗ | Whether to use dashed lines. |
+| dashPattern | `number[]` | ✗ | Array defining dash pattern. |
+| width | `number` | ✗ | Line width. |
+| axis | `string \| object` | ✗ | Axis specification for the series. |
+| rangeSelectorWidth | `number` | ✗ | Width of the range selector for this series. |
+| expandYWith | `number[]` | ✗ | Values to include when calculating y-axis range. |
+| defaultAlwaysTooltipped | `boolean` | ✗ | Whether to always show tooltip for this series. |
+| square | `boolean` | ✗ | Whether to render the series with square points. |
+| shiftXBy | `number` | ✗ | Value to shift x-coordinates by. |
+| graph | `number` | ✗ | Affects which graph this series belongs to in multigrapher. |
+| background | `object` | ✗ | Background configuration. |
+| hideFromKey | `boolean` | ✗ | Whether to hide this series from the legend. |
+| showIndividualPoints | `boolean` | ✗ | Whether to show individual data points. |
+| negativeColor | `string` | ✗ | Color for negative values. |
+| gradient | `string[] \| [number, string][]` | ✗ | Gradient configuration, only applies to area rendering. |
+| zeroLineWidth | `number` | ✗ | Width of the zero line, only applies to bar and area rendering. |
+| zeroLineColor | `string` | ✗ | Color of the zero line, only applies to bar and area rendering. |
+| zeroLineY | `number \| 'bottom'` | ✗ | Y-coordinate of the zero line, only applies to bar and area rendering. Defaults to zero; may also be the string "bottom". |
+| pointRadius | `number` | ✗ | Radius of points, only applies to area rendering. |
+| tooltipWidth | `number` | ✗ | Expected width of the tooltip. Will make the tooltip switch sides when this width plus the tooltip left position is greater than the graph width. |
+| hasAreaBottom | `boolean` | ✗ | Read the bottom of the area from data. By default, the bottom of an area will just be zero; this allows changing that via passing in `[[x1, bottom], [x1, top], [x2, bottom], [x2, top]]` to data. |
+| shadowColor | `string` | ✗ | Color of the shadow. |
+| rangeKey | `string` | ✗ | If provided, will draw range bars. The range value should be of shape `{min: number, max: number}`. Not compatible with webgl. |
+| cutoffTime | `number \| Date \| 'now'` | ✗ | Creates visual cutoff effects in line, area, bar, and shadow renderings. Can be a timestamp, Date object, or 'now' for current time. |
+
+### <a id="tooltipoptions"></a>Schema `TooltipOptions`
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| includeSeriesLabel | `boolean` | ✗ | Whether to show series name in tooltip. |
+| includeXLabel | `boolean` | ✗ | Whether to show x-axis label in tooltip. |
+| includeYLabel | `boolean` | ✗ | Whether to show y-axis label in tooltip. |
+| includeXValue | `boolean` | ✗ | Whether to show x-axis value in tooltip. |
+| includeYValue | `boolean` | ✗ | Whether to show y-axis value in tooltip. |
+| floating | `boolean` | ✗ | Whether tooltip floats or is fixed position. |
+| alwaysFixedPosition | `boolean` | ✗ | Forces tooltip to always use fixed position. |
+| floatPosition | `'top' \| 'bottom'` | ✗ | Placement of floating tooltip. |
+| floatDelta | `number` | ✗ | Pixel offset for floating tooltip positioning. |
+| savingDisabled | `boolean` | ✗ | Prevents tooltip settings from being saved. |
+| customTooltip | `React.ComponentType<any>` | ✗ | A react component to use as a custom tooltip. If used in conjunction with `combineTooltips`, see combined tooltips examples. |
+| combineTooltips | `boolean \| number` | ✗ | If true, combines multiple tooltips into one when multiple series are shown. Can alternatively be set to a threshold in pixels for how close values need to be in order to be combined. |
+
+### <a id="customboundsselector"></a>Schema `CustomBoundsSelector`
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| **label** | `string` | **✓** | Display text for the selector. |
+| **calculator** | `(globalBounds?: any) => any` | **✓** | Function that determines the bounds. |
+| datesOnly | `boolean` | ✗ | If true, only works with date values. |
+
+### <a id="annotation"></a>Schema `Annotation`
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| x | `string \| number \| Date` | ✗ | Position on x-axis where annotation should appear. |
+| startX | `string \| number \| Date` | ✗ | Start position for range annotations. |
+| endX | `string \| number \| Date` | ✗ | End position for range annotations. |
+| series | `string[]` | ✗ | Optional array of series names the annotation applies to. |
+| content | `string` | ✗ | Text content of the annotation. |
+| lineOnly | `boolean` | ✗ | Shows only the line portion of annotations without background/content areas. |
+
+### <a id="draggablepoint"></a>Schema `DraggablePoint`
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| **x** | `number` | **✓** | X-coordinate position. |
+| **y** | `number` | **✓** | Y-coordinate position. |
+| radius | `number` | ✗ | Optional size of the point. |
+| fillColor | `string` | ✗ | Optional interior color. |
+| strokeColor | `string` | ✗ | Optional outline color. |
+| strokeWidth | `number` | ✗ | Optional outline width. |
+| onClick | `(point: `[DraggablePoint](#draggablepoint)`) => void` | ✗ | Optional click handler function. |
+| onDoubleClick | `(point: `[DraggablePoint](#draggablepoint)`) => void` | ✗ | Optional double-click handler function. |
+
+### <a id="verticalline"></a>Schema `VerticalLine`
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| **x** | `number` | **✓** | X-coordinate position where the line should appear. |
+| color | `string` | ✗ | Optional line color. |
+| lineTop | `number` | ✗ | Optional value to specify the top position of the line. |
+| width | `number` | ✗ | Optional line width. |
+| markTop | `boolean` | ✗ | Whether to add a marker at the top of the line. |
+| style | `object` | ✗ | Optional styling object for the line. |
+| markerStyle | `object` | ✗ | Optional styling object for the marker. |
+| text | `string` | ✗ | Optional text to display alongside the line. |
+| textTop | `number` | ✗ | Optional value to specify the vertical position of the text. |
+| textStyle | `object` | ✗ | Optional styling object for the text. |
+| minPixelX | `number` | ✗ | If the x position of the line in pixels is less than this value, the line will be hidden. |
+| maxPixelX | `number` | ✗ | If the x position of the line in pixels is greater than this value, the line will be hidden. |
+| onRangeGraph | `boolean \| object` | ✗ | If true, will show the line on the range graph as well. This may also be an object with any of the above options to adjust the styling. |
+| onRangeGraphOnly | `boolean` | ✗ | If true, the vertical line will only appear on the range graph and not the primary graph. |
 
 ## Developing
 Other than an `npm install`, you'll need to install rust and [wasm-pack](https://rustwasm.github.io/wasm-pack/installer/).