Slots

Slots replace how a single region of the chart renders while the spec still owns whether that region exists and what data it receives. Your override gets the same render-ready props the default would. Pass them through the slots prop.

<GraphRenderer slots={{ Header: MyHeader, Tooltip: MyTooltip }} />

Regions

Slot	Region
`Header`	Title / subtitle area above the plot
`Footer`	Caption, source, and provenance-mark area below the plot
`Tooltip`	The hover tooltip
`Grid`	The plot grid lines
`Swatch`	The color swatch used in legend and tooltip
`Legend`	The series legend
`Headline`	Headline numbers
`AxisTicks`	An axis’s tick labels
`AxisLabel`	An axis’s title

Custom Footer / Header slots receive a brandMark visual ('full' | 'mini' | 'hidden'), resolved from config.content.brandMark and the frame size. That prop is not the visibility toggle; the toggle is brandMark.enabled (or legacy isBrandMarkVisible). source remains your data-source attribution. The default badge paints inside the matching region when placement matches.

Two kinds of slot

The distinction matters when you write an override: Layout-safe slots (Header, Footer, Tooltip, Grid, Swatch) are bare components. They paint inside a box the layout already sized, so you just provide a component:

import type { TooltipSlotProps } from '@graphysdk/react-renderer';

function MyTooltip(props: TooltipSlotProps) {
  return <div className="my-tooltip">{/* render props.rows */}</div>;
}

<GraphRenderer slots={{ Tooltip: MyTooltip }} />;

Layout-coupled slots (Legend, Headline, AxisTicks, AxisLabel) reserve edge space, so they’re an object with both a render component and a measure function that reports the region’s size. Paint and reserved space must agree, so the layout calls measure to know how much room to leave:

<GraphRenderer
  slots={{
    AxisLabel: {
      render: MyAxisLabel,
      measure: (axis, ctx) => ctx.measureText(axis.label, font).height + 8,
    },
  }}
/>

Give a layout-coupled slot’s measure a stable reference (define it outside render or memoize it). A measure whose identity changes every render repaints but doesn’t re-trigger the layout, so paint and reserved space drift.

The measure receives a SlotMeasureContext with measureText (the same Canvas-backed measurer the built-in regions use) and the active textScale, so your reserved size matches what actually paints.

Geom renderers — replace a whole geom’s paint, not just a region
Interactivity — the Tooltip slot in context
Theming — restyle regions with tokens before reaching for a slot

Get Started

Core concepts

Chart types

Annotations & emphasis

Rendering

Configuration

Advanced

Extending

Regions

Two kinds of slot

​Regions

​Two kinds of slot

​Related

Regions

Two kinds of slot

Related