API Reference

The GoFish API for creating charts and visualizations.

By combining operators and marks, you can create complex and automatic chart layouts.

How To

• Create a chart Build charts using Chart, flow, mark, and render.
• Create a glyph Compose custom shapes with Layer.
• Pick a layout operator Choose between spread, stack, and scatter.
• Use selection Connect marks across charts for overlays and annotations.

Core

• chart Creates a ChartBuilder for building charts.
• flow Applies operators to the data pipeline.
• mark Sets the visual mark for rendering.
• render Renders the chart into a DOM element.

Marks

• rect Draws a rectangle for each data item.
• circle Draws a circle for each data item.
• ellipse Draws an ellipse for each data item.
• line Connects data points with a line.
• area Fills the area between data points.
• scaffold Creates invisible positioning guides.
• ref References another node by name.

Operators

• spread Lays out groups along an axis.
• stack Stacks items edge-to-edge.
• table Groups data by two fields and lays out groups in a 2D grid.
• scatter Positions groups by mean x/y.
• layer Overlays children without offset.
• derive Transforms data in the pipeline.
• log Logs data for debugging.

Selection

• select Selects named layer nodes.

Coordinates

• polar Polar coordinate transform.
• clock Clock-oriented polar coordinates.

Color Scales

• palette Categorical color scale — maps field values to colors by index or explicit lookup.
• gradient Continuous color scale — interpolates colors across a numeric range.

palette

palette(values);

Creates a categorical color scale. Pass it to chart(data, { color }) or .render(el, { color }).

values type	Behavior
string	Named scheme: "tableau10"
string[]	Colors cycled by index
Record<string, string>	Explicit field value → color map

// Named scheme
chart(data, { color: palette("tableau10") })
  .flow(spread("category", { dir: "x" }))
  .mark(rect({ h: "value", fill: "category" }))
  .render(container, { w: 500, h: 300 });

// Explicit array
chart(data, { color: palette(["#e15759", "#4e79a7", "#59a14f"]) });

// Key → color map
chart(data, { color: palette({ low: "#4e79a7", high: "#e15759" }) });

gradient

gradient(stops);

Creates a continuous color scale. Colors are interpolated across the numeric range of the fill field.

stops type	Behavior
string	Named scheme: "viridis", "blues", "reds"
string[]	Custom color stops interpolated in LAB space

// Named scheme
chart(data, { color: gradient("viridis") })
  .flow(spread("category", { dir: "x" }))
  .mark(rect({ h: "value", fill: "temperature" }))
  .render(container, { w: 500, h: 300 });

// Custom stops
chart(data, { color: gradient(["#f7fbff", "#08306b"]) });

Built-in gradient schemes: "viridis", "blues", "reds"