chart

Creates a ChartBuilder. This is the entry point for every GoFish chart.

gf.Chart(seafood)
  .flow(gf.spread("lake", { dir: "x" }))
  .mark(gf.rect({ h: "count" }))
  .render(root, { w: 400, h: 250, axes: true });

Signature

chart(data, options?)

Parameters

Parameter	Type	Description
data	T	The dataset to visualize
options.w	number	Width hint for the chart frame
options.h	number	Height hint for the chart frame
options.coord	CoordinateTransform	Coordinate transform (e.g. polar())
options.color	ColorConfig	Color scale applied to all marks in this chart. Use palette() for categorical data or gradient() for continuous data.

Returns a ChartBuilder<T> with .flow(), .mark(), .render(), and .zOrder() methods.

Example

chart(data)
  .flow(spread("category", { dir: "x" }))
  .mark(rect({ h: "value" }))
  .render(container, { w: 500, h: 300, axes: true });

.zOrder()

Controls the rendering order of this chart when it is a child of a layer. Lower values are drawn first (underneath); higher values are drawn on top.

chartBuilder.zOrder(value: number): ChartBuilder

Children with the same z-order keep their original array order. The default z-order is 0.

Layer([
  chart(data)
    .flow(scatter("x", { y: "y" }))
    .mark(line())
    .zOrder(0),
  chart(data)
    .flow(scatter("x", { y: "y" }))
    .mark(circle({ r: 5 }))
    .zOrder(1),
]);
// circles are always drawn on top of the line, regardless of array position