PlotScope

Appearance

Styling, export and integration

Styling and palette API ​

Three kinds of paint ​

Wherever a chart takes a colour it takes one of three things: nothing, a role, or a colour.

ts
export function fillPainted(plot: Plot): void {
  const x = plot.uploadBuffer(Float64Array.from({ length: 200 }, (_, i) => i / 10));
  const wave = (shift: number) =>
    plot.uploadBuffer(Float32Array.from({ length: 200 }, (_, i) => Math.sin(i / 16 + shift) + shift));
  plot.setCharts({
    charts: [
      {
        series: [
          // No colour: the palette's cycle, in document order.
          { x, y: wave(0), label: "from the palette" },
          // A role: whatever the palette in use calls its accent, lightened.
          { x, y: wave(1.5), label: "the accent role, lighter", colour: role("accent", { shade: 0.5 }) },
          // A colour of the page's own, as the hex code it was picked as.
          { x, y: wave(3), label: "a hex colour", colour: "#c8a24a" },
          // The same colour at a third of its strength.
          { x, y: wave(4.5), label: "the same, translucent", colour: withAlpha(fromHex("#c8a24a"), 0.35) },
        ],
      },
    ],
  });
}

Switch the palette above and watch which series move.

Nothing. The series takes the next colour in the palette's cycle, counted across the document. This is the right default: the cycle was chosen to be told apart on that palette's background.

A role. role("accent") is the palette's accent, whichever palette that is. A chart drawn in roles follows a page that switches between light and dark instead of staying the colour it was written in. A role takes an alpha, and a shade from -1 to 1 that darkens or lightens it, so one role serves a line, its fill and its faded state.

A colour. A hex string, or three numbers from 0 to 1, and it is drawn exactly so on either palette.

Hex, or the numbers a picker gives ​

A colour is sRGB: the values a colour picker, a design tool or a CSS hex code gives. Write it as it comes, and the plot does the rest.

ts
colour: "#c8a24a"                     // a hex code
colour: [200 / 255, 162 / 255, 74 / 255]  // the same colour as numbers
colour: "#c8a24a59"                   // with an alpha, as eight digits

fromHex("#c8a24a") gives the numbers, for a call that takes them, and withAlpha(colour, 0.35) makes them translucent. A scene item takes the hex string directly too: plot.showMesh(mesh, "#c8a24a").

Choosing a palette ​

A page chooses between the two built-in palettes. Colours a page wants everywhere are given to each series.