Skip to content

Interface: PlotOptions

Defined in: plot.ts:209

Properties

ariaLabel?

ts
optional ariaLabel?: string;

Defined in: plot.ts:236

Accessible label for the chart (sets role="img" + aria-label). Auto-summarized if omitted.


axes?

ts
optional axes?: {
  x?: AxisConfig;
  y?: AxisConfig;
};

Defined in: plot.ts:211

x?

ts
optional x?: AxisConfig;

y?

ts
optional y?: AxisConfig;

background?

ts
optional background?: string;

Defined in: plot.ts:214

Fill color for the plot region (inside the margins). Default transparent.


border?

ts
optional border?: string;

Defined in: plot.ts:216

Fill color for the whole canvas incl. margins. Default transparent.


boundedPan?

ts
optional boundedPan?: boolean;

Defined in: plot.ts:281

Constrain panning/zooming so the view can't move outside the data bounds (the union of all layers' extents). Zoom still works; the view is just kept inside the limits. Default false (a map turns it on).


colorbar?

ts
optional colorbar?: boolean | ColorbarOptions;

Defined in: plot.ts:227

Show a colorbar for every layer that maps values to colours (heatmap, hexbin, contour, choropleth patches, colorBy scatter/quiver). Enabled by default — a colour scale nobody can read is not a scale. Pass false to suppress it, or an object to place/style it.


crosshair?

ts
optional crosshair?: boolean;

Defined in: plot.ts:270

Show dashed guide lines on both the X and Y axes at the cursor — on hover and while the pointer is pressed. When false, hover shows only the vertical (X) line and there are no press guides. Default true.


drawingTools?

ts
optional drawingTools?: boolean;

Defined in: plot.ts:234

Add drawing tools (trendline / horizontal / ray / Fibonacci / rectangle) to the toolbar. Default false.


equalAspect?

ts
optional equalAspect?: boolean;

Defined in: plot.ts:275

Keep data-units-per-pixel equal on both axes so nothing is distorted (the looser axis is expanded to match). Essential for maps. Default false.


hover?

ts
optional hover?: boolean;

Defined in: plot.ts:252

Enable hover crosshair + tooltip. Default true.


hoverReadout?

ts
optional hoverReadout?: (dataX, dataY) => HoverReadoutRow[];

Defined in: plot.ts:288

Customize the tooltip header shown on hover. Given the cursor's data-space X and Y (primary y axis), return the lines to display above the series rows — e.g. a map converts world coords to lon/lat. When omitted, the header is the default single x = … line. Default undefined.

Parameters

ParameterType
dataXnumber
dataYnumber

Returns

HoverReadoutRow[]


interactive?

ts
optional interactive?: boolean;

Defined in: plot.ts:230

Enable wheel-zoom and drag interaction. Default true.


legend?

ts
optional legend?: boolean | LegendOptions;

Defined in: plot.ts:220

Show a legend of named series. true uses defaults; pass an object to place/style it.


margin?

ts
optional margin?: Partial<{
  bottom: number;
  left: number;
  right: number;
  top: number;
}>;

Defined in: plot.ts:228


mode?

ts
optional mode?: InteractionMode;

Defined in: plot.ts:250

Initial interaction mode. Default "pan".


offscreenCulling?

ts
optional offscreenCulling?: boolean;

Defined in: plot.ts:248

Skip drawing while the chart is scrolled out of view, and draw once as it comes back. Default false — a chart draws whenever it is asked to.

Turn it on for a page that holds many charts. A frame costs the same whether or not anyone can see it, and most charts on a long page are off-screen at any moment. The saving is largest in Firefox, where reading the shared WebGL canvas back into a chart's own canvas costs ~1ms per chart per frame: on a 52-chart page that is 15fps against 58. Photon can only skip its own drawing, so ask Plot.isOnScreen before regenerating the data too.


pick?

ts
optional pick?: PickMode;

Defined in: plot.ts:258

How hover selects the highlighted point: "x" nearest by x (classic), "y" nearest by y, or "xy" nearest by 2D distance — the last checks both axes, which is what a scatter/map needs. Default "x".


pointInfo?

ts
optional pointInfo?: "click" | "hover";

Defined in: plot.ts:264

When a point's pinned detail box appears: "click" pins it on click (until you click empty space), "hover" shows it while the cursor is over a point. Default "click".


scales?

ts
optional scales?: {
  x?: AxisScaleOptions;
  y?: AxisScaleOptions;
};

Defined in: plot.ts:210

x?

ts
optional x?: AxisScaleOptions;

y?

ts
optional y?: AxisScaleOptions;

showToolbar?

ts
optional showToolbar?: boolean;

Defined in: plot.ts:232

Show the built-in toolbar (home + pan/box/X/Y zoom modes). Default true.


theme?

ts
optional theme?: Theme | "light" | "dark";

Defined in: plot.ts:212


title?

ts
optional title?: string | PlotTitleOptions;

Defined in: plot.ts:218

Plot title, drawn in a reserved strip above the plot.

MIT licensed. WebGL2 required.