Axes & Function Plots

<Axes> creates a 2D coordinate system with labeled tick marks, and <FunctionPlot> draws a mathematical function curve on those axes. Together they form the foundation for any math visualization.

0.00s / 3.97s · F0

Axes Props

Prop	Type	Default	Description
`origin`	`[number, number]`	`[200, 200]`	Pixel position of the origin
`xRange`	`[number, number]`	`[-5, 5]`	Visible range on the x-axis
`yRange`	`[number, number]`	`[-5, 5]`	Visible range on the y-axis
`scale`	`number`	`40`	Pixels per unit
`color`	`string`	`'currentColor'`	Axis line color
`labelColor`	`string`	`'currentColor'`	Tick label color
`showGrid`	`boolean`	`false`	Show background grid lines
`gridColor`	`string`	`'#e2e8f0'`	Grid line color
`tickSize`	`number`	`6`	Length of tick marks in pixels

FunctionPlot Props

Prop	Type	Default	Description
`fn`	`(x: number) => number`	—	The function to plot
`domain`	`[number, number]`	`[-5, 5]`	x-domain to evaluate
`origin`	`[number, number]`	`[200, 200]`	Pixel position of the origin (must match Axes)
`scale`	`number`	`40`	Pixels per unit (must match Axes)
`color`	`string`	`'#4f46e5'`	Stroke color of the curve
`strokeWidth`	`number`	`2`	Stroke width
`samples`	`number`	`200`	Number of evaluation points

Code Example

elements: {
  axes: {
    id: 'axes',
    type: 'axes',
    props: { type: 'axes', origin: [250, 200], xRange: [-4, 4], yRange: [-2, 3], scale: 50, color: '$foreground', labelColor: '$foreground', showGrid: true },
  },
  sine: {
    id: 'sine',
    type: 'functionPlot',
    props: { type: 'functionPlot', expression: 'sin(x)', domain: [-4, 4], origin: [250, 200], scale: 50, color: '$accent', strokeWidth: 2.5, opacity: 0 },
  },
}