FunctionPlotter

An interactive 2D function plotter with pan, zoom, and support for multiple equations. Enter expressions like x^2 or 2*x+1 and see them graphed in real time.

Installation

npx @obi/ui add function-plotter

Preview

Usage

import { FunctionPlotter } from '@/src/components/FunctionPlotter/FunctionPlotter';

export default function Example() {
  return (
    <FunctionPlotter
      initialEquations={['x^2', '2*x + 1', 'Math.sin(x) * 5']}
    />
  );
}

Props

Name	Type	Default	Description
initialEquations	string[]	['2*x + 1', 'x^2']	Equations to plot on mount. Supports +, -, , /, ^, and Math. functions.
height	number	400	Canvas height in pixels. Width fills the container.
className	string	''	Additional classes on the root wrapper.