Skip to content

Charts

Surfaces

A true 3D surface with no 3D engine: rotate, project orthographically, sort by depth and paint back to front, all inside the same ChartSurface shell as every other chart.

A surface you can turn

The pointer can drag it, the arrow keys rotate it (Shift with the arrows changes elevation), and both angles are fully controllable.

A projected gridded surface. Azimuth -34°, elevation 28°.

Azimuth

Elevation

<Surface3DChart z={grid} azimuth={azimuth} elevation={elevation} />

Wireframe and volatility

Two readings of one grid: the wireframe shows the shape, the surface shows the values.

Wireframe

Mesh lines only, which makes the topology easy to read.

A projected gridded surface. Azimuth -34°, elevation 28°.

Volatility surface

Implied volatilities arrive as a grid: interpolating a surface out of quotes is modelling, and a component library should not hide the model.

Each cell is an implied volatility the caller computed; the library interpolates nothing.

Why not echarts-gl

The dependency cost was measured.

echarts-gl is a substantial WebGL dependency that would add a second renderer and a GPU context to every consumer of `@luc/ui/charts`. A gridded surface is already a solved two-dimensional problem, so it is replaced here with about 120 lines of arithmetic: no renderer, no GPU context, deterministic output, and the same shell as every other chart (tooltip, export, reduced motion, aria). A missing cell is a hole in the surface, not a zero.

Luc UI v1.0Homedark theme