Triangle Mesh Charts in Python
A triangle mesh (also called a triangle mesh chart or triangle mesh plot)
renders a surface from explicit triangles, each defined by its three vertices. With xy you build a triangle mesh in Python when you
already have irregular geometry or precomputed topology — the low-level choice
where a grid-based surface won't fit. You give each triangle its vertices and an
optional color value, and the mesh stays interactive with pan, zoom, and hover.
Jump to creating a triangle mesh, when to use one, or the options.
Create a Triangle Mesh
Give triangle_mesh the three vertices of each triangle — (x0, y0),
(x1, y1), (x2, y2) — plus a per-triangle color value mapped through
the colormap:
Color a Computed Mesh by Value
Meshes are usually generated, not hand-written — here a small grid is
triangulated in a loop and each triangle's color is a function value at its
centroid, mapped through colormap over an explicit domain with no stroke:
Layer Constant-Color and Value-Colored Meshes
color also accepts a single CSS color for a constant fill, and one chart can
layer several meshes — this fan pairs a value-colored inner ring with a
constant-fill outer ring whose edges are drawn via stroke and stroke_width:
When to Use a Triangle Mesh
triangle_mesh takes explicit x0/y0, x1/y1, x2/y2 vertices per
triangle — the low-level choice when you already have irregular surfaces or
precomputed topology and want full control over the geometry. When your surface
comes from values on a regular grid, a heatmap or
contour plot is usually the simpler fit.
Triangle Mesh Options
Pass column names with data= instead of arrays when your vertices live in a
table.
Related Charts
- Contour plots — level curves from values on a grid.
- Heatmaps — color a regular grid of values by magnitude.
API Reference
xy.triangle_mesh_chart
A filled triangular mesh chart.
Props
| Prop | Type | Description |
|---|---|---|
*children | Component | Marks, axes, annotations, and chart chrome. |
title | Optional[str] | Title shown above the plot. |
width | int | str | Chart width in pixels or a CSS size such as ``"100%"``. |
height | int | str | Chart height in pixels or a CSS size such as ``"100%"``. |
padding | Union[float, Sequence[float], None] | Plot margins, as one value or a sequence of side values. Use zero for an edge-to-edge sparkline. |
data | TableLike | Chart-level data used by marks that omit their own ``data``. |
class_name | Optional[str] | CSS class applied to the chart container. |
class_names | Optional[dict[str, str]] | CSS classes keyed by stable chart DOM slot. |
style | Optional[dict[str, StyleValue]] | Inline style overrides for the chart container. |
styles | Optional[dict[str, dict[str, StyleValue]]] | Inline style mappings keyed by stable chart DOM slot. |
on_hover | Optional[Callable[[dict], None]] | Callback receiving hover event payloads. |
on_click | Optional[Callable[[dict], None]] | Callback receiving picked-mark click payloads. |
on_brush | Optional[Callable[[dict], None]] | Callback receiving brush event payloads. |
on_select | Optional[Callable[[Selection], None]] | Callback receiving data-space selections. |
on_view_change | Optional[Callable[[dict], None]] | Callback receiving viewport change payloads. |
hover | Optional[bool] | Whether pointer movement emits hover events. |
click | Optional[bool] | Whether picked marks emit click events. |
select | Optional[bool] | Whether shift-drag box selection is enabled. |
brush | Optional[bool] | Whether brush selection is enabled. |
crosshair | Optional[bool] | Whether plot-aligned hover guides are shown. |
navigation | Optional[bool] | Whether browser pan and zoom navigation is enabled. |
pan | Optional[bool] | Whether plain-drag panning is enabled. |
pan_axes | Optional[tuple[str, ...]] | Declared axis IDs translated by pan gestures. |
zoom | Optional[bool] | Whether viewport zoom is enabled. |
default_drag_action | Optional[DefaultDragAction] | Initial action performed by a plain plot drag. |
zoom_axes | Optional[tuple[str, ...]] | Declared axis IDs changed by zoom gestures and controls. |
zoom_limits | Optional[ZoomLimits] | Minimum and maximum magnification globally or by axis. |
wheel_zoom | Optional[bool] | Whether wheel and trackpad zoom is available. |
box_zoom | Optional[bool] | Whether box zoom is available as a drag action. |
zoom_buttons | Optional[bool] | Whether modebar Zoom In/Out commands are available. |
double_click_reset | Optional[bool] | Whether double-click restores ``reset_axes``. |
reset_axes | Optional[tuple[str, ...]] | Declared axis IDs restored by reset. |
link_group | Optional[str] | Identifier used to synchronize charts in the browser. |
link_axes | Optional[tuple[str, ...]] | Axes synchronized within the link group. |
FAQ
How do I make a triangle mesh in Python?
Call xy.triangle_mesh(...) with the three vertices of each triangle inside
xy.triangle_mesh_chart(...) and render it. Pan, zoom, and hover work on the
triangle mesh graph automatically.
How do I color triangles by value?
Pass a per-triangle list to color, set a colormap, and give a domain for
the value range. Each triangle's value is mapped through the colormap; pass a
single CSS color instead for a constant fill.
When should I use a triangle mesh instead of a heatmap?
Use a triangle mesh for irregular surfaces or precomputed topology where you control each triangle's vertices. Use a heatmap or contour plot when your values sit on a regular grid.
How do I draw the edges of each triangle?
Set stroke for the edge color and stroke_width for its thickness, as the
demo does with a purple outline.