Quick Tooltips

Interactions

Plot provides interactive features for data exploration through pointing, tooltips, and the pointer transform.

Quick Tooltips

The simplest way to add interactivity:

Plot.dot(data, {x: "x", y: "y", tip: true}).plot()

Tip Mark

For more control over tooltips:

Plot.plot({
  marks: [
    Plot.line(data, {x: "date", y: "value"}),
    Plot.tip(data, Plot.pointer({x: "date", y: "value"}))
  ]
})

Pointer Transform

Filters to show only the nearest data point:

// Two-dimensional (scatter plots)
Plot.pointer(options)

// X-dominant (time series)
Plot.pointerX(options)

// Y-dominant
Plot.pointerY(options)

Example

Plot.plot({
  marks: [
    Plot.line(data, {x: "date", y: "value"}),
    Plot.dot(data, Plot.pointerX({x: "date", y: "value", fill: "red"}))
  ]
})

Crosshair Mark

Displays x and y values along axes:

Plot.plot({
  marks: [
    Plot.line(data, {x: "date", y: "value"}),
    Plot.crosshair(data, {x: "date", y: "value"})
  ]
})

Variants

Plot.crosshair(data, options)   // Both axes
Plot.crosshairX(data, options)  // X-axis focused
Plot.crosshairY(data, options)  // Y-axis focused

Pointer Options

Click to Stick

Clicking on a point locks the tooltip until clicked again, allowing text selection.

Input Events

Pointer transforms emit input events:

const plot = Plot.dot(data, Plot.pointer({x: "x", y: "y"})).plot();

plot.addEventListener("input", () => {
  console.log(plot.value);  // Currently focused datum
});

Custom Reactivity

Update plots by replacing them:

function updatePlot(filteredData) {
  const newPlot = Plot.plot({
    marks: [Plot.dot(filteredData, {x: "x", y: "y"})]
  });
  oldPlot.replaceWith(newPlot);
}

React Integration

function Chart({ data }) {
  const ref = useRef();

  useEffect(() => {
    const plot = Plot.plot({
      marks: [Plot.dot(data, {x: "x", y: "y", tip: true})]
    });
    ref.current.replaceChildren(plot);
    return () => plot.remove();
  }, [data]);

  return <div ref={ref} />;
}

Future Features

Under development (see GitHub issues):

• Selection: Direct manipulation point selection (#5)
• Zooming: Pan and zoom (#1590)
• Animation: Declarative animation (#166)

Notes

• Use tip: true for quick tooltips
• Use Plot.pointer with custom marks for more control
• pointerX is best for time series
• pointerY is best for horizontal charts
• Pointer transform still contributes to scale domains