FunctionPlotter
An interactive 2D function plotter with pan, zoom, and support for multiple equations. Enter expressions like x^2, sin(x), or e^x, then click a curve to select it and see its local minima/maxima plus its intersections with other curves marked as clickable points.
Installation
npx dafink-ui add function-plotterRequires: mathjs
Demo
Props
| Name | Type | Default | Description |
|---|---|---|---|
| initialEquations | string[] | ['2*x + 1', 'x^2'] | Equations to plot on mount. Parsed and evaluated by mathjs, not eval — supports +, -, *, /, ^, and functions like sin/cos/tan/sqrt/exp/log. |
| height | number | 400 | Canvas height in pixels. Width fills the container. |
| className | string | '' | Additional classes on the root wrapper. |
| readOnly | boolean | false | Hides the equation list/editor, leaving just the plot and zoom controls. |
| tooltip | boolean | true | Shows an (x, y) tooltip when hovering near a plotted curve. |
| layout | 'bottom' | 'side' | 'bottom' | 'side' places the equation list beside the canvas as a panel once there's room; ignored when readOnly. |
Accessibility
FunctionPlotter has no custom focus management beyond native tab order: the equation inputs, remove buttons, add button, and zoom controls are all individually-focusable native elements reachable with Tab and activated with Enter/Space. The plotted canvas itself is a static role="img" with aria-label="Function plot" — panning, wheel-zooming, selecting the active curve, and the hover tooltip are all pointer-only with no keyboard equivalent. The one exception is the extremum/intersection marker popup (role="dialog"): once opened by a pointer click, its close button is keyboard-reachable and pressing Escape closes it, same as clicking the close button.