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.
| 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. |
| 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. |
1
2{
3 "id": "graph-001",
4 "type": "Function Graph",
5 "start": 0,
6 "duration": 5,
7 "trackIndex": 0,
8 "x": 200,
9 "y": 200,
10 "width": 400,
11 "height": 200,
12 "anchorX": 200,
13 "anchorY": 100,
14 "rotation": 0,
15 "scaleX": 1,
16 "scaleY": 1,
17 "alpha": 1,
18 "expression": "Math.sin(x)",
19 "range": [-10, 10],
20 "samples": 200,
21 "thickness": 2,
22 "color": "#C55F73",
23 "backgroundColor": "#000000",
24 "backgroundOpacity": 1,
25 "showAxis": true,
26 "axisColor": "#ffffff",
27 "axisTickCount": 10
28}
291
2{
3 "id": "graph-002",
4 "type": "Function Graph",
5 "start": 0,
6 "duration": 8,
7 "trackIndex": 0,
8 "x": 300,
9 "y": 250,
10 "width": 500,
11 "height": 300,
12 "anchorX": 250,
13 "anchorY": 150,
14 "rotation": 0,
15 "scaleX": 1,
16 "scaleY": 1,
17 "alpha": 1,
18 "expression": "x * x - 4",
19 "range": [-5, 5],
20 "samples": 300,
21 "thickness": 3,
22 "color": "#4A90E2",
23 "fillColor": "#4A90E2",
24 "fillOpacity": 0.3,
25 "backgroundColor": "#1a1a2e",
26 "backgroundOpacity": 0.9,
27 "showAxis": true,
28 "axisColor": "#cccccc",
29 "axisThickness": 2,
30 "showAxisArrow": true,
31 "axisArrowSize": 10
32}
33expression 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.x iterates over the specified range with the given number of samples.fillOpacity greater than 0 to fill the area between the curve and the x-axis.threshold to clip extreme y-values for functions with asymptotes (e.g., 1/x).