[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-tanstack-build-chart-interactions":3,"mdc-dsdq7y-key":48,"related-org-tanstack-build-chart-interactions":3053,"related-repo-tanstack-build-chart-interactions":3195},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":23,"repoUrl":24,"updatedAt":25,"license":26,"forks":27,"topics":28,"repo":43,"sourceUrl":46,"mdContent":47},"build-chart-interactions","build chart interactions with TanStack Charts","Compose TanStack Charts focus, tooltips, controlled selections, cursors, brushes, zoom, keyboard behavior, and coordinated views. Load for hover, focus, pinning, crosshairs, clipping, gesture state, or chart-table coordination.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},"tanstack","TanStack","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Ftanstack.png",[12,16,19,20],{"name":13,"slug":14,"type":15},"Interaction","interaction","tag",{"name":17,"slug":18,"type":15},"Charts","charts",{"name":9,"slug":8,"type":15},{"name":21,"slug":22,"type":15},"Frontend","frontend",608,"https:\u002F\u002Fgithub.com\u002FTanStack\u002Fcharts","2026-08-15T03:47:32.82085",null,40,[29,30,18,31,32,33,34,35,36,37,38,39,40,8,41,42],"accessible-charts","charting-library","d3","data-visualization","dataviz","grammar-of-graphics","javascript","octane","react","responsive-charts","ssr","svg","typescript","visualization",{"repoUrl":24,"stars":23,"forks":27,"topics":44,"description":45},[29,30,18,31,32,33,34,35,36,37,38,39,40,8,41,42],"A tiny TypeScript visualization grammar for responsive, accessible, server-rendered charts—powered by granular D3 primitives.","https:\u002F\u002Fgithub.com\u002FTanStack\u002Fcharts\u002Ftree\u002FHEAD\u002Fpackages\u002Fcharts-core\u002Fskills\u002Fbuild-chart-interactions","---\nname: build-chart-interactions\ndescription: >\n  Compose TanStack Charts focus, tooltips, controlled selections, cursors,\n  brushes, zoom, keyboard behavior, and coordinated views. Load for hover,\n  focus, pinning, crosshairs, clipping, gesture state, or chart-table\n  coordination.\nmetadata:\n  type: core\n  library: '@tanstack\u002Fcharts'\n  library_version: '0.9.0'\nsources:\n  - 'TanStack\u002Fcharts:docs\u002Fguides\u002Ftooltips-and-focus.md'\n  - 'TanStack\u002Fcharts:docs\u002Fguides\u002Finteractions-and-selections.md'\n  - 'TanStack\u002Fcharts:docs\u002Freference\u002Ffocus-and-interaction.md'\n  - 'TanStack\u002Fcharts:docs\u002Freference\u002Fmarks\u002Ffocus-guide.md'\n---\n\n# Build Chart Interactions\n\nUse **trigger → inspect → decide → build → verify**. Charts owns renderer-neutral interaction mechanics; the application owns accepted semantic state, persistence, product policy, and equivalent non-pointer controls.\n\n## Setup\n\nStart with native focus and tooltip behavior before adding controlled state:\n\n```ts\nimport { defineChart, lineY } from '@tanstack\u002Fcharts'\nimport { crosshair } from '@tanstack\u002Fcharts\u002Fcrosshair'\nimport { scaleLinear } from '@tanstack\u002Fcharts\u002Fscales\u002Flinear'\nimport { scalePoint } from '@tanstack\u002Fcharts\u002Fscales\u002Fpoint'\nimport { tooltip } from '@tanstack\u002Fcharts\u002Ftooltip'\n\nconst rows = [\n  { week: 'May 4', value: 820 },\n  { week: 'May 11', value: 960 },\n  { week: 'May 18', value: 1_140 },\n]\n\nexport const chart = defineChart({\n  marks: [\n    lineY(rows, { x: 'week', y: 'value', points: true }),\n    crosshair({ x: { label: true }, y: false }),\n  ],\n  x: { scale: scalePoint },\n  y: { scale: scaleLinear },\n  focus: 'nearest-x',\n  maxFocusDistance: Number.POSITIVE_INFINITY,\n  tooltip,\n})\n```\n\nKeep the finite default focus distance when empty space should clear inspection.\n\n## Core Patterns\n\n### Choose interaction ownership\n\n| Need                                                                         | Owner                                      |\n| ---------------------------------------------------------------------------- | ------------------------------------------ |\n| Nearest datum, grouped tooltip, snapped crosshair, keyboard point navigation | chart focus                                |\n| Semantic selection, free cursor, handle, brush, zoom, interactive legend     | first-party control plus controlled signal |\n| Shared accepted range, persistence, playback, editing, rich pinned details   | application state\u002FUI                       |\n\nRead [the interaction state matrix](references\u002Finteraction-state.md) before combining controls.\n\n### Coordinate chart and application selection by key\n\n```ts\nimport { defineChart, dot } from '@tanstack\u002Fcharts'\nimport { controlledSignal } from '@tanstack\u002Fcharts\u002Finteraction\u002Fsignal'\nimport { scaleLinear } from '@tanstack\u002Fcharts\u002Fscales\u002Flinear'\nimport { keyedSelection, whenSelected } from '@tanstack\u002Fcharts\u002Fselection'\n\nconst observations = [\n  { id: 'a', speed: 12, efficiency: 32 },\n  { id: 'b', speed: 18, efficiency: 27 },\n]\n\nlet selectedId: string | null = null\n\nconst selection = keyedSelection\u003C\n  (typeof observations)[number],\n  string,\n  number,\n  number\n>({\n  selected: controlledSignal(selectedId, (next) => {\n    selectedId = next\n  }),\n  key: (datum) => datum.id,\n})\n\nexport const chart = defineChart({\n  marks: [\n    dot(observations, {\n      id: 'observations',\n      x: 'speed',\n      y: 'efficiency',\n      key: 'id',\n    }),\n    whenSelected(\n      dot(observations, {\n        id: 'selected-observation',\n        x: 'speed',\n        y: 'efficiency',\n        key: 'id',\n        r: 7,\n      }),\n      selection,\n    ),\n  ],\n  x: { scale: scaleLinear },\n  y: { scale: scaleLinear },\n  selection,\n})\n```\n\nRebuild the definition with the accepted controlled value. A signal is a snapshot and callback, not a hidden store.\n\n### Synchronize semantic values, not pixels\n\nUse one `createChartCursor` controller across definitions when charts should resolve the same x\u002Fy value through their own scales. Keep crosshair presentation in each definition. Never copy DOM coordinates or mutate another chart's SVG.\n\n### Add portaling only for containment boundaries\n\nUse native tooltip content first. Add `portal` when overflow, transforms, or stacking contexts clip the surface. Use framework adapter tooltip bodies only when the product requires rich interactive content.\n\n## Common Mistakes\n\n### CRITICAL Mutating SVG for focus presentation\n\nWrong:\n\n```ts\nonRender={({ svg }) => svg.insertBefore(activeBand, svg.firstChild)}\n```\n\nCorrect:\n\n```ts\nmarks: [\n  whenFocused(bandX(rows, { x: 'date' }), { match: 'x' }),\n  lineY(rows, channels),\n]\n```\n\nDOM mutation bypasses scene identity, SSR, Canvas, React Native, motion, and cleanup. Current focus marks replace an older workaround that still appears in issue examples.\n\nSource: GitHub issue 9; `API-FRICTION.md` F-178\n\n### HIGH Focusing a point-less rule\n\nWrong:\n\n```ts\nwhenFocused(ruleX(dates), { match: 'x' })\n```\n\nCorrect:\n\n```ts\nfocusGuideX(rows, { x: 'date', y: 'value', xRule: {} })\n```\n\nRules emit no interaction points, so a focus filter has no candidate identity. Current focus-guide primitives replace this legacy pattern.\n\nSource: GitHub issue 32; `API-FRICTION.md` F-237\n\n### CRITICAL Treating callbacks as complete behavior\n\nWrong: attach only an `onRangeChange` or key callback to an overlay.\n\nCorrect: use the matching controlled control (`keyedSelection`, `continuousCursor`, `handleX`, `brushX`, or `zoomX`) and store its accepted semantic value in application state.\n\nA callback alone does not define capture, clamping, cancellation, keyboard operations, or ownership.\n\nSource: `API-FRICTION.md` F-075; `docs\u002Fguides\u002Finteractions-and-selections.md`\n\n### HIGH Keeping tooltips inside clipped ancestors\n\nWrong:\n\n```ts\ntooltip: {\n  use: tooltip\n}\n```\n\nCorrect:\n\n```ts\ntooltip: {\n  use: (tooltip, portal)\n}\n```\n\nOverflow, transforms, and stacking contexts can trap a correctly positioned tooltip.\n\nSource: `API-FRICTION.md` F-133; `docs\u002Fguides\u002Ftooltips-and-focus.md`\n\n### HIGH Letting decorative layers own duplicate points\n\nWrong: make every area, line, dot, label, and highlight layer over one observation independently focusable.\n\nCorrect: choose one semantic interaction owner and use `decorative`, `whenFocused`, or `whenSelected` for supporting presentation.\n\nDuplicate points create repeated keyboard stops, focus candidates, activations, and tooltip rows.\n\nSource: `API-FRICTION.md` F-218; `docs\u002Fguides\u002Ftooltips-and-focus.md`\n\n### HIGH Tension: rich interaction versus portable rendering\n\nPrefer marks, controls, semantic state, and host extensions over DOM-only overlays. Verify pointer and keyboard paths, static fallback, teardown, and any native equivalent.\n\nSee also: `ship-accessible-charts\u002FSKILL.md` and `extend-tanstack-charts\u002FSKILL.md`\n\n## References\n\n- [Interaction ownership and state machines](references\u002Finteraction-state.md)\n\nSee also: `coordinate-charts-with-tanstack\u002FSKILL.md`, `ship-accessible-charts\u002FSKILL.md`, and `update-and-animate-charts\u002FSKILL.md` — interaction requires explicit cross-surface ownership, keyboard parity, and stable identity across updates.\n",{"data":49,"body":59},{"name":4,"description":6,"metadata":50,"sources":54},{"type":51,"library":52,"library_version":53},"core","@tanstack\u002Fcharts","0.9.0",[55,56,57,58],"TanStack\u002Fcharts:docs\u002Fguides\u002Ftooltips-and-focus.md","TanStack\u002Fcharts:docs\u002Fguides\u002Finteractions-and-selections.md","TanStack\u002Fcharts:docs\u002Freference\u002Ffocus-and-interaction.md","TanStack\u002Fcharts:docs\u002Freference\u002Fmarks\u002Ffocus-guide.md",{"type":60,"children":61},"root",[62,70,84,91,96,932,937,943,950,1017,1031,1037,2198,2203,2209,2222,2228,2241,2247,2253,2258,2314,2319,2474,2479,2492,2498,2502,2567,2571,2668,2673,2685,2691,2704,2747,2752,2770,2776,2780,2827,2831,2892,2897,2914,2920,2925,2951,2956,2972,2978,2983,3002,3008,3021,3047],{"type":63,"tag":64,"props":65,"children":66},"element","h1",{"id":4},[67],{"type":68,"value":69},"text","Build Chart Interactions",{"type":63,"tag":71,"props":72,"children":73},"p",{},[74,76,82],{"type":68,"value":75},"Use ",{"type":63,"tag":77,"props":78,"children":79},"strong",{},[80],{"type":68,"value":81},"trigger → inspect → decide → build → verify",{"type":68,"value":83},". Charts owns renderer-neutral interaction mechanics; the application owns accepted semantic state, persistence, product policy, and equivalent non-pointer controls.",{"type":63,"tag":85,"props":86,"children":88},"h2",{"id":87},"setup",[89],{"type":68,"value":90},"Setup",{"type":63,"tag":71,"props":92,"children":93},{},[94],{"type":68,"value":95},"Start with native focus and tooltip behavior before adding controlled state:",{"type":63,"tag":97,"props":98,"children":103},"pre",{"className":99,"code":100,"language":101,"meta":102,"style":102},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { defineChart, lineY } from '@tanstack\u002Fcharts'\nimport { crosshair } from '@tanstack\u002Fcharts\u002Fcrosshair'\nimport { scaleLinear } from '@tanstack\u002Fcharts\u002Fscales\u002Flinear'\nimport { scalePoint } from '@tanstack\u002Fcharts\u002Fscales\u002Fpoint'\nimport { tooltip } from '@tanstack\u002Fcharts\u002Ftooltip'\n\nconst rows = [\n  { week: 'May 4', value: 820 },\n  { week: 'May 11', value: 960 },\n  { week: 'May 18', value: 1_140 },\n]\n\nexport const chart = defineChart({\n  marks: [\n    lineY(rows, { x: 'week', y: 'value', points: true }),\n    crosshair({ x: { label: true }, y: false }),\n  ],\n  x: { scale: scalePoint },\n  y: { scale: scaleLinear },\n  focus: 'nearest-x',\n  maxFocusDistance: Number.POSITIVE_INFINITY,\n  tooltip,\n})\n","ts","",[104],{"type":63,"tag":105,"props":106,"children":107},"code",{"__ignoreMap":102},[108,167,205,243,281,319,329,354,412,462,512,521,529,567,584,687,760,773,809,843,873,905,918],{"type":63,"tag":109,"props":110,"children":113},"span",{"class":111,"line":112},"line",1,[114,120,126,132,137,142,147,152,157,162],{"type":63,"tag":109,"props":115,"children":117},{"style":116},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[118],{"type":68,"value":119},"import",{"type":63,"tag":109,"props":121,"children":123},{"style":122},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[124],{"type":68,"value":125}," {",{"type":63,"tag":109,"props":127,"children":129},{"style":128},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[130],{"type":68,"value":131}," defineChart",{"type":63,"tag":109,"props":133,"children":134},{"style":122},[135],{"type":68,"value":136},",",{"type":63,"tag":109,"props":138,"children":139},{"style":128},[140],{"type":68,"value":141}," lineY",{"type":63,"tag":109,"props":143,"children":144},{"style":122},[145],{"type":68,"value":146}," }",{"type":63,"tag":109,"props":148,"children":149},{"style":116},[150],{"type":68,"value":151}," from",{"type":63,"tag":109,"props":153,"children":154},{"style":122},[155],{"type":68,"value":156}," '",{"type":63,"tag":109,"props":158,"children":160},{"style":159},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[161],{"type":68,"value":52},{"type":63,"tag":109,"props":163,"children":164},{"style":122},[165],{"type":68,"value":166},"'\n",{"type":63,"tag":109,"props":168,"children":170},{"class":111,"line":169},2,[171,175,179,184,188,192,196,201],{"type":63,"tag":109,"props":172,"children":173},{"style":116},[174],{"type":68,"value":119},{"type":63,"tag":109,"props":176,"children":177},{"style":122},[178],{"type":68,"value":125},{"type":63,"tag":109,"props":180,"children":181},{"style":128},[182],{"type":68,"value":183}," crosshair",{"type":63,"tag":109,"props":185,"children":186},{"style":122},[187],{"type":68,"value":146},{"type":63,"tag":109,"props":189,"children":190},{"style":116},[191],{"type":68,"value":151},{"type":63,"tag":109,"props":193,"children":194},{"style":122},[195],{"type":68,"value":156},{"type":63,"tag":109,"props":197,"children":198},{"style":159},[199],{"type":68,"value":200},"@tanstack\u002Fcharts\u002Fcrosshair",{"type":63,"tag":109,"props":202,"children":203},{"style":122},[204],{"type":68,"value":166},{"type":63,"tag":109,"props":206,"children":208},{"class":111,"line":207},3,[209,213,217,222,226,230,234,239],{"type":63,"tag":109,"props":210,"children":211},{"style":116},[212],{"type":68,"value":119},{"type":63,"tag":109,"props":214,"children":215},{"style":122},[216],{"type":68,"value":125},{"type":63,"tag":109,"props":218,"children":219},{"style":128},[220],{"type":68,"value":221}," scaleLinear",{"type":63,"tag":109,"props":223,"children":224},{"style":122},[225],{"type":68,"value":146},{"type":63,"tag":109,"props":227,"children":228},{"style":116},[229],{"type":68,"value":151},{"type":63,"tag":109,"props":231,"children":232},{"style":122},[233],{"type":68,"value":156},{"type":63,"tag":109,"props":235,"children":236},{"style":159},[237],{"type":68,"value":238},"@tanstack\u002Fcharts\u002Fscales\u002Flinear",{"type":63,"tag":109,"props":240,"children":241},{"style":122},[242],{"type":68,"value":166},{"type":63,"tag":109,"props":244,"children":246},{"class":111,"line":245},4,[247,251,255,260,264,268,272,277],{"type":63,"tag":109,"props":248,"children":249},{"style":116},[250],{"type":68,"value":119},{"type":63,"tag":109,"props":252,"children":253},{"style":122},[254],{"type":68,"value":125},{"type":63,"tag":109,"props":256,"children":257},{"style":128},[258],{"type":68,"value":259}," scalePoint",{"type":63,"tag":109,"props":261,"children":262},{"style":122},[263],{"type":68,"value":146},{"type":63,"tag":109,"props":265,"children":266},{"style":116},[267],{"type":68,"value":151},{"type":63,"tag":109,"props":269,"children":270},{"style":122},[271],{"type":68,"value":156},{"type":63,"tag":109,"props":273,"children":274},{"style":159},[275],{"type":68,"value":276},"@tanstack\u002Fcharts\u002Fscales\u002Fpoint",{"type":63,"tag":109,"props":278,"children":279},{"style":122},[280],{"type":68,"value":166},{"type":63,"tag":109,"props":282,"children":284},{"class":111,"line":283},5,[285,289,293,298,302,306,310,315],{"type":63,"tag":109,"props":286,"children":287},{"style":116},[288],{"type":68,"value":119},{"type":63,"tag":109,"props":290,"children":291},{"style":122},[292],{"type":68,"value":125},{"type":63,"tag":109,"props":294,"children":295},{"style":128},[296],{"type":68,"value":297}," tooltip",{"type":63,"tag":109,"props":299,"children":300},{"style":122},[301],{"type":68,"value":146},{"type":63,"tag":109,"props":303,"children":304},{"style":116},[305],{"type":68,"value":151},{"type":63,"tag":109,"props":307,"children":308},{"style":122},[309],{"type":68,"value":156},{"type":63,"tag":109,"props":311,"children":312},{"style":159},[313],{"type":68,"value":314},"@tanstack\u002Fcharts\u002Ftooltip",{"type":63,"tag":109,"props":316,"children":317},{"style":122},[318],{"type":68,"value":166},{"type":63,"tag":109,"props":320,"children":322},{"class":111,"line":321},6,[323],{"type":63,"tag":109,"props":324,"children":326},{"emptyLinePlaceholder":325},true,[327],{"type":68,"value":328},"\n",{"type":63,"tag":109,"props":330,"children":332},{"class":111,"line":331},7,[333,339,344,349],{"type":63,"tag":109,"props":334,"children":336},{"style":335},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[337],{"type":68,"value":338},"const",{"type":63,"tag":109,"props":340,"children":341},{"style":128},[342],{"type":68,"value":343}," rows ",{"type":63,"tag":109,"props":345,"children":346},{"style":122},[347],{"type":68,"value":348},"=",{"type":63,"tag":109,"props":350,"children":351},{"style":128},[352],{"type":68,"value":353}," [\n",{"type":63,"tag":109,"props":355,"children":357},{"class":111,"line":356},8,[358,363,369,374,378,383,388,392,397,401,407],{"type":63,"tag":109,"props":359,"children":360},{"style":122},[361],{"type":68,"value":362},"  {",{"type":63,"tag":109,"props":364,"children":366},{"style":365},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[367],{"type":68,"value":368}," week",{"type":63,"tag":109,"props":370,"children":371},{"style":122},[372],{"type":68,"value":373},":",{"type":63,"tag":109,"props":375,"children":376},{"style":122},[377],{"type":68,"value":156},{"type":63,"tag":109,"props":379,"children":380},{"style":159},[381],{"type":68,"value":382},"May 4",{"type":63,"tag":109,"props":384,"children":385},{"style":122},[386],{"type":68,"value":387},"'",{"type":63,"tag":109,"props":389,"children":390},{"style":122},[391],{"type":68,"value":136},{"type":63,"tag":109,"props":393,"children":394},{"style":365},[395],{"type":68,"value":396}," value",{"type":63,"tag":109,"props":398,"children":399},{"style":122},[400],{"type":68,"value":373},{"type":63,"tag":109,"props":402,"children":404},{"style":403},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[405],{"type":68,"value":406}," 820",{"type":63,"tag":109,"props":408,"children":409},{"style":122},[410],{"type":68,"value":411}," },\n",{"type":63,"tag":109,"props":413,"children":415},{"class":111,"line":414},9,[416,420,424,428,432,437,441,445,449,453,458],{"type":63,"tag":109,"props":417,"children":418},{"style":122},[419],{"type":68,"value":362},{"type":63,"tag":109,"props":421,"children":422},{"style":365},[423],{"type":68,"value":368},{"type":63,"tag":109,"props":425,"children":426},{"style":122},[427],{"type":68,"value":373},{"type":63,"tag":109,"props":429,"children":430},{"style":122},[431],{"type":68,"value":156},{"type":63,"tag":109,"props":433,"children":434},{"style":159},[435],{"type":68,"value":436},"May 11",{"type":63,"tag":109,"props":438,"children":439},{"style":122},[440],{"type":68,"value":387},{"type":63,"tag":109,"props":442,"children":443},{"style":122},[444],{"type":68,"value":136},{"type":63,"tag":109,"props":446,"children":447},{"style":365},[448],{"type":68,"value":396},{"type":63,"tag":109,"props":450,"children":451},{"style":122},[452],{"type":68,"value":373},{"type":63,"tag":109,"props":454,"children":455},{"style":403},[456],{"type":68,"value":457}," 960",{"type":63,"tag":109,"props":459,"children":460},{"style":122},[461],{"type":68,"value":411},{"type":63,"tag":109,"props":463,"children":465},{"class":111,"line":464},10,[466,470,474,478,482,487,491,495,499,503,508],{"type":63,"tag":109,"props":467,"children":468},{"style":122},[469],{"type":68,"value":362},{"type":63,"tag":109,"props":471,"children":472},{"style":365},[473],{"type":68,"value":368},{"type":63,"tag":109,"props":475,"children":476},{"style":122},[477],{"type":68,"value":373},{"type":63,"tag":109,"props":479,"children":480},{"style":122},[481],{"type":68,"value":156},{"type":63,"tag":109,"props":483,"children":484},{"style":159},[485],{"type":68,"value":486},"May 18",{"type":63,"tag":109,"props":488,"children":489},{"style":122},[490],{"type":68,"value":387},{"type":63,"tag":109,"props":492,"children":493},{"style":122},[494],{"type":68,"value":136},{"type":63,"tag":109,"props":496,"children":497},{"style":365},[498],{"type":68,"value":396},{"type":63,"tag":109,"props":500,"children":501},{"style":122},[502],{"type":68,"value":373},{"type":63,"tag":109,"props":504,"children":505},{"style":403},[506],{"type":68,"value":507}," 1_140",{"type":63,"tag":109,"props":509,"children":510},{"style":122},[511],{"type":68,"value":411},{"type":63,"tag":109,"props":513,"children":515},{"class":111,"line":514},11,[516],{"type":63,"tag":109,"props":517,"children":518},{"style":128},[519],{"type":68,"value":520},"]\n",{"type":63,"tag":109,"props":522,"children":524},{"class":111,"line":523},12,[525],{"type":63,"tag":109,"props":526,"children":527},{"emptyLinePlaceholder":325},[528],{"type":68,"value":328},{"type":63,"tag":109,"props":530,"children":532},{"class":111,"line":531},13,[533,538,543,548,552,557,562],{"type":63,"tag":109,"props":534,"children":535},{"style":116},[536],{"type":68,"value":537},"export",{"type":63,"tag":109,"props":539,"children":540},{"style":335},[541],{"type":68,"value":542}," const",{"type":63,"tag":109,"props":544,"children":545},{"style":128},[546],{"type":68,"value":547}," chart ",{"type":63,"tag":109,"props":549,"children":550},{"style":122},[551],{"type":68,"value":348},{"type":63,"tag":109,"props":553,"children":555},{"style":554},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[556],{"type":68,"value":131},{"type":63,"tag":109,"props":558,"children":559},{"style":128},[560],{"type":68,"value":561},"(",{"type":63,"tag":109,"props":563,"children":564},{"style":122},[565],{"type":68,"value":566},"{\n",{"type":63,"tag":109,"props":568,"children":570},{"class":111,"line":569},14,[571,576,580],{"type":63,"tag":109,"props":572,"children":573},{"style":365},[574],{"type":68,"value":575},"  marks",{"type":63,"tag":109,"props":577,"children":578},{"style":122},[579],{"type":68,"value":373},{"type":63,"tag":109,"props":581,"children":582},{"style":128},[583],{"type":68,"value":353},{"type":63,"tag":109,"props":585,"children":587},{"class":111,"line":586},15,[588,593,598,602,606,611,615,619,624,628,632,637,641,645,650,654,658,663,667,673,677,682],{"type":63,"tag":109,"props":589,"children":590},{"style":554},[591],{"type":68,"value":592},"    lineY",{"type":63,"tag":109,"props":594,"children":595},{"style":128},[596],{"type":68,"value":597},"(rows",{"type":63,"tag":109,"props":599,"children":600},{"style":122},[601],{"type":68,"value":136},{"type":63,"tag":109,"props":603,"children":604},{"style":122},[605],{"type":68,"value":125},{"type":63,"tag":109,"props":607,"children":608},{"style":365},[609],{"type":68,"value":610}," x",{"type":63,"tag":109,"props":612,"children":613},{"style":122},[614],{"type":68,"value":373},{"type":63,"tag":109,"props":616,"children":617},{"style":122},[618],{"type":68,"value":156},{"type":63,"tag":109,"props":620,"children":621},{"style":159},[622],{"type":68,"value":623},"week",{"type":63,"tag":109,"props":625,"children":626},{"style":122},[627],{"type":68,"value":387},{"type":63,"tag":109,"props":629,"children":630},{"style":122},[631],{"type":68,"value":136},{"type":63,"tag":109,"props":633,"children":634},{"style":365},[635],{"type":68,"value":636}," y",{"type":63,"tag":109,"props":638,"children":639},{"style":122},[640],{"type":68,"value":373},{"type":63,"tag":109,"props":642,"children":643},{"style":122},[644],{"type":68,"value":156},{"type":63,"tag":109,"props":646,"children":647},{"style":159},[648],{"type":68,"value":649},"value",{"type":63,"tag":109,"props":651,"children":652},{"style":122},[653],{"type":68,"value":387},{"type":63,"tag":109,"props":655,"children":656},{"style":122},[657],{"type":68,"value":136},{"type":63,"tag":109,"props":659,"children":660},{"style":365},[661],{"type":68,"value":662}," points",{"type":63,"tag":109,"props":664,"children":665},{"style":122},[666],{"type":68,"value":373},{"type":63,"tag":109,"props":668,"children":670},{"style":669},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[671],{"type":68,"value":672}," true",{"type":63,"tag":109,"props":674,"children":675},{"style":122},[676],{"type":68,"value":146},{"type":63,"tag":109,"props":678,"children":679},{"style":128},[680],{"type":68,"value":681},")",{"type":63,"tag":109,"props":683,"children":684},{"style":122},[685],{"type":68,"value":686},",\n",{"type":63,"tag":109,"props":688,"children":690},{"class":111,"line":689},16,[691,696,700,705,709,713,717,722,726,730,735,739,743,748,752,756],{"type":63,"tag":109,"props":692,"children":693},{"style":554},[694],{"type":68,"value":695},"    crosshair",{"type":63,"tag":109,"props":697,"children":698},{"style":128},[699],{"type":68,"value":561},{"type":63,"tag":109,"props":701,"children":702},{"style":122},[703],{"type":68,"value":704},"{",{"type":63,"tag":109,"props":706,"children":707},{"style":365},[708],{"type":68,"value":610},{"type":63,"tag":109,"props":710,"children":711},{"style":122},[712],{"type":68,"value":373},{"type":63,"tag":109,"props":714,"children":715},{"style":122},[716],{"type":68,"value":125},{"type":63,"tag":109,"props":718,"children":719},{"style":365},[720],{"type":68,"value":721}," label",{"type":63,"tag":109,"props":723,"children":724},{"style":122},[725],{"type":68,"value":373},{"type":63,"tag":109,"props":727,"children":728},{"style":669},[729],{"type":68,"value":672},{"type":63,"tag":109,"props":731,"children":732},{"style":122},[733],{"type":68,"value":734}," },",{"type":63,"tag":109,"props":736,"children":737},{"style":365},[738],{"type":68,"value":636},{"type":63,"tag":109,"props":740,"children":741},{"style":122},[742],{"type":68,"value":373},{"type":63,"tag":109,"props":744,"children":745},{"style":669},[746],{"type":68,"value":747}," false",{"type":63,"tag":109,"props":749,"children":750},{"style":122},[751],{"type":68,"value":146},{"type":63,"tag":109,"props":753,"children":754},{"style":128},[755],{"type":68,"value":681},{"type":63,"tag":109,"props":757,"children":758},{"style":122},[759],{"type":68,"value":686},{"type":63,"tag":109,"props":761,"children":763},{"class":111,"line":762},17,[764,769],{"type":63,"tag":109,"props":765,"children":766},{"style":128},[767],{"type":68,"value":768},"  ]",{"type":63,"tag":109,"props":770,"children":771},{"style":122},[772],{"type":68,"value":686},{"type":63,"tag":109,"props":774,"children":776},{"class":111,"line":775},18,[777,782,786,790,795,799,804],{"type":63,"tag":109,"props":778,"children":779},{"style":365},[780],{"type":68,"value":781},"  x",{"type":63,"tag":109,"props":783,"children":784},{"style":122},[785],{"type":68,"value":373},{"type":63,"tag":109,"props":787,"children":788},{"style":122},[789],{"type":68,"value":125},{"type":63,"tag":109,"props":791,"children":792},{"style":365},[793],{"type":68,"value":794}," scale",{"type":63,"tag":109,"props":796,"children":797},{"style":122},[798],{"type":68,"value":373},{"type":63,"tag":109,"props":800,"children":801},{"style":128},[802],{"type":68,"value":803}," scalePoint ",{"type":63,"tag":109,"props":805,"children":806},{"style":122},[807],{"type":68,"value":808},"},\n",{"type":63,"tag":109,"props":810,"children":812},{"class":111,"line":811},19,[813,818,822,826,830,834,839],{"type":63,"tag":109,"props":814,"children":815},{"style":365},[816],{"type":68,"value":817},"  y",{"type":63,"tag":109,"props":819,"children":820},{"style":122},[821],{"type":68,"value":373},{"type":63,"tag":109,"props":823,"children":824},{"style":122},[825],{"type":68,"value":125},{"type":63,"tag":109,"props":827,"children":828},{"style":365},[829],{"type":68,"value":794},{"type":63,"tag":109,"props":831,"children":832},{"style":122},[833],{"type":68,"value":373},{"type":63,"tag":109,"props":835,"children":836},{"style":128},[837],{"type":68,"value":838}," scaleLinear ",{"type":63,"tag":109,"props":840,"children":841},{"style":122},[842],{"type":68,"value":808},{"type":63,"tag":109,"props":844,"children":846},{"class":111,"line":845},20,[847,852,856,860,865,869],{"type":63,"tag":109,"props":848,"children":849},{"style":365},[850],{"type":68,"value":851},"  focus",{"type":63,"tag":109,"props":853,"children":854},{"style":122},[855],{"type":68,"value":373},{"type":63,"tag":109,"props":857,"children":858},{"style":122},[859],{"type":68,"value":156},{"type":63,"tag":109,"props":861,"children":862},{"style":159},[863],{"type":68,"value":864},"nearest-x",{"type":63,"tag":109,"props":866,"children":867},{"style":122},[868],{"type":68,"value":387},{"type":63,"tag":109,"props":870,"children":871},{"style":122},[872],{"type":68,"value":686},{"type":63,"tag":109,"props":874,"children":876},{"class":111,"line":875},21,[877,882,886,891,896,901],{"type":63,"tag":109,"props":878,"children":879},{"style":365},[880],{"type":68,"value":881},"  maxFocusDistance",{"type":63,"tag":109,"props":883,"children":884},{"style":122},[885],{"type":68,"value":373},{"type":63,"tag":109,"props":887,"children":888},{"style":128},[889],{"type":68,"value":890}," Number",{"type":63,"tag":109,"props":892,"children":893},{"style":122},[894],{"type":68,"value":895},".",{"type":63,"tag":109,"props":897,"children":898},{"style":128},[899],{"type":68,"value":900},"POSITIVE_INFINITY",{"type":63,"tag":109,"props":902,"children":903},{"style":122},[904],{"type":68,"value":686},{"type":63,"tag":109,"props":906,"children":908},{"class":111,"line":907},22,[909,914],{"type":63,"tag":109,"props":910,"children":911},{"style":128},[912],{"type":68,"value":913},"  tooltip",{"type":63,"tag":109,"props":915,"children":916},{"style":122},[917],{"type":68,"value":686},{"type":63,"tag":109,"props":919,"children":921},{"class":111,"line":920},23,[922,927],{"type":63,"tag":109,"props":923,"children":924},{"style":122},[925],{"type":68,"value":926},"}",{"type":63,"tag":109,"props":928,"children":929},{"style":128},[930],{"type":68,"value":931},")\n",{"type":63,"tag":71,"props":933,"children":934},{},[935],{"type":68,"value":936},"Keep the finite default focus distance when empty space should clear inspection.",{"type":63,"tag":85,"props":938,"children":940},{"id":939},"core-patterns",[941],{"type":68,"value":942},"Core Patterns",{"type":63,"tag":944,"props":945,"children":947},"h3",{"id":946},"choose-interaction-ownership",[948],{"type":68,"value":949},"Choose interaction ownership",{"type":63,"tag":951,"props":952,"children":953},"table",{},[954,973],{"type":63,"tag":955,"props":956,"children":957},"thead",{},[958],{"type":63,"tag":959,"props":960,"children":961},"tr",{},[962,968],{"type":63,"tag":963,"props":964,"children":965},"th",{},[966],{"type":68,"value":967},"Need",{"type":63,"tag":963,"props":969,"children":970},{},[971],{"type":68,"value":972},"Owner",{"type":63,"tag":974,"props":975,"children":976},"tbody",{},[977,991,1004],{"type":63,"tag":959,"props":978,"children":979},{},[980,986],{"type":63,"tag":981,"props":982,"children":983},"td",{},[984],{"type":68,"value":985},"Nearest datum, grouped tooltip, snapped crosshair, keyboard point navigation",{"type":63,"tag":981,"props":987,"children":988},{},[989],{"type":68,"value":990},"chart focus",{"type":63,"tag":959,"props":992,"children":993},{},[994,999],{"type":63,"tag":981,"props":995,"children":996},{},[997],{"type":68,"value":998},"Semantic selection, free cursor, handle, brush, zoom, interactive legend",{"type":63,"tag":981,"props":1000,"children":1001},{},[1002],{"type":68,"value":1003},"first-party control plus controlled signal",{"type":63,"tag":959,"props":1005,"children":1006},{},[1007,1012],{"type":63,"tag":981,"props":1008,"children":1009},{},[1010],{"type":68,"value":1011},"Shared accepted range, persistence, playback, editing, rich pinned details",{"type":63,"tag":981,"props":1013,"children":1014},{},[1015],{"type":68,"value":1016},"application state\u002FUI",{"type":63,"tag":71,"props":1018,"children":1019},{},[1020,1022,1029],{"type":68,"value":1021},"Read ",{"type":63,"tag":1023,"props":1024,"children":1026},"a",{"href":1025},"references\u002Finteraction-state.md",[1027],{"type":68,"value":1028},"the interaction state matrix",{"type":68,"value":1030}," before combining controls.",{"type":63,"tag":944,"props":1032,"children":1034},{"id":1033},"coordinate-chart-and-application-selection-by-key",[1035],{"type":68,"value":1036},"Coordinate chart and application selection by key",{"type":63,"tag":97,"props":1038,"children":1040},{"className":99,"code":1039,"language":101,"meta":102,"style":102},"import { defineChart, dot } from '@tanstack\u002Fcharts'\nimport { controlledSignal } from '@tanstack\u002Fcharts\u002Finteraction\u002Fsignal'\nimport { scaleLinear } from '@tanstack\u002Fcharts\u002Fscales\u002Flinear'\nimport { keyedSelection, whenSelected } from '@tanstack\u002Fcharts\u002Fselection'\n\nconst observations = [\n  { id: 'a', speed: 12, efficiency: 32 },\n  { id: 'b', speed: 18, efficiency: 27 },\n]\n\nlet selectedId: string | null = null\n\nconst selection = keyedSelection\u003C\n  (typeof observations)[number],\n  string,\n  number,\n  number\n>({\n  selected: controlledSignal(selectedId, (next) => {\n    selectedId = next\n  }),\n  key: (datum) => datum.id,\n})\n\nexport const chart = defineChart({\n  marks: [\n    dot(observations, {\n      id: 'observations',\n      x: 'speed',\n      y: 'efficiency',\n      key: 'id',\n    }),\n    whenSelected(\n      dot(observations, {\n        id: 'selected-observation',\n        x: 'speed',\n        y: 'efficiency',\n        key: 'id',\n        r: 7,\n      }),\n      selection,\n    ),\n  ],\n  x: { scale: scaleLinear },\n  y: { scale: scaleLinear },\n  selection,\n})\n",[1041],{"type":63,"tag":105,"props":1042,"children":1043},{"__ignoreMap":102},[1044,1088,1125,1160,1206,1213,1233,1301,1367,1374,1381,1424,1431,1456,1478,1490,1502,1510,1526,1576,1593,1609,1656,1667,1675,1707,1723,1745,1775,1805,1835,1864,1881,1895,1916,1946,1975,2004,2033,2055,2071,2084,2097,2109,2141,2173,2186],{"type":63,"tag":109,"props":1045,"children":1046},{"class":111,"line":112},[1047,1051,1055,1059,1063,1068,1072,1076,1080,1084],{"type":63,"tag":109,"props":1048,"children":1049},{"style":116},[1050],{"type":68,"value":119},{"type":63,"tag":109,"props":1052,"children":1053},{"style":122},[1054],{"type":68,"value":125},{"type":63,"tag":109,"props":1056,"children":1057},{"style":128},[1058],{"type":68,"value":131},{"type":63,"tag":109,"props":1060,"children":1061},{"style":122},[1062],{"type":68,"value":136},{"type":63,"tag":109,"props":1064,"children":1065},{"style":128},[1066],{"type":68,"value":1067}," dot",{"type":63,"tag":109,"props":1069,"children":1070},{"style":122},[1071],{"type":68,"value":146},{"type":63,"tag":109,"props":1073,"children":1074},{"style":116},[1075],{"type":68,"value":151},{"type":63,"tag":109,"props":1077,"children":1078},{"style":122},[1079],{"type":68,"value":156},{"type":63,"tag":109,"props":1081,"children":1082},{"style":159},[1083],{"type":68,"value":52},{"type":63,"tag":109,"props":1085,"children":1086},{"style":122},[1087],{"type":68,"value":166},{"type":63,"tag":109,"props":1089,"children":1090},{"class":111,"line":169},[1091,1095,1099,1104,1108,1112,1116,1121],{"type":63,"tag":109,"props":1092,"children":1093},{"style":116},[1094],{"type":68,"value":119},{"type":63,"tag":109,"props":1096,"children":1097},{"style":122},[1098],{"type":68,"value":125},{"type":63,"tag":109,"props":1100,"children":1101},{"style":128},[1102],{"type":68,"value":1103}," controlledSignal",{"type":63,"tag":109,"props":1105,"children":1106},{"style":122},[1107],{"type":68,"value":146},{"type":63,"tag":109,"props":1109,"children":1110},{"style":116},[1111],{"type":68,"value":151},{"type":63,"tag":109,"props":1113,"children":1114},{"style":122},[1115],{"type":68,"value":156},{"type":63,"tag":109,"props":1117,"children":1118},{"style":159},[1119],{"type":68,"value":1120},"@tanstack\u002Fcharts\u002Finteraction\u002Fsignal",{"type":63,"tag":109,"props":1122,"children":1123},{"style":122},[1124],{"type":68,"value":166},{"type":63,"tag":109,"props":1126,"children":1127},{"class":111,"line":207},[1128,1132,1136,1140,1144,1148,1152,1156],{"type":63,"tag":109,"props":1129,"children":1130},{"style":116},[1131],{"type":68,"value":119},{"type":63,"tag":109,"props":1133,"children":1134},{"style":122},[1135],{"type":68,"value":125},{"type":63,"tag":109,"props":1137,"children":1138},{"style":128},[1139],{"type":68,"value":221},{"type":63,"tag":109,"props":1141,"children":1142},{"style":122},[1143],{"type":68,"value":146},{"type":63,"tag":109,"props":1145,"children":1146},{"style":116},[1147],{"type":68,"value":151},{"type":63,"tag":109,"props":1149,"children":1150},{"style":122},[1151],{"type":68,"value":156},{"type":63,"tag":109,"props":1153,"children":1154},{"style":159},[1155],{"type":68,"value":238},{"type":63,"tag":109,"props":1157,"children":1158},{"style":122},[1159],{"type":68,"value":166},{"type":63,"tag":109,"props":1161,"children":1162},{"class":111,"line":245},[1163,1167,1171,1176,1180,1185,1189,1193,1197,1202],{"type":63,"tag":109,"props":1164,"children":1165},{"style":116},[1166],{"type":68,"value":119},{"type":63,"tag":109,"props":1168,"children":1169},{"style":122},[1170],{"type":68,"value":125},{"type":63,"tag":109,"props":1172,"children":1173},{"style":128},[1174],{"type":68,"value":1175}," keyedSelection",{"type":63,"tag":109,"props":1177,"children":1178},{"style":122},[1179],{"type":68,"value":136},{"type":63,"tag":109,"props":1181,"children":1182},{"style":128},[1183],{"type":68,"value":1184}," whenSelected",{"type":63,"tag":109,"props":1186,"children":1187},{"style":122},[1188],{"type":68,"value":146},{"type":63,"tag":109,"props":1190,"children":1191},{"style":116},[1192],{"type":68,"value":151},{"type":63,"tag":109,"props":1194,"children":1195},{"style":122},[1196],{"type":68,"value":156},{"type":63,"tag":109,"props":1198,"children":1199},{"style":159},[1200],{"type":68,"value":1201},"@tanstack\u002Fcharts\u002Fselection",{"type":63,"tag":109,"props":1203,"children":1204},{"style":122},[1205],{"type":68,"value":166},{"type":63,"tag":109,"props":1207,"children":1208},{"class":111,"line":283},[1209],{"type":63,"tag":109,"props":1210,"children":1211},{"emptyLinePlaceholder":325},[1212],{"type":68,"value":328},{"type":63,"tag":109,"props":1214,"children":1215},{"class":111,"line":321},[1216,1220,1225,1229],{"type":63,"tag":109,"props":1217,"children":1218},{"style":335},[1219],{"type":68,"value":338},{"type":63,"tag":109,"props":1221,"children":1222},{"style":128},[1223],{"type":68,"value":1224}," observations ",{"type":63,"tag":109,"props":1226,"children":1227},{"style":122},[1228],{"type":68,"value":348},{"type":63,"tag":109,"props":1230,"children":1231},{"style":128},[1232],{"type":68,"value":353},{"type":63,"tag":109,"props":1234,"children":1235},{"class":111,"line":331},[1236,1240,1245,1249,1253,1257,1261,1265,1270,1274,1279,1283,1288,1292,1297],{"type":63,"tag":109,"props":1237,"children":1238},{"style":122},[1239],{"type":68,"value":362},{"type":63,"tag":109,"props":1241,"children":1242},{"style":365},[1243],{"type":68,"value":1244}," id",{"type":63,"tag":109,"props":1246,"children":1247},{"style":122},[1248],{"type":68,"value":373},{"type":63,"tag":109,"props":1250,"children":1251},{"style":122},[1252],{"type":68,"value":156},{"type":63,"tag":109,"props":1254,"children":1255},{"style":159},[1256],{"type":68,"value":1023},{"type":63,"tag":109,"props":1258,"children":1259},{"style":122},[1260],{"type":68,"value":387},{"type":63,"tag":109,"props":1262,"children":1263},{"style":122},[1264],{"type":68,"value":136},{"type":63,"tag":109,"props":1266,"children":1267},{"style":365},[1268],{"type":68,"value":1269}," speed",{"type":63,"tag":109,"props":1271,"children":1272},{"style":122},[1273],{"type":68,"value":373},{"type":63,"tag":109,"props":1275,"children":1276},{"style":403},[1277],{"type":68,"value":1278}," 12",{"type":63,"tag":109,"props":1280,"children":1281},{"style":122},[1282],{"type":68,"value":136},{"type":63,"tag":109,"props":1284,"children":1285},{"style":365},[1286],{"type":68,"value":1287}," efficiency",{"type":63,"tag":109,"props":1289,"children":1290},{"style":122},[1291],{"type":68,"value":373},{"type":63,"tag":109,"props":1293,"children":1294},{"style":403},[1295],{"type":68,"value":1296}," 32",{"type":63,"tag":109,"props":1298,"children":1299},{"style":122},[1300],{"type":68,"value":411},{"type":63,"tag":109,"props":1302,"children":1303},{"class":111,"line":356},[1304,1308,1312,1316,1320,1325,1329,1333,1337,1341,1346,1350,1354,1358,1363],{"type":63,"tag":109,"props":1305,"children":1306},{"style":122},[1307],{"type":68,"value":362},{"type":63,"tag":109,"props":1309,"children":1310},{"style":365},[1311],{"type":68,"value":1244},{"type":63,"tag":109,"props":1313,"children":1314},{"style":122},[1315],{"type":68,"value":373},{"type":63,"tag":109,"props":1317,"children":1318},{"style":122},[1319],{"type":68,"value":156},{"type":63,"tag":109,"props":1321,"children":1322},{"style":159},[1323],{"type":68,"value":1324},"b",{"type":63,"tag":109,"props":1326,"children":1327},{"style":122},[1328],{"type":68,"value":387},{"type":63,"tag":109,"props":1330,"children":1331},{"style":122},[1332],{"type":68,"value":136},{"type":63,"tag":109,"props":1334,"children":1335},{"style":365},[1336],{"type":68,"value":1269},{"type":63,"tag":109,"props":1338,"children":1339},{"style":122},[1340],{"type":68,"value":373},{"type":63,"tag":109,"props":1342,"children":1343},{"style":403},[1344],{"type":68,"value":1345}," 18",{"type":63,"tag":109,"props":1347,"children":1348},{"style":122},[1349],{"type":68,"value":136},{"type":63,"tag":109,"props":1351,"children":1352},{"style":365},[1353],{"type":68,"value":1287},{"type":63,"tag":109,"props":1355,"children":1356},{"style":122},[1357],{"type":68,"value":373},{"type":63,"tag":109,"props":1359,"children":1360},{"style":403},[1361],{"type":68,"value":1362}," 27",{"type":63,"tag":109,"props":1364,"children":1365},{"style":122},[1366],{"type":68,"value":411},{"type":63,"tag":109,"props":1368,"children":1369},{"class":111,"line":414},[1370],{"type":63,"tag":109,"props":1371,"children":1372},{"style":128},[1373],{"type":68,"value":520},{"type":63,"tag":109,"props":1375,"children":1376},{"class":111,"line":464},[1377],{"type":63,"tag":109,"props":1378,"children":1379},{"emptyLinePlaceholder":325},[1380],{"type":68,"value":328},{"type":63,"tag":109,"props":1382,"children":1383},{"class":111,"line":514},[1384,1389,1394,1398,1404,1409,1414,1419],{"type":63,"tag":109,"props":1385,"children":1386},{"style":335},[1387],{"type":68,"value":1388},"let",{"type":63,"tag":109,"props":1390,"children":1391},{"style":128},[1392],{"type":68,"value":1393}," selectedId",{"type":63,"tag":109,"props":1395,"children":1396},{"style":122},[1397],{"type":68,"value":373},{"type":63,"tag":109,"props":1399,"children":1401},{"style":1400},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[1402],{"type":68,"value":1403}," string",{"type":63,"tag":109,"props":1405,"children":1406},{"style":122},[1407],{"type":68,"value":1408}," |",{"type":63,"tag":109,"props":1410,"children":1411},{"style":1400},[1412],{"type":68,"value":1413}," null",{"type":63,"tag":109,"props":1415,"children":1416},{"style":122},[1417],{"type":68,"value":1418}," =",{"type":63,"tag":109,"props":1420,"children":1421},{"style":122},[1422],{"type":68,"value":1423}," null\n",{"type":63,"tag":109,"props":1425,"children":1426},{"class":111,"line":523},[1427],{"type":63,"tag":109,"props":1428,"children":1429},{"emptyLinePlaceholder":325},[1430],{"type":68,"value":328},{"type":63,"tag":109,"props":1432,"children":1433},{"class":111,"line":531},[1434,1438,1443,1447,1451],{"type":63,"tag":109,"props":1435,"children":1436},{"style":335},[1437],{"type":68,"value":338},{"type":63,"tag":109,"props":1439,"children":1440},{"style":128},[1441],{"type":68,"value":1442}," selection ",{"type":63,"tag":109,"props":1444,"children":1445},{"style":122},[1446],{"type":68,"value":348},{"type":63,"tag":109,"props":1448,"children":1449},{"style":128},[1450],{"type":68,"value":1175},{"type":63,"tag":109,"props":1452,"children":1453},{"style":122},[1454],{"type":68,"value":1455},"\u003C\n",{"type":63,"tag":109,"props":1457,"children":1458},{"class":111,"line":569},[1459,1464,1469,1474],{"type":63,"tag":109,"props":1460,"children":1461},{"style":128},[1462],{"type":68,"value":1463},"  (",{"type":63,"tag":109,"props":1465,"children":1466},{"style":122},[1467],{"type":68,"value":1468},"typeof",{"type":63,"tag":109,"props":1470,"children":1471},{"style":128},[1472],{"type":68,"value":1473}," observations)[number]",{"type":63,"tag":109,"props":1475,"children":1476},{"style":122},[1477],{"type":68,"value":686},{"type":63,"tag":109,"props":1479,"children":1480},{"class":111,"line":586},[1481,1486],{"type":63,"tag":109,"props":1482,"children":1483},{"style":128},[1484],{"type":68,"value":1485},"  string",{"type":63,"tag":109,"props":1487,"children":1488},{"style":122},[1489],{"type":68,"value":686},{"type":63,"tag":109,"props":1491,"children":1492},{"class":111,"line":689},[1493,1498],{"type":63,"tag":109,"props":1494,"children":1495},{"style":128},[1496],{"type":68,"value":1497},"  number",{"type":63,"tag":109,"props":1499,"children":1500},{"style":122},[1501],{"type":68,"value":686},{"type":63,"tag":109,"props":1503,"children":1504},{"class":111,"line":762},[1505],{"type":63,"tag":109,"props":1506,"children":1507},{"style":128},[1508],{"type":68,"value":1509},"  number\n",{"type":63,"tag":109,"props":1511,"children":1512},{"class":111,"line":775},[1513,1518,1522],{"type":63,"tag":109,"props":1514,"children":1515},{"style":122},[1516],{"type":68,"value":1517},">",{"type":63,"tag":109,"props":1519,"children":1520},{"style":128},[1521],{"type":68,"value":561},{"type":63,"tag":109,"props":1523,"children":1524},{"style":122},[1525],{"type":68,"value":566},{"type":63,"tag":109,"props":1527,"children":1528},{"class":111,"line":811},[1529,1534,1538,1542,1547,1551,1556,1562,1566,1571],{"type":63,"tag":109,"props":1530,"children":1531},{"style":365},[1532],{"type":68,"value":1533},"  selected",{"type":63,"tag":109,"props":1535,"children":1536},{"style":122},[1537],{"type":68,"value":373},{"type":63,"tag":109,"props":1539,"children":1540},{"style":554},[1541],{"type":68,"value":1103},{"type":63,"tag":109,"props":1543,"children":1544},{"style":128},[1545],{"type":68,"value":1546},"(selectedId",{"type":63,"tag":109,"props":1548,"children":1549},{"style":122},[1550],{"type":68,"value":136},{"type":63,"tag":109,"props":1552,"children":1553},{"style":122},[1554],{"type":68,"value":1555}," (",{"type":63,"tag":109,"props":1557,"children":1559},{"style":1558},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[1560],{"type":68,"value":1561},"next",{"type":63,"tag":109,"props":1563,"children":1564},{"style":122},[1565],{"type":68,"value":681},{"type":63,"tag":109,"props":1567,"children":1568},{"style":335},[1569],{"type":68,"value":1570}," =>",{"type":63,"tag":109,"props":1572,"children":1573},{"style":122},[1574],{"type":68,"value":1575}," {\n",{"type":63,"tag":109,"props":1577,"children":1578},{"class":111,"line":845},[1579,1584,1588],{"type":63,"tag":109,"props":1580,"children":1581},{"style":128},[1582],{"type":68,"value":1583},"    selectedId",{"type":63,"tag":109,"props":1585,"children":1586},{"style":122},[1587],{"type":68,"value":1418},{"type":63,"tag":109,"props":1589,"children":1590},{"style":128},[1591],{"type":68,"value":1592}," next\n",{"type":63,"tag":109,"props":1594,"children":1595},{"class":111,"line":875},[1596,1601,1605],{"type":63,"tag":109,"props":1597,"children":1598},{"style":122},[1599],{"type":68,"value":1600},"  }",{"type":63,"tag":109,"props":1602,"children":1603},{"style":128},[1604],{"type":68,"value":681},{"type":63,"tag":109,"props":1606,"children":1607},{"style":122},[1608],{"type":68,"value":686},{"type":63,"tag":109,"props":1610,"children":1611},{"class":111,"line":907},[1612,1617,1621,1625,1630,1634,1638,1643,1647,1652],{"type":63,"tag":109,"props":1613,"children":1614},{"style":554},[1615],{"type":68,"value":1616},"  key",{"type":63,"tag":109,"props":1618,"children":1619},{"style":122},[1620],{"type":68,"value":373},{"type":63,"tag":109,"props":1622,"children":1623},{"style":122},[1624],{"type":68,"value":1555},{"type":63,"tag":109,"props":1626,"children":1627},{"style":1558},[1628],{"type":68,"value":1629},"datum",{"type":63,"tag":109,"props":1631,"children":1632},{"style":122},[1633],{"type":68,"value":681},{"type":63,"tag":109,"props":1635,"children":1636},{"style":335},[1637],{"type":68,"value":1570},{"type":63,"tag":109,"props":1639,"children":1640},{"style":128},[1641],{"type":68,"value":1642}," datum",{"type":63,"tag":109,"props":1644,"children":1645},{"style":122},[1646],{"type":68,"value":895},{"type":63,"tag":109,"props":1648,"children":1649},{"style":128},[1650],{"type":68,"value":1651},"id",{"type":63,"tag":109,"props":1653,"children":1654},{"style":122},[1655],{"type":68,"value":686},{"type":63,"tag":109,"props":1657,"children":1658},{"class":111,"line":920},[1659,1663],{"type":63,"tag":109,"props":1660,"children":1661},{"style":122},[1662],{"type":68,"value":926},{"type":63,"tag":109,"props":1664,"children":1665},{"style":128},[1666],{"type":68,"value":931},{"type":63,"tag":109,"props":1668,"children":1670},{"class":111,"line":1669},24,[1671],{"type":63,"tag":109,"props":1672,"children":1673},{"emptyLinePlaceholder":325},[1674],{"type":68,"value":328},{"type":63,"tag":109,"props":1676,"children":1678},{"class":111,"line":1677},25,[1679,1683,1687,1691,1695,1699,1703],{"type":63,"tag":109,"props":1680,"children":1681},{"style":116},[1682],{"type":68,"value":537},{"type":63,"tag":109,"props":1684,"children":1685},{"style":335},[1686],{"type":68,"value":542},{"type":63,"tag":109,"props":1688,"children":1689},{"style":128},[1690],{"type":68,"value":547},{"type":63,"tag":109,"props":1692,"children":1693},{"style":122},[1694],{"type":68,"value":348},{"type":63,"tag":109,"props":1696,"children":1697},{"style":554},[1698],{"type":68,"value":131},{"type":63,"tag":109,"props":1700,"children":1701},{"style":128},[1702],{"type":68,"value":561},{"type":63,"tag":109,"props":1704,"children":1705},{"style":122},[1706],{"type":68,"value":566},{"type":63,"tag":109,"props":1708,"children":1710},{"class":111,"line":1709},26,[1711,1715,1719],{"type":63,"tag":109,"props":1712,"children":1713},{"style":365},[1714],{"type":68,"value":575},{"type":63,"tag":109,"props":1716,"children":1717},{"style":122},[1718],{"type":68,"value":373},{"type":63,"tag":109,"props":1720,"children":1721},{"style":128},[1722],{"type":68,"value":353},{"type":63,"tag":109,"props":1724,"children":1726},{"class":111,"line":1725},27,[1727,1732,1737,1741],{"type":63,"tag":109,"props":1728,"children":1729},{"style":554},[1730],{"type":68,"value":1731},"    dot",{"type":63,"tag":109,"props":1733,"children":1734},{"style":128},[1735],{"type":68,"value":1736},"(observations",{"type":63,"tag":109,"props":1738,"children":1739},{"style":122},[1740],{"type":68,"value":136},{"type":63,"tag":109,"props":1742,"children":1743},{"style":122},[1744],{"type":68,"value":1575},{"type":63,"tag":109,"props":1746,"children":1748},{"class":111,"line":1747},28,[1749,1754,1758,1762,1767,1771],{"type":63,"tag":109,"props":1750,"children":1751},{"style":365},[1752],{"type":68,"value":1753},"      id",{"type":63,"tag":109,"props":1755,"children":1756},{"style":122},[1757],{"type":68,"value":373},{"type":63,"tag":109,"props":1759,"children":1760},{"style":122},[1761],{"type":68,"value":156},{"type":63,"tag":109,"props":1763,"children":1764},{"style":159},[1765],{"type":68,"value":1766},"observations",{"type":63,"tag":109,"props":1768,"children":1769},{"style":122},[1770],{"type":68,"value":387},{"type":63,"tag":109,"props":1772,"children":1773},{"style":122},[1774],{"type":68,"value":686},{"type":63,"tag":109,"props":1776,"children":1778},{"class":111,"line":1777},29,[1779,1784,1788,1792,1797,1801],{"type":63,"tag":109,"props":1780,"children":1781},{"style":365},[1782],{"type":68,"value":1783},"      x",{"type":63,"tag":109,"props":1785,"children":1786},{"style":122},[1787],{"type":68,"value":373},{"type":63,"tag":109,"props":1789,"children":1790},{"style":122},[1791],{"type":68,"value":156},{"type":63,"tag":109,"props":1793,"children":1794},{"style":159},[1795],{"type":68,"value":1796},"speed",{"type":63,"tag":109,"props":1798,"children":1799},{"style":122},[1800],{"type":68,"value":387},{"type":63,"tag":109,"props":1802,"children":1803},{"style":122},[1804],{"type":68,"value":686},{"type":63,"tag":109,"props":1806,"children":1808},{"class":111,"line":1807},30,[1809,1814,1818,1822,1827,1831],{"type":63,"tag":109,"props":1810,"children":1811},{"style":365},[1812],{"type":68,"value":1813},"      y",{"type":63,"tag":109,"props":1815,"children":1816},{"style":122},[1817],{"type":68,"value":373},{"type":63,"tag":109,"props":1819,"children":1820},{"style":122},[1821],{"type":68,"value":156},{"type":63,"tag":109,"props":1823,"children":1824},{"style":159},[1825],{"type":68,"value":1826},"efficiency",{"type":63,"tag":109,"props":1828,"children":1829},{"style":122},[1830],{"type":68,"value":387},{"type":63,"tag":109,"props":1832,"children":1833},{"style":122},[1834],{"type":68,"value":686},{"type":63,"tag":109,"props":1836,"children":1838},{"class":111,"line":1837},31,[1839,1844,1848,1852,1856,1860],{"type":63,"tag":109,"props":1840,"children":1841},{"style":365},[1842],{"type":68,"value":1843},"      key",{"type":63,"tag":109,"props":1845,"children":1846},{"style":122},[1847],{"type":68,"value":373},{"type":63,"tag":109,"props":1849,"children":1850},{"style":122},[1851],{"type":68,"value":156},{"type":63,"tag":109,"props":1853,"children":1854},{"style":159},[1855],{"type":68,"value":1651},{"type":63,"tag":109,"props":1857,"children":1858},{"style":122},[1859],{"type":68,"value":387},{"type":63,"tag":109,"props":1861,"children":1862},{"style":122},[1863],{"type":68,"value":686},{"type":63,"tag":109,"props":1865,"children":1867},{"class":111,"line":1866},32,[1868,1873,1877],{"type":63,"tag":109,"props":1869,"children":1870},{"style":122},[1871],{"type":68,"value":1872},"    }",{"type":63,"tag":109,"props":1874,"children":1875},{"style":128},[1876],{"type":68,"value":681},{"type":63,"tag":109,"props":1878,"children":1879},{"style":122},[1880],{"type":68,"value":686},{"type":63,"tag":109,"props":1882,"children":1884},{"class":111,"line":1883},33,[1885,1890],{"type":63,"tag":109,"props":1886,"children":1887},{"style":554},[1888],{"type":68,"value":1889},"    whenSelected",{"type":63,"tag":109,"props":1891,"children":1892},{"style":128},[1893],{"type":68,"value":1894},"(\n",{"type":63,"tag":109,"props":1896,"children":1898},{"class":111,"line":1897},34,[1899,1904,1908,1912],{"type":63,"tag":109,"props":1900,"children":1901},{"style":554},[1902],{"type":68,"value":1903},"      dot",{"type":63,"tag":109,"props":1905,"children":1906},{"style":128},[1907],{"type":68,"value":1736},{"type":63,"tag":109,"props":1909,"children":1910},{"style":122},[1911],{"type":68,"value":136},{"type":63,"tag":109,"props":1913,"children":1914},{"style":122},[1915],{"type":68,"value":1575},{"type":63,"tag":109,"props":1917,"children":1919},{"class":111,"line":1918},35,[1920,1925,1929,1933,1938,1942],{"type":63,"tag":109,"props":1921,"children":1922},{"style":365},[1923],{"type":68,"value":1924},"        id",{"type":63,"tag":109,"props":1926,"children":1927},{"style":122},[1928],{"type":68,"value":373},{"type":63,"tag":109,"props":1930,"children":1931},{"style":122},[1932],{"type":68,"value":156},{"type":63,"tag":109,"props":1934,"children":1935},{"style":159},[1936],{"type":68,"value":1937},"selected-observation",{"type":63,"tag":109,"props":1939,"children":1940},{"style":122},[1941],{"type":68,"value":387},{"type":63,"tag":109,"props":1943,"children":1944},{"style":122},[1945],{"type":68,"value":686},{"type":63,"tag":109,"props":1947,"children":1949},{"class":111,"line":1948},36,[1950,1955,1959,1963,1967,1971],{"type":63,"tag":109,"props":1951,"children":1952},{"style":365},[1953],{"type":68,"value":1954},"        x",{"type":63,"tag":109,"props":1956,"children":1957},{"style":122},[1958],{"type":68,"value":373},{"type":63,"tag":109,"props":1960,"children":1961},{"style":122},[1962],{"type":68,"value":156},{"type":63,"tag":109,"props":1964,"children":1965},{"style":159},[1966],{"type":68,"value":1796},{"type":63,"tag":109,"props":1968,"children":1969},{"style":122},[1970],{"type":68,"value":387},{"type":63,"tag":109,"props":1972,"children":1973},{"style":122},[1974],{"type":68,"value":686},{"type":63,"tag":109,"props":1976,"children":1978},{"class":111,"line":1977},37,[1979,1984,1988,1992,1996,2000],{"type":63,"tag":109,"props":1980,"children":1981},{"style":365},[1982],{"type":68,"value":1983},"        y",{"type":63,"tag":109,"props":1985,"children":1986},{"style":122},[1987],{"type":68,"value":373},{"type":63,"tag":109,"props":1989,"children":1990},{"style":122},[1991],{"type":68,"value":156},{"type":63,"tag":109,"props":1993,"children":1994},{"style":159},[1995],{"type":68,"value":1826},{"type":63,"tag":109,"props":1997,"children":1998},{"style":122},[1999],{"type":68,"value":387},{"type":63,"tag":109,"props":2001,"children":2002},{"style":122},[2003],{"type":68,"value":686},{"type":63,"tag":109,"props":2005,"children":2007},{"class":111,"line":2006},38,[2008,2013,2017,2021,2025,2029],{"type":63,"tag":109,"props":2009,"children":2010},{"style":365},[2011],{"type":68,"value":2012},"        key",{"type":63,"tag":109,"props":2014,"children":2015},{"style":122},[2016],{"type":68,"value":373},{"type":63,"tag":109,"props":2018,"children":2019},{"style":122},[2020],{"type":68,"value":156},{"type":63,"tag":109,"props":2022,"children":2023},{"style":159},[2024],{"type":68,"value":1651},{"type":63,"tag":109,"props":2026,"children":2027},{"style":122},[2028],{"type":68,"value":387},{"type":63,"tag":109,"props":2030,"children":2031},{"style":122},[2032],{"type":68,"value":686},{"type":63,"tag":109,"props":2034,"children":2036},{"class":111,"line":2035},39,[2037,2042,2046,2051],{"type":63,"tag":109,"props":2038,"children":2039},{"style":365},[2040],{"type":68,"value":2041},"        r",{"type":63,"tag":109,"props":2043,"children":2044},{"style":122},[2045],{"type":68,"value":373},{"type":63,"tag":109,"props":2047,"children":2048},{"style":403},[2049],{"type":68,"value":2050}," 7",{"type":63,"tag":109,"props":2052,"children":2053},{"style":122},[2054],{"type":68,"value":686},{"type":63,"tag":109,"props":2056,"children":2057},{"class":111,"line":27},[2058,2063,2067],{"type":63,"tag":109,"props":2059,"children":2060},{"style":122},[2061],{"type":68,"value":2062},"      }",{"type":63,"tag":109,"props":2064,"children":2065},{"style":128},[2066],{"type":68,"value":681},{"type":63,"tag":109,"props":2068,"children":2069},{"style":122},[2070],{"type":68,"value":686},{"type":63,"tag":109,"props":2072,"children":2074},{"class":111,"line":2073},41,[2075,2080],{"type":63,"tag":109,"props":2076,"children":2077},{"style":128},[2078],{"type":68,"value":2079},"      selection",{"type":63,"tag":109,"props":2081,"children":2082},{"style":122},[2083],{"type":68,"value":686},{"type":63,"tag":109,"props":2085,"children":2087},{"class":111,"line":2086},42,[2088,2093],{"type":63,"tag":109,"props":2089,"children":2090},{"style":128},[2091],{"type":68,"value":2092},"    )",{"type":63,"tag":109,"props":2094,"children":2095},{"style":122},[2096],{"type":68,"value":686},{"type":63,"tag":109,"props":2098,"children":2100},{"class":111,"line":2099},43,[2101,2105],{"type":63,"tag":109,"props":2102,"children":2103},{"style":128},[2104],{"type":68,"value":768},{"type":63,"tag":109,"props":2106,"children":2107},{"style":122},[2108],{"type":68,"value":686},{"type":63,"tag":109,"props":2110,"children":2112},{"class":111,"line":2111},44,[2113,2117,2121,2125,2129,2133,2137],{"type":63,"tag":109,"props":2114,"children":2115},{"style":365},[2116],{"type":68,"value":781},{"type":63,"tag":109,"props":2118,"children":2119},{"style":122},[2120],{"type":68,"value":373},{"type":63,"tag":109,"props":2122,"children":2123},{"style":122},[2124],{"type":68,"value":125},{"type":63,"tag":109,"props":2126,"children":2127},{"style":365},[2128],{"type":68,"value":794},{"type":63,"tag":109,"props":2130,"children":2131},{"style":122},[2132],{"type":68,"value":373},{"type":63,"tag":109,"props":2134,"children":2135},{"style":128},[2136],{"type":68,"value":838},{"type":63,"tag":109,"props":2138,"children":2139},{"style":122},[2140],{"type":68,"value":808},{"type":63,"tag":109,"props":2142,"children":2144},{"class":111,"line":2143},45,[2145,2149,2153,2157,2161,2165,2169],{"type":63,"tag":109,"props":2146,"children":2147},{"style":365},[2148],{"type":68,"value":817},{"type":63,"tag":109,"props":2150,"children":2151},{"style":122},[2152],{"type":68,"value":373},{"type":63,"tag":109,"props":2154,"children":2155},{"style":122},[2156],{"type":68,"value":125},{"type":63,"tag":109,"props":2158,"children":2159},{"style":365},[2160],{"type":68,"value":794},{"type":63,"tag":109,"props":2162,"children":2163},{"style":122},[2164],{"type":68,"value":373},{"type":63,"tag":109,"props":2166,"children":2167},{"style":128},[2168],{"type":68,"value":838},{"type":63,"tag":109,"props":2170,"children":2171},{"style":122},[2172],{"type":68,"value":808},{"type":63,"tag":109,"props":2174,"children":2176},{"class":111,"line":2175},46,[2177,2182],{"type":63,"tag":109,"props":2178,"children":2179},{"style":128},[2180],{"type":68,"value":2181},"  selection",{"type":63,"tag":109,"props":2183,"children":2184},{"style":122},[2185],{"type":68,"value":686},{"type":63,"tag":109,"props":2187,"children":2189},{"class":111,"line":2188},47,[2190,2194],{"type":63,"tag":109,"props":2191,"children":2192},{"style":122},[2193],{"type":68,"value":926},{"type":63,"tag":109,"props":2195,"children":2196},{"style":128},[2197],{"type":68,"value":931},{"type":63,"tag":71,"props":2199,"children":2200},{},[2201],{"type":68,"value":2202},"Rebuild the definition with the accepted controlled value. A signal is a snapshot and callback, not a hidden store.",{"type":63,"tag":944,"props":2204,"children":2206},{"id":2205},"synchronize-semantic-values-not-pixels",[2207],{"type":68,"value":2208},"Synchronize semantic values, not pixels",{"type":63,"tag":71,"props":2210,"children":2211},{},[2212,2214,2220],{"type":68,"value":2213},"Use one ",{"type":63,"tag":105,"props":2215,"children":2217},{"className":2216},[],[2218],{"type":68,"value":2219},"createChartCursor",{"type":68,"value":2221}," controller across definitions when charts should resolve the same x\u002Fy value through their own scales. Keep crosshair presentation in each definition. Never copy DOM coordinates or mutate another chart's SVG.",{"type":63,"tag":944,"props":2223,"children":2225},{"id":2224},"add-portaling-only-for-containment-boundaries",[2226],{"type":68,"value":2227},"Add portaling only for containment boundaries",{"type":63,"tag":71,"props":2229,"children":2230},{},[2231,2233,2239],{"type":68,"value":2232},"Use native tooltip content first. Add ",{"type":63,"tag":105,"props":2234,"children":2236},{"className":2235},[],[2237],{"type":68,"value":2238},"portal",{"type":68,"value":2240}," when overflow, transforms, or stacking contexts clip the surface. Use framework adapter tooltip bodies only when the product requires rich interactive content.",{"type":63,"tag":85,"props":2242,"children":2244},{"id":2243},"common-mistakes",[2245],{"type":68,"value":2246},"Common Mistakes",{"type":63,"tag":944,"props":2248,"children":2250},{"id":2249},"critical-mutating-svg-for-focus-presentation",[2251],{"type":68,"value":2252},"CRITICAL Mutating SVG for focus presentation",{"type":63,"tag":71,"props":2254,"children":2255},{},[2256],{"type":68,"value":2257},"Wrong:",{"type":63,"tag":97,"props":2259,"children":2261},{"className":99,"code":2260,"language":101,"meta":102,"style":102},"onRender={({ svg }) => svg.insertBefore(activeBand, svg.firstChild)}\n",[2262],{"type":63,"tag":105,"props":2263,"children":2264},{"__ignoreMap":102},[2265],{"type":63,"tag":109,"props":2266,"children":2267},{"class":111,"line":112},[2268,2273,2278,2282,2286,2291,2295,2300,2304,2309],{"type":63,"tag":109,"props":2269,"children":2270},{"style":128},[2271],{"type":68,"value":2272},"onRender",{"type":63,"tag":109,"props":2274,"children":2275},{"style":122},[2276],{"type":68,"value":2277},"={",{"type":63,"tag":109,"props":2279,"children":2280},{"style":128},[2281],{"type":68,"value":561},{"type":63,"tag":109,"props":2283,"children":2284},{"style":122},[2285],{"type":68,"value":704},{"type":63,"tag":109,"props":2287,"children":2288},{"style":128},[2289],{"type":68,"value":2290}," svg",{"type":63,"tag":109,"props":2292,"children":2293},{"style":122},[2294],{"type":68,"value":146},{"type":63,"tag":109,"props":2296,"children":2297},{"style":128},[2298],{"type":68,"value":2299},") => svg.insertBefore(activeBand",{"type":63,"tag":109,"props":2301,"children":2302},{"style":122},[2303],{"type":68,"value":136},{"type":63,"tag":109,"props":2305,"children":2306},{"style":128},[2307],{"type":68,"value":2308}," svg.firstChild)",{"type":63,"tag":109,"props":2310,"children":2311},{"style":122},[2312],{"type":68,"value":2313},"}\n",{"type":63,"tag":71,"props":2315,"children":2316},{},[2317],{"type":68,"value":2318},"Correct:",{"type":63,"tag":97,"props":2320,"children":2322},{"className":99,"code":2321,"language":101,"meta":102,"style":102},"marks: [\n  whenFocused(bandX(rows, { x: 'date' }), { match: 'x' }),\n  lineY(rows, channels),\n]\n",[2323],{"type":63,"tag":105,"props":2324,"children":2325},{"__ignoreMap":102},[2326,2342,2442,2467],{"type":63,"tag":109,"props":2327,"children":2328},{"class":111,"line":112},[2329,2334,2338],{"type":63,"tag":109,"props":2330,"children":2331},{"style":1400},[2332],{"type":68,"value":2333},"marks",{"type":63,"tag":109,"props":2335,"children":2336},{"style":122},[2337],{"type":68,"value":373},{"type":63,"tag":109,"props":2339,"children":2340},{"style":128},[2341],{"type":68,"value":353},{"type":63,"tag":109,"props":2343,"children":2344},{"class":111,"line":169},[2345,2350,2354,2359,2363,2367,2371,2375,2379,2383,2388,2392,2396,2400,2404,2408,2413,2417,2421,2426,2430,2434,2438],{"type":63,"tag":109,"props":2346,"children":2347},{"style":554},[2348],{"type":68,"value":2349},"  whenFocused",{"type":63,"tag":109,"props":2351,"children":2352},{"style":128},[2353],{"type":68,"value":561},{"type":63,"tag":109,"props":2355,"children":2356},{"style":554},[2357],{"type":68,"value":2358},"bandX",{"type":63,"tag":109,"props":2360,"children":2361},{"style":128},[2362],{"type":68,"value":597},{"type":63,"tag":109,"props":2364,"children":2365},{"style":122},[2366],{"type":68,"value":136},{"type":63,"tag":109,"props":2368,"children":2369},{"style":122},[2370],{"type":68,"value":125},{"type":63,"tag":109,"props":2372,"children":2373},{"style":365},[2374],{"type":68,"value":610},{"type":63,"tag":109,"props":2376,"children":2377},{"style":122},[2378],{"type":68,"value":373},{"type":63,"tag":109,"props":2380,"children":2381},{"style":122},[2382],{"type":68,"value":156},{"type":63,"tag":109,"props":2384,"children":2385},{"style":159},[2386],{"type":68,"value":2387},"date",{"type":63,"tag":109,"props":2389,"children":2390},{"style":122},[2391],{"type":68,"value":387},{"type":63,"tag":109,"props":2393,"children":2394},{"style":122},[2395],{"type":68,"value":146},{"type":63,"tag":109,"props":2397,"children":2398},{"style":128},[2399],{"type":68,"value":681},{"type":63,"tag":109,"props":2401,"children":2402},{"style":122},[2403],{"type":68,"value":136},{"type":63,"tag":109,"props":2405,"children":2406},{"style":122},[2407],{"type":68,"value":125},{"type":63,"tag":109,"props":2409,"children":2410},{"style":365},[2411],{"type":68,"value":2412}," match",{"type":63,"tag":109,"props":2414,"children":2415},{"style":122},[2416],{"type":68,"value":373},{"type":63,"tag":109,"props":2418,"children":2419},{"style":122},[2420],{"type":68,"value":156},{"type":63,"tag":109,"props":2422,"children":2423},{"style":159},[2424],{"type":68,"value":2425},"x",{"type":63,"tag":109,"props":2427,"children":2428},{"style":122},[2429],{"type":68,"value":387},{"type":63,"tag":109,"props":2431,"children":2432},{"style":122},[2433],{"type":68,"value":146},{"type":63,"tag":109,"props":2435,"children":2436},{"style":128},[2437],{"type":68,"value":681},{"type":63,"tag":109,"props":2439,"children":2440},{"style":122},[2441],{"type":68,"value":686},{"type":63,"tag":109,"props":2443,"children":2444},{"class":111,"line":207},[2445,2450,2454,2458,2463],{"type":63,"tag":109,"props":2446,"children":2447},{"style":554},[2448],{"type":68,"value":2449},"  lineY",{"type":63,"tag":109,"props":2451,"children":2452},{"style":128},[2453],{"type":68,"value":597},{"type":63,"tag":109,"props":2455,"children":2456},{"style":122},[2457],{"type":68,"value":136},{"type":63,"tag":109,"props":2459,"children":2460},{"style":128},[2461],{"type":68,"value":2462}," channels)",{"type":63,"tag":109,"props":2464,"children":2465},{"style":122},[2466],{"type":68,"value":686},{"type":63,"tag":109,"props":2468,"children":2469},{"class":111,"line":245},[2470],{"type":63,"tag":109,"props":2471,"children":2472},{"style":128},[2473],{"type":68,"value":520},{"type":63,"tag":71,"props":2475,"children":2476},{},[2477],{"type":68,"value":2478},"DOM mutation bypasses scene identity, SSR, Canvas, React Native, motion, and cleanup. Current focus marks replace an older workaround that still appears in issue examples.",{"type":63,"tag":71,"props":2480,"children":2481},{},[2482,2484,2490],{"type":68,"value":2483},"Source: GitHub issue 9; ",{"type":63,"tag":105,"props":2485,"children":2487},{"className":2486},[],[2488],{"type":68,"value":2489},"API-FRICTION.md",{"type":68,"value":2491}," F-178",{"type":63,"tag":944,"props":2493,"children":2495},{"id":2494},"high-focusing-a-point-less-rule",[2496],{"type":68,"value":2497},"HIGH Focusing a point-less rule",{"type":63,"tag":71,"props":2499,"children":2500},{},[2501],{"type":68,"value":2257},{"type":63,"tag":97,"props":2503,"children":2505},{"className":99,"code":2504,"language":101,"meta":102,"style":102},"whenFocused(ruleX(dates), { match: 'x' })\n",[2506],{"type":63,"tag":105,"props":2507,"children":2508},{"__ignoreMap":102},[2509],{"type":63,"tag":109,"props":2510,"children":2511},{"class":111,"line":112},[2512,2517,2521,2526,2531,2535,2539,2543,2547,2551,2555,2559,2563],{"type":63,"tag":109,"props":2513,"children":2514},{"style":554},[2515],{"type":68,"value":2516},"whenFocused",{"type":63,"tag":109,"props":2518,"children":2519},{"style":128},[2520],{"type":68,"value":561},{"type":63,"tag":109,"props":2522,"children":2523},{"style":554},[2524],{"type":68,"value":2525},"ruleX",{"type":63,"tag":109,"props":2527,"children":2528},{"style":128},[2529],{"type":68,"value":2530},"(dates)",{"type":63,"tag":109,"props":2532,"children":2533},{"style":122},[2534],{"type":68,"value":136},{"type":63,"tag":109,"props":2536,"children":2537},{"style":122},[2538],{"type":68,"value":125},{"type":63,"tag":109,"props":2540,"children":2541},{"style":365},[2542],{"type":68,"value":2412},{"type":63,"tag":109,"props":2544,"children":2545},{"style":122},[2546],{"type":68,"value":373},{"type":63,"tag":109,"props":2548,"children":2549},{"style":122},[2550],{"type":68,"value":156},{"type":63,"tag":109,"props":2552,"children":2553},{"style":159},[2554],{"type":68,"value":2425},{"type":63,"tag":109,"props":2556,"children":2557},{"style":122},[2558],{"type":68,"value":387},{"type":63,"tag":109,"props":2560,"children":2561},{"style":122},[2562],{"type":68,"value":146},{"type":63,"tag":109,"props":2564,"children":2565},{"style":128},[2566],{"type":68,"value":931},{"type":63,"tag":71,"props":2568,"children":2569},{},[2570],{"type":68,"value":2318},{"type":63,"tag":97,"props":2572,"children":2574},{"className":99,"code":2573,"language":101,"meta":102,"style":102},"focusGuideX(rows, { x: 'date', y: 'value', xRule: {} })\n",[2575],{"type":63,"tag":105,"props":2576,"children":2577},{"__ignoreMap":102},[2578],{"type":63,"tag":109,"props":2579,"children":2580},{"class":111,"line":112},[2581,2586,2590,2594,2598,2602,2606,2610,2614,2618,2622,2626,2630,2634,2638,2642,2646,2651,2655,2660,2664],{"type":63,"tag":109,"props":2582,"children":2583},{"style":554},[2584],{"type":68,"value":2585},"focusGuideX",{"type":63,"tag":109,"props":2587,"children":2588},{"style":128},[2589],{"type":68,"value":597},{"type":63,"tag":109,"props":2591,"children":2592},{"style":122},[2593],{"type":68,"value":136},{"type":63,"tag":109,"props":2595,"children":2596},{"style":122},[2597],{"type":68,"value":125},{"type":63,"tag":109,"props":2599,"children":2600},{"style":365},[2601],{"type":68,"value":610},{"type":63,"tag":109,"props":2603,"children":2604},{"style":122},[2605],{"type":68,"value":373},{"type":63,"tag":109,"props":2607,"children":2608},{"style":122},[2609],{"type":68,"value":156},{"type":63,"tag":109,"props":2611,"children":2612},{"style":159},[2613],{"type":68,"value":2387},{"type":63,"tag":109,"props":2615,"children":2616},{"style":122},[2617],{"type":68,"value":387},{"type":63,"tag":109,"props":2619,"children":2620},{"style":122},[2621],{"type":68,"value":136},{"type":63,"tag":109,"props":2623,"children":2624},{"style":365},[2625],{"type":68,"value":636},{"type":63,"tag":109,"props":2627,"children":2628},{"style":122},[2629],{"type":68,"value":373},{"type":63,"tag":109,"props":2631,"children":2632},{"style":122},[2633],{"type":68,"value":156},{"type":63,"tag":109,"props":2635,"children":2636},{"style":159},[2637],{"type":68,"value":649},{"type":63,"tag":109,"props":2639,"children":2640},{"style":122},[2641],{"type":68,"value":387},{"type":63,"tag":109,"props":2643,"children":2644},{"style":122},[2645],{"type":68,"value":136},{"type":63,"tag":109,"props":2647,"children":2648},{"style":365},[2649],{"type":68,"value":2650}," xRule",{"type":63,"tag":109,"props":2652,"children":2653},{"style":122},[2654],{"type":68,"value":373},{"type":63,"tag":109,"props":2656,"children":2657},{"style":122},[2658],{"type":68,"value":2659}," {}",{"type":63,"tag":109,"props":2661,"children":2662},{"style":122},[2663],{"type":68,"value":146},{"type":63,"tag":109,"props":2665,"children":2666},{"style":128},[2667],{"type":68,"value":931},{"type":63,"tag":71,"props":2669,"children":2670},{},[2671],{"type":68,"value":2672},"Rules emit no interaction points, so a focus filter has no candidate identity. Current focus-guide primitives replace this legacy pattern.",{"type":63,"tag":71,"props":2674,"children":2675},{},[2676,2678,2683],{"type":68,"value":2677},"Source: GitHub issue 32; ",{"type":63,"tag":105,"props":2679,"children":2681},{"className":2680},[],[2682],{"type":68,"value":2489},{"type":68,"value":2684}," F-237",{"type":63,"tag":944,"props":2686,"children":2688},{"id":2687},"critical-treating-callbacks-as-complete-behavior",[2689],{"type":68,"value":2690},"CRITICAL Treating callbacks as complete behavior",{"type":63,"tag":71,"props":2692,"children":2693},{},[2694,2696,2702],{"type":68,"value":2695},"Wrong: attach only an ",{"type":63,"tag":105,"props":2697,"children":2699},{"className":2698},[],[2700],{"type":68,"value":2701},"onRangeChange",{"type":68,"value":2703}," or key callback to an overlay.",{"type":63,"tag":71,"props":2705,"children":2706},{},[2707,2709,2715,2717,2723,2724,2730,2731,2737,2739,2745],{"type":68,"value":2708},"Correct: use the matching controlled control (",{"type":63,"tag":105,"props":2710,"children":2712},{"className":2711},[],[2713],{"type":68,"value":2714},"keyedSelection",{"type":68,"value":2716},", ",{"type":63,"tag":105,"props":2718,"children":2720},{"className":2719},[],[2721],{"type":68,"value":2722},"continuousCursor",{"type":68,"value":2716},{"type":63,"tag":105,"props":2725,"children":2727},{"className":2726},[],[2728],{"type":68,"value":2729},"handleX",{"type":68,"value":2716},{"type":63,"tag":105,"props":2732,"children":2734},{"className":2733},[],[2735],{"type":68,"value":2736},"brushX",{"type":68,"value":2738},", or ",{"type":63,"tag":105,"props":2740,"children":2742},{"className":2741},[],[2743],{"type":68,"value":2744},"zoomX",{"type":68,"value":2746},") and store its accepted semantic value in application state.",{"type":63,"tag":71,"props":2748,"children":2749},{},[2750],{"type":68,"value":2751},"A callback alone does not define capture, clamping, cancellation, keyboard operations, or ownership.",{"type":63,"tag":71,"props":2753,"children":2754},{},[2755,2757,2762,2764],{"type":68,"value":2756},"Source: ",{"type":63,"tag":105,"props":2758,"children":2760},{"className":2759},[],[2761],{"type":68,"value":2489},{"type":68,"value":2763}," F-075; ",{"type":63,"tag":105,"props":2765,"children":2767},{"className":2766},[],[2768],{"type":68,"value":2769},"docs\u002Fguides\u002Finteractions-and-selections.md",{"type":63,"tag":944,"props":2771,"children":2773},{"id":2772},"high-keeping-tooltips-inside-clipped-ancestors",[2774],{"type":68,"value":2775},"HIGH Keeping tooltips inside clipped ancestors",{"type":63,"tag":71,"props":2777,"children":2778},{},[2779],{"type":68,"value":2257},{"type":63,"tag":97,"props":2781,"children":2783},{"className":99,"code":2782,"language":101,"meta":102,"style":102},"tooltip: {\n  use: tooltip\n}\n",[2784],{"type":63,"tag":105,"props":2785,"children":2786},{"__ignoreMap":102},[2787,2803,2820],{"type":63,"tag":109,"props":2788,"children":2789},{"class":111,"line":112},[2790,2795,2799],{"type":63,"tag":109,"props":2791,"children":2792},{"style":1400},[2793],{"type":68,"value":2794},"tooltip",{"type":63,"tag":109,"props":2796,"children":2797},{"style":122},[2798],{"type":68,"value":373},{"type":63,"tag":109,"props":2800,"children":2801},{"style":122},[2802],{"type":68,"value":1575},{"type":63,"tag":109,"props":2804,"children":2805},{"class":111,"line":169},[2806,2811,2815],{"type":63,"tag":109,"props":2807,"children":2808},{"style":1400},[2809],{"type":68,"value":2810},"  use",{"type":63,"tag":109,"props":2812,"children":2813},{"style":122},[2814],{"type":68,"value":373},{"type":63,"tag":109,"props":2816,"children":2817},{"style":128},[2818],{"type":68,"value":2819}," tooltip\n",{"type":63,"tag":109,"props":2821,"children":2822},{"class":111,"line":207},[2823],{"type":63,"tag":109,"props":2824,"children":2825},{"style":122},[2826],{"type":68,"value":2313},{"type":63,"tag":71,"props":2828,"children":2829},{},[2830],{"type":68,"value":2318},{"type":63,"tag":97,"props":2832,"children":2834},{"className":99,"code":2833,"language":101,"meta":102,"style":102},"tooltip: {\n  use: (tooltip, portal)\n}\n",[2835],{"type":63,"tag":105,"props":2836,"children":2837},{"__ignoreMap":102},[2838,2853,2885],{"type":63,"tag":109,"props":2839,"children":2840},{"class":111,"line":112},[2841,2845,2849],{"type":63,"tag":109,"props":2842,"children":2843},{"style":1400},[2844],{"type":68,"value":2794},{"type":63,"tag":109,"props":2846,"children":2847},{"style":122},[2848],{"type":68,"value":373},{"type":63,"tag":109,"props":2850,"children":2851},{"style":122},[2852],{"type":68,"value":1575},{"type":63,"tag":109,"props":2854,"children":2855},{"class":111,"line":169},[2856,2860,2864,2868,2872,2876,2881],{"type":63,"tag":109,"props":2857,"children":2858},{"style":1400},[2859],{"type":68,"value":2810},{"type":63,"tag":109,"props":2861,"children":2862},{"style":122},[2863],{"type":68,"value":373},{"type":63,"tag":109,"props":2865,"children":2866},{"style":365},[2867],{"type":68,"value":1555},{"type":63,"tag":109,"props":2869,"children":2870},{"style":128},[2871],{"type":68,"value":2794},{"type":63,"tag":109,"props":2873,"children":2874},{"style":122},[2875],{"type":68,"value":136},{"type":63,"tag":109,"props":2877,"children":2878},{"style":128},[2879],{"type":68,"value":2880}," portal",{"type":63,"tag":109,"props":2882,"children":2883},{"style":365},[2884],{"type":68,"value":931},{"type":63,"tag":109,"props":2886,"children":2887},{"class":111,"line":207},[2888],{"type":63,"tag":109,"props":2889,"children":2890},{"style":122},[2891],{"type":68,"value":2313},{"type":63,"tag":71,"props":2893,"children":2894},{},[2895],{"type":68,"value":2896},"Overflow, transforms, and stacking contexts can trap a correctly positioned tooltip.",{"type":63,"tag":71,"props":2898,"children":2899},{},[2900,2901,2906,2908],{"type":68,"value":2756},{"type":63,"tag":105,"props":2902,"children":2904},{"className":2903},[],[2905],{"type":68,"value":2489},{"type":68,"value":2907}," F-133; ",{"type":63,"tag":105,"props":2909,"children":2911},{"className":2910},[],[2912],{"type":68,"value":2913},"docs\u002Fguides\u002Ftooltips-and-focus.md",{"type":63,"tag":944,"props":2915,"children":2917},{"id":2916},"high-letting-decorative-layers-own-duplicate-points",[2918],{"type":68,"value":2919},"HIGH Letting decorative layers own duplicate points",{"type":63,"tag":71,"props":2921,"children":2922},{},[2923],{"type":68,"value":2924},"Wrong: make every area, line, dot, label, and highlight layer over one observation independently focusable.",{"type":63,"tag":71,"props":2926,"children":2927},{},[2928,2930,2936,2937,2942,2943,2949],{"type":68,"value":2929},"Correct: choose one semantic interaction owner and use ",{"type":63,"tag":105,"props":2931,"children":2933},{"className":2932},[],[2934],{"type":68,"value":2935},"decorative",{"type":68,"value":2716},{"type":63,"tag":105,"props":2938,"children":2940},{"className":2939},[],[2941],{"type":68,"value":2516},{"type":68,"value":2738},{"type":63,"tag":105,"props":2944,"children":2946},{"className":2945},[],[2947],{"type":68,"value":2948},"whenSelected",{"type":68,"value":2950}," for supporting presentation.",{"type":63,"tag":71,"props":2952,"children":2953},{},[2954],{"type":68,"value":2955},"Duplicate points create repeated keyboard stops, focus candidates, activations, and tooltip rows.",{"type":63,"tag":71,"props":2957,"children":2958},{},[2959,2960,2965,2967],{"type":68,"value":2756},{"type":63,"tag":105,"props":2961,"children":2963},{"className":2962},[],[2964],{"type":68,"value":2489},{"type":68,"value":2966}," F-218; ",{"type":63,"tag":105,"props":2968,"children":2970},{"className":2969},[],[2971],{"type":68,"value":2913},{"type":63,"tag":944,"props":2973,"children":2975},{"id":2974},"high-tension-rich-interaction-versus-portable-rendering",[2976],{"type":68,"value":2977},"HIGH Tension: rich interaction versus portable rendering",{"type":63,"tag":71,"props":2979,"children":2980},{},[2981],{"type":68,"value":2982},"Prefer marks, controls, semantic state, and host extensions over DOM-only overlays. Verify pointer and keyboard paths, static fallback, teardown, and any native equivalent.",{"type":63,"tag":71,"props":2984,"children":2985},{},[2986,2988,2994,2996],{"type":68,"value":2987},"See also: ",{"type":63,"tag":105,"props":2989,"children":2991},{"className":2990},[],[2992],{"type":68,"value":2993},"ship-accessible-charts\u002FSKILL.md",{"type":68,"value":2995}," and ",{"type":63,"tag":105,"props":2997,"children":2999},{"className":2998},[],[3000],{"type":68,"value":3001},"extend-tanstack-charts\u002FSKILL.md",{"type":63,"tag":85,"props":3003,"children":3005},{"id":3004},"references",[3006],{"type":68,"value":3007},"References",{"type":63,"tag":3009,"props":3010,"children":3011},"ul",{},[3012],{"type":63,"tag":3013,"props":3014,"children":3015},"li",{},[3016],{"type":63,"tag":1023,"props":3017,"children":3018},{"href":1025},[3019],{"type":68,"value":3020},"Interaction ownership and state machines",{"type":63,"tag":71,"props":3022,"children":3023},{},[3024,3025,3031,3032,3037,3039,3045],{"type":68,"value":2987},{"type":63,"tag":105,"props":3026,"children":3028},{"className":3027},[],[3029],{"type":68,"value":3030},"coordinate-charts-with-tanstack\u002FSKILL.md",{"type":68,"value":2716},{"type":63,"tag":105,"props":3033,"children":3035},{"className":3034},[],[3036],{"type":68,"value":2993},{"type":68,"value":3038},", and ",{"type":63,"tag":105,"props":3040,"children":3042},{"className":3041},[],[3043],{"type":68,"value":3044},"update-and-animate-charts\u002FSKILL.md",{"type":68,"value":3046}," — interaction requires explicit cross-surface ownership, keyboard parity, and stable identity across updates.",{"type":63,"tag":3048,"props":3049,"children":3050},"style",{},[3051],{"type":68,"value":3052},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":3054,"total":3194},[3055,3069,3081,3093,3105,3120,3130,3140,3150,3163,3173,3184],{"slug":3056,"name":3056,"fn":3057,"description":3058,"org":3059,"tags":3060,"stars":3066,"repoUrl":3067,"updatedAt":3068},"aggregation","perform data aggregation in TanStack Table","Aggregate TanStack Table columns independently of grouping, including grand totals, caller-selected row totals, multiple keyed aggregations, custom context-based definitions, grouped merges, manual values, and worker constraints.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3061,3064,3065],{"name":3062,"slug":3063,"type":15},"Data Analysis","data-analysis",{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},28175,"https:\u002F\u002Fgithub.com\u002FTanStack\u002Ftable","2026-08-11T04:05:39.647403",{"slug":3070,"name":3070,"fn":3071,"description":3072,"org":3073,"tags":3074,"stars":3066,"repoUrl":3067,"updatedAt":3080},"api-not-found","diagnose TanStack Table API errors","Diagnose missing TanStack Table v9 exports, options, state slices, and instance methods. Load before inventing an API when code sees a type error, undefined feature method, absent object key, adapter mismatch, or v8-shaped example.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3075,3078,3079],{"name":3076,"slug":3077,"type":15},"Debugging","debugging",{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-08-11T04:05:45.454347",{"slug":3082,"name":3082,"fn":3083,"description":3084,"org":3085,"tags":3086,"stars":3066,"repoUrl":3067,"updatedAt":3092},"cell-selection","select rectangular cell ranges in tables","Select, add, and subtract rectangular cell ranges with cellSelectionFeature: ordered include\u002Fexclude operations keyed by row and column id, modifier dragging, final positive bounds, selection edges, render-order resolution under pinning, and autoResetCellSelection. Load for spreadsheet-style selection, “select all except” behavior, unexpected range changes after sorting or reordering, drag performance, or copy-to-clipboard.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3087,3088,3089],{"name":3062,"slug":3063,"type":15},{"name":9,"slug":8,"type":15},{"name":3090,"slug":3091,"type":15},"UI Components","ui-components","2026-08-11T04:05:18.454719",{"slug":3094,"name":3094,"fn":3095,"description":3096,"org":3097,"tags":3098,"stars":3066,"repoUrl":3067,"updatedAt":3104},"cell-spanning","configure cell spanning in TanStack Table","Merge adjacent body cells with cellSpanningFeature: value-based rowSpan opt-in per column via spanRows, per-row colSpan via spanColumns, and the covered-cell convention where a span of 0 means skip the cell. Load for merged data grids, spans that disappear after sorting or paginating, ragged table rows, or a cell that unexpectedly merges down the whole tbody.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3099,3101,3102,3103],{"name":3100,"slug":32,"type":15},"Data Visualization",{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":3090,"slug":3091,"type":15},"2026-08-11T04:05:16.471567",{"slug":3106,"name":3106,"fn":3107,"description":3108,"org":3109,"tags":3110,"stars":3066,"repoUrl":3067,"updatedAt":3119},"client-vs-server","manage TanStack Table data pipelines","Choose client or server ownership for filtering, grouping, sorting, expanding, and pagination in TanStack Table v9. Load for manual* flags, mixed pipelines, server counts, or deciding which dataset each row-model stage receives.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3111,3114,3115,3118],{"name":3112,"slug":3113,"type":15},"Data Pipeline","data-pipeline",{"name":21,"slug":22,"type":15},{"name":3116,"slug":3117,"type":15},"Performance","performance",{"name":9,"slug":8,"type":15},"2026-08-11T04:05:25.45112",{"slug":3121,"name":3121,"fn":3122,"description":3123,"org":3124,"tags":3125,"stars":3066,"repoUrl":3067,"updatedAt":3129},"column-faceting","build faceted filter UIs","Build faceted filter UIs with columnFacetingFeature, facetedRowModel, facetedUniqueValues, and facetedMinMaxValues. Load for facet counts, numeric ranges, own-filter exclusion, or server-page facet completeness.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3126,3127,3128],{"name":3100,"slug":32,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-08-11T04:05:21.505333",{"slug":3131,"name":3131,"fn":3132,"description":3133,"org":3134,"tags":3135,"stars":3066,"repoUrl":3067,"updatedAt":3139},"column-filtering","implement column filtering in TanStack Table","Filter columns with columnFilteringFeature, filteredRowModel, filterFns, filterMeta, nested-row direction, and manualFiltering. Load for accessor compatibility, controlled filter updaters, fuzzy metadata, or client\u002Fserver ownership.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3136,3137,3138],{"name":3062,"slug":3063,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-08-11T04:05:33.684468",{"slug":3141,"name":3141,"fn":3142,"description":3143,"org":3144,"tags":3145,"stars":3066,"repoUrl":3067,"updatedAt":3149},"column-ordering","manage TanStack Table column ordering","Control TanStack Table v9 leaf columnOrder with stable IDs while accounting for pinning regions, visibility, and groupedColumnMode precedence. Load for drag-and-drop columns or rendered order that differs from state.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3146,3147,3148],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":3090,"slug":3091,"type":15},"2026-08-11T04:05:43.445905",{"slug":3151,"name":3151,"fn":3152,"description":3153,"org":3154,"tags":3155,"stars":3066,"repoUrl":3067,"updatedAt":3162},"column-pinning","configure column pinning in TanStack Table","Pin columns into logical start, center, and end regions with columnPinningFeature and renderer-owned sticky CSS. Load for RTL offsets, z-index, backgrounds, overflow, widths, gaps, or overlaps.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3156,3159,3160,3161],{"name":3157,"slug":3158,"type":15},"CSS","css",{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":3090,"slug":3091,"type":15},"2026-08-11T04:05:35.453858",{"slug":3164,"name":3164,"fn":3165,"description":3166,"org":3167,"tags":3168,"stars":3066,"repoUrl":3067,"updatedAt":3172},"column-resizing","implement column resizing in TanStack Table","Wire columnResizingFeature, header.getResizeHandler, resize mode and direction, pointer or touch events, and performant CSS-variable updates. Load when resize state changes but widths do not, or large tables resize slowly.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3169,3170,3171],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":3090,"slug":3091,"type":15},"2026-08-11T04:05:31.46447",{"slug":3174,"name":3174,"fn":3175,"description":3176,"org":3177,"tags":3178,"stars":3066,"repoUrl":3067,"updatedAt":3183},"column-sizing","configure column sizing in TanStack Table","Use columnSizingFeature numeric size, minSize, maxSize, getSize, getStart, getAfter, and total-size APIs in table, grid, or flex CSS. Load for auto or percentage misconceptions and sizing\u002Fpinning layout mismatch.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3179,3180,3181,3182],{"name":3157,"slug":3158,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":3090,"slug":3091,"type":15},"2026-08-11T04:05:28.559861",{"slug":3185,"name":3185,"fn":3186,"description":3187,"org":3188,"tags":3189,"stars":3066,"repoUrl":3067,"updatedAt":3193},"column-visibility","manage column visibility in TanStack Table","Hide columns with columnVisibilityFeature while rendering visibility-aware header, column, and cell collections. Load when hidden columns remain in the DOM, false-versus-absent state is confused, or enableHiding is misunderstood.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3190,3191,3192],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":3090,"slug":3091,"type":15},"2026-08-11T04:05:27.479925",139,{"items":3196,"total":523},[3197,3204,3215,3226,3240,3251,3262],{"slug":4,"name":4,"fn":5,"description":6,"org":3198,"tags":3199,"stars":23,"repoUrl":24,"updatedAt":25},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3200,3201,3202,3203],{"name":17,"slug":18,"type":15},{"name":21,"slug":22,"type":15},{"name":13,"slug":14,"type":15},{"name":9,"slug":8,"type":15},{"slug":3205,"name":3205,"fn":3206,"description":3207,"org":3208,"tags":3209,"stars":23,"repoUrl":24,"updatedAt":3214},"compose-marks-and-views","compose marks and views in TanStack Charts","Translate semantic encodings into TanStack Charts marks, layers, annotations, facets, and coordinated views. Load when choosing marks, combining layers, assigning interaction-point ownership, or deciding whether a custom mark is justified.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3210,3211,3212,3213],{"name":17,"slug":18,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":3090,"slug":3091,"type":15},"2026-08-15T03:47:30.035164",{"slug":3216,"name":3216,"fn":3217,"description":3218,"org":3219,"tags":3220,"stars":23,"repoUrl":24,"updatedAt":3225},"configure-scales-guides-color","configure scales and guides for TanStack Charts","Configure TanStack Charts domains, scale factories, axes, margins, legends, grouping, and paint without taking ownership of responsive ranges. Load for blank geometry, scale inference, color semantics, shared domains, ticks, labels, or guide layout.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3221,3222,3223,3224],{"name":17,"slug":18,"type":15},{"name":3100,"slug":32,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-08-15T03:47:40.802271",{"slug":3227,"name":3227,"fn":3228,"description":3229,"org":3230,"tags":3231,"stars":23,"repoUrl":24,"updatedAt":3239},"coordinate-charts-with-tanstack","coordinate TanStack Charts with data sources","Coordinate TanStack Charts with TanStack Table data grids, TanStack DB live queries and sync engines, TanStack Query server state, Store, Router, Virtual, Pacer, Start, and Form without duplicating ownership. Load for chart-grid linking, shared filtering or selection, live synchronized data, optimistic updates, URL-restorable chart state, virtualized detail views, paced streams, or dashboard-wide state.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3232,3233,3234,3237,3238],{"name":17,"slug":18,"type":15},{"name":3062,"slug":3063,"type":15},{"name":3235,"slug":3236,"type":15},"Data Engineering","data-engineering",{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-08-15T03:47:37.086246",{"slug":3241,"name":3241,"fn":3242,"description":3243,"org":3244,"tags":3245,"stars":23,"repoUrl":24,"updatedAt":3250},"debug-and-verify-charts","debug and verify TanStack Charts","Diagnose TanStack Charts type, data, scale, geometry, focus, lifecycle, bundle, and performance failures with scenario-level evidence. Load for blank or clipped charts, misleading output, unsafe casts, migration parity, packed-package checks, or regressions.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3246,3247,3248,3249],{"name":17,"slug":18,"type":15},{"name":3076,"slug":3077,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-08-15T03:47:33.503153",{"slug":3252,"name":3252,"fn":3253,"description":3254,"org":3255,"tags":3256,"stars":23,"repoUrl":24,"updatedAt":3261},"design-a-chart","design charts with TanStack Charts","Choose an honest visualization from a user story, metric, comparison, projection, target, or explanatory goal before selecting TanStack Charts marks. Load whenever a user asks to graph, chart, visualize, compare, forecast, project, explain, or communicate data.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3257,3258,3259,3260],{"name":17,"slug":18,"type":15},{"name":3100,"slug":32,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-08-15T03:47:40.463333",{"slug":3263,"name":3263,"fn":3264,"description":3265,"org":3266,"tags":3267,"stars":23,"repoUrl":24,"updatedAt":3274},"design-responsive-charts","design responsive TanStack Charts","Make TanStack Charts adapt to measured containers, information priority, guide margins, SSR initial width, and final plot bounds. Load for narrow dashboards, overflow, label density, responsive topology, or pixel-space layouts.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3268,3269,3270,3271,3273],{"name":17,"slug":18,"type":15},{"name":3100,"slug":32,"type":15},{"name":21,"slug":22,"type":15},{"name":3272,"slug":39,"type":15},"SSR",{"name":9,"slug":8,"type":15},"2026-08-15T03:47:36.306971"]