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
`EditorSurface`	The chart’s editor layer, mounted over the frame in `mode="editable"`
`Legend`	The series legend
`Headline`	Headline numbers
`AxisTicks`	An axis’s tick labels
`AxisLabel`	An axis’s title

EditorSurface defaults to a no-op, so a read-only embed bundles no editing code; @graphysdk/react-renderer/editable is what fills it. A chart that only paints leaves it alone.

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.

Three kinds of slot

How a region earns its space decides what you hand the slot. The type reflects it: layout-safe slots (the first two kinds) are bare components, layout-coupled slots are a SlotOverride object. These paint inside a box the layout already sized, or float free of it. Provide a component and nothing else:

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

function MyTooltip({ content }: TooltipSlotProps) {
  return (
    <div className="my-tooltip">
      {content.header ? <strong>{content.header}</strong> : null}
      {content.rows.map((row) => (
        <p key={row.key}>
          {row.label}: {row.value}
        </p>
      ))}
    </div>
  );
}

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

The tooltip’s positioning stays built in — you own the body, not the anchor.

DOM-measured — `Header`, `Footer`

These reserve their own space, and the layout measures the rendered DOM to find out how much. Both prop types carry a ref: forward it to your outer element, or the region reserves zero height and the plot paints over it.

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

function MyHeader({ ref, title, isTitleVisible }: HeaderSlotProps) {
  return (
    <div ref={ref} className="my-header">
      {isTitleVisible && typeof title === 'string' ? <h2>{title}</h2> : null}
    </div>
  );
}

Layout-coupled — `Legend`, `Headline`, `AxisTicks`, `AxisLabel`

These reserve an edge band the layout sizes up front, so they’re a SlotOverride: a render component and a measure that reports the region’s size. Paint and reserved space must agree, so the layout asks measure how much room to leave:

<GraphRenderer
  slots={{
    AxisLabel: {
      render: MyAxisLabel,
      measure: (axis, ctx) =>
        axis.label === null
          ? 0
          : ctx.measureText(axis.label, {
              family: 'Inter',
              size: 12 * ctx.textScale,
            }).height + 8,
    },
  }}
/>

Legend, AxisTicks and AxisLabel take a (region, ctx) => number — the band’s thickness in pixels, a height on the top and bottom edges and a width on the left and right. Headline takes a HeadlineMeasurer instead: an object with measureHeadline(headline, size) returning a { width, height } box and measureHeadlineItemWidths(headline, size) returning each strip item’s width.

import type { HeadlineMeasurer } from '@graphysdk/viz-engine';

const headlineMeasure: HeadlineMeasurer = {
  measureHeadline: () => ({ width: 240, height: 64 }),
  measureHeadlineItemWidths: (headline) => headline.items.map(() => 120),
};

<GraphRenderer
  slots={{ Headline: { render: MyHeadline, measure: headlineMeasure } }}
/>;

The second argument to the function-shaped measures is a SlotMeasureContext: measureText(text, { family, size }) — the same Canvas-backed measurer the built-in regions use, taking a final pixel size — and the active textScale to multiply an em size by. Sizing from those keeps your reserved band matched to what actually paints.

Give a layout-coupled slot’s measure a stable reference (define it outside render or memoize it). The layout reads overrides through a ref so an inline measure still takes effect on the next paint — but that paint doesn’t retrigger layout, so paint and reserved space drift apart.

Two of the measures are skipped where the band is empty: AxisTicks’s reserves 0 for an axis with no tick band, and Legend’s reserves 0 for an empty legend — your override isn’t consulted in those cases. AxisLabel’s has no such gate.

Slot props

Every props type is exported from @graphysdk/react-renderer, along with DefaultHeader, DefaultFooter, DefaultTooltip, DefaultGrid and DefaultSwatch to wrap or delegate to.

Slot	Props type	Members
`Header`	`HeaderSlotProps`	`ref?`, `headerRect`, `mode?`, `title`, `isTitleVisible`, `subtitle`, `isSubtitleVisible`, `brandMark`
`Footer`	`FooterSlotProps`	`ref?`, `footerRect`, `mode?`, `caption`, `isCaptionVisible`, `source`, `isSourceVisible`, `brandMark`
`Tooltip`	`TooltipSlotProps`	`content` — `{ header, rows, comment }`
`Grid`	`GridSlotProps`	`axes`, `panelBorderSizes`, `panelFrameRect`, `panelRect`
`Swatch`	`SwatchSlotProps`	`shape`, `color`, `surface`, `label?`, `lineType?`, `width?`, `height?`
`EditorSurface`	`EditorSurfaceSlotProps`	`frameElement`, `panelRect`
`Legend`	`LegendSlotProps`	`formattedLegends`, `rects`, `textScale`
`Headline`	`HeadlineSlotProps`	`headline`, `rect`, `resolvedSize`, `visibleItemCount`
`AxisTicks`	`AxisTicksSlotProps`	`formattedAxes`, `tickRects`
`AxisLabel`	`AxisLabelSlotProps`	`formattedAxes`, `labelRects`

The rects a slot receives are SVG-local for the in-panel regions (Grid, AxisTicks, AxisLabel) and layout rects for the rest.

A slot’s measure lands on the layout measurer under its own name: AxisTicks.measure becomes measureAxis, AxisLabel.measure becomes measureAxisLabel, and Headline.measure’s two methods keep theirs. That’s the SlotMeasureOverrides shape you’ll see in the layout types.

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

Three kinds of slot

Box-filling — `Tooltip`, `Grid`, `Swatch`, `EditorSurface`

DOM-measured — `Header`, `Footer`

Layout-coupled — `Legend`, `Headline`, `AxisTicks`, `AxisLabel`

Slot props

​Regions

​Three kinds of slot

​Box-filling — Tooltip, Grid, Swatch, EditorSurface

​DOM-measured — Header, Footer

​Layout-coupled — Legend, Headline, AxisTicks, AxisLabel

​Slot props

​Related

Regions

Three kinds of slot

Box-filling — `Tooltip`, `Grid`, `Swatch`, `EditorSurface`

DOM-measured — `Header`, `Footer`

Layout-coupled — `Legend`, `Headline`, `AxisTicks`, `AxisLabel`

Slot props

Related