SurfaceChart

Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.

A 3D surface chart that renders z=f(x,y) as an isometric projection. The surface is drawn as filled quadrilateral faces with grayscale shading based on height.

The surface keeps its proportions: it fills as much of its box as it can, and in a widget's stored preview laid out at another size it scales evenly, labels included, to fit.

Import

import { SurfaceChart } from "~lib/charts/surface-chart";

Props

Name	Type	Required	Default	Description
`data`	`number[][]`	Yes	N/A	2D grid of z-values (data[row][col])
`width`	`number \| string`	No	`400`	Container width
`height`	`number \| string`	No	`400`	Container height
`wireframe`	`boolean`	No	`true`	Show wireframe grid lines
`showValues`	`boolean`	No	`false`	Show z-values on faces
`azimuth`	`number`	No	`45`	Horizontal rotation in degrees
`elevation`	`number`	No	`30`	Vertical tilt in degrees
`axis`	`object`	No	N/A	Axis configuration (see below)

Axis Configuration

axis accepts x, y, and z sub-objects. The x and y axes support:

Name	Type	Description
`visible`	`boolean`	Show axis line and auto-generated ticks
`name`	`string`	Label displayed along the axis
`min`	`number`	Minimum tick value (default: 0)
`max`	`number`	Maximum tick value (default: grid size)
`grid`	`boolean`	Show dashed grid lines on the base plane

The z axis supports visible, name, and grid. Tick values are auto-generated from the data range.

Data format: data[row][col] represents the z-value (height) at that grid position. Requires at least a 2x2 grid; rows of different lengths are cut to the shortest.

Examples

Import​

Props​

Axis Configuration​

Examples​

Default​

Gaussian Peak​

Saddle Point​

With Axes​

With Axes and Labels​

With Grid Lines​

Large Grid​

See Also​

Import

Props

Axis Configuration

Examples

Default

Gaussian Peak

Saddle Point

With Axes

With Axes and Labels

With Grid Lines

Large Grid

See Also