Function Graph Element

A Function Graph element renders mathematical function curves with configurable axes, fill, and styling. The expression is evaluated in a sandboxed environment.

Function Graph elements share the common fields from Basic Element and View Element.

Function Graph Properties

Prop	Type	Required	Example	Value Range	Description
type	string	true	-	Function Graph	The type of the element. For Function Graph elements, this is always "Function Graph".
expression	string	true	Math.sin(x)	-	The mathematical expression to plot. Uses JavaScript Math syntax with x as the variable.
range	array	false	[-10, 10]	-	The x-axis range as a two-element array [min, max].
samples	number	false	-	> 0	The number of sample points used to plot the curve. Higher values produce smoother curves.
thickness	number	false	-	> 0	The line thickness of the function curve, in pixels.
color	string	false	-	-	The color of the function curve, in hex format.
backgroundColor	string	false	-	-	The background color of the graph area, in hex format.
backgroundOpacity	number	false	-	0 - 1	The opacity of the background.
threshold	number	false	-	-	Maximum y-value threshold for clipping. Points beyond this value are not rendered.
flipY	boolean	false	-	-	Whether to flip the Y-axis direction.
fillColor	string	false	-	-	The fill color under the curve, in hex format.
fillOpacity	number	false	-	0 - 1	The opacity of the area fill under the curve. Set to 0 to disable fill.

Axis Properties

Prop	Type	Required	Example	Value Range	Description
showAxis	boolean	false	-	-	Whether to display the coordinate axes.
axisColor	string	false	-	-	The color of the axis lines, in hex format.
axisOpacity	number	false	-	0 - 1	The opacity of the axis lines.
axisTickCount	number	false	-	-	The number of tick marks on each axis.
axisThickness	number	false	-	-	The thickness of the axis lines, in pixels.
showAxisArrow	boolean	false	-	-	Whether to show arrowheads at the ends of the axes.
axisArrowSize	number	false	-	-	The size of the axis arrowheads, in pixels.

Example

Sine Wave

functionGraphElement.json

 
{
  "id": "graph-001",
  "type": "Function Graph",
  "start": 0,
  "duration": 5,
  "trackIndex": 0,
  "x": 200,
  "y": 200,
  "width": 400,
  "height": 200,
  "anchorX": 200,
  "anchorY": 100,
  "rotation": 0,
  "scaleX": 1,
  "scaleY": 1,
  "alpha": 1,
  "expression": "Math.sin(x)",
  "range": [-10, 10],
  "samples": 200,
  "thickness": 2,
  "color": "#C55F73",
  "backgroundColor": "#000000",
  "backgroundOpacity": 1,
  "showAxis": true,
  "axisColor": "#ffffff",
  "axisTickCount": 10
}

Filled Quadratic Function

functionGraphFilled.json

 
{
  "id": "graph-002",
  "type": "Function Graph",
  "start": 0,
  "duration": 8,
  "trackIndex": 0,
  "x": 300,
  "y": 250,
  "width": 500,
  "height": 300,
  "anchorX": 250,
  "anchorY": 150,
  "rotation": 0,
  "scaleX": 1,
  "scaleY": 1,
  "alpha": 1,
  "expression": "x * x - 4",
  "range": [-5, 5],
  "samples": 300,
  "thickness": 3,
  "color": "#4A90E2",
  "fillColor": "#4A90E2",
  "fillOpacity": 0.3,
  "backgroundColor": "#1a1a2e",
  "backgroundOpacity": 0.9,
  "showAxis": true,
  "axisColor": "#cccccc",
  "axisThickness": 2,
  "showAxisArrow": true,
  "axisArrowSize": 10
}

Notes

The expression is evaluated in a sandboxed environment with access to the JavaScript Math object. Use Math.sin(x), Math.pow(x, 2), Math.exp(x), etc.
The variable x iterates over the specified range with the given number of samples.
Set fillOpacity greater than 0 to fill the area between the curve and the x-axis.
Use threshold to clip extreme y-values for functions with asymptotes (e.g., 1/x).

Overview

Element

Effect