contributionGraphKeys
Why JS.
import { contributionGraphKeys } from "@sdxc/ui/app";View code
// ContributionGraph's tooltip carries contributionGraphKeys(), so the arrows walk the days.
<ContributionGraph
days={days}
start="2025-11-14"
end="2026-11-13"
locale="en-US"
href={(date) => `/sergiodxa?tab=overview&from=${date}&to=${date}`}
labels={{
caption: `${total.toLocaleString("en-US")} contributions in the last year`,
day: (count, date) => `${count === 0 ? "No" : count} contribution${count === 1 ? "" : "s"} on ${date}`,
less: "Less",
more: "More",
}}
/>Usage
Runs a contribution graph from the island inside it: the host is the graph's shared tooltip
(a manual popover), which shows the hovered or focused day's label anchored to that day, and
the arrows, Home and End walk the days with a roving Tab stop. Each day's title is removed
once this runs, so the browser's own tooltip never doubles the shared one.
Signature
contributionGraphKeys(anchor: string): MixinDescriptor<HTMLElement>Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
anchor | string | Yes | The CSS anchor name the tooltip positions against, unique to the graph. |
Examples
<div popover="manual" mix={[contributionGraphKeys("--ui-contribution-graph-r1")]} />