[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-tanstack-extend-tanstack-charts":3,"mdc--djxwtv-key":48,"related-repo-tanstack-extend-tanstack-charts":1691,"related-org-tanstack-extend-tanstack-charts":1783},{"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},"extend-tanstack-charts","extend TanStack Charts functionality","Implement TanStack Charts custom marks, scale-value contracts, final-bounds layouts, renderer-neutral scene nodes, renderers, hosts, controls, or composed views after built-in primitives are exhausted.\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},"Plugin Development","plugin-development","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.479108",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\u002Fextend-tanstack-charts","---\nname: extend-tanstack-charts\ndescription: >\n  Implement TanStack Charts custom marks, scale-value contracts,\n  final-bounds layouts, renderer-neutral scene nodes, renderers, hosts,\n  controls, or composed views after built-in primitives are exhausted.\nmetadata:\n  type: core\n  library: '@tanstack\u002Fcharts'\n  library_version: '0.9.0'\nrequires:\n  - compose-marks-and-views\nsources:\n  - 'TanStack\u002Fcharts:docs\u002Fguides\u002Fcustom-marks-and-renderers.md'\n  - 'TanStack\u002Fcharts:docs\u002Freference\u002Fcustom-extensions.md'\n  - 'TanStack\u002Fcharts:packages\u002Fcharts-core\u002Fsrc\u002Fmark.ts'\n  - 'TanStack\u002Fcharts:packages\u002Fcharts-core\u002Fsrc\u002Fmark-with-scale-values.ts'\n---\n\n# Extend TanStack Charts\n\nUse **trigger → inspect → decide → build → verify**. Extend the narrowest ownership boundary after proving built-in marks, first-party layouts, transforms, facets, views, and controlled behaviors cannot express the required semantics.\n\n## Setup\n\nCreate a renderer-neutral mark with declared scale values and deterministic scene keys:\n\n```ts\nimport { createMark, defineChart } from '@tanstack\u002Fcharts'\nimport { scaleLinear } from '@tanstack\u002Fcharts\u002Fscales\u002Flinear'\n\ninterface ThresholdDatum {\n  id: string\n  value: number\n}\n\nconst threshold = createMark\u003CThresholdDatum, never, number>(({ markIndex }) => {\n  const datum: ThresholdDatum = { id: 'target', value: 75 }\n\n  return {\n    id: `threshold-${markIndex}`,\n    channels: { y: { scale: 'y', values: [datum.value] } },\n    render({ chart, scales, theme }) {\n      const y = scales.y.map(datum.value)\n      return {\n        nodes: [\n          {\n            kind: 'rule',\n            key: datum.id,\n            x1: chart.x,\n            x2: chart.x + chart.width,\n            y1: y,\n            y2: y,\n            style: { stroke: theme.foreground, strokeOpacity: 0.55 },\n          },\n        ],\n      }\n    },\n  }\n})\n\nexport const chart = defineChart({\n  marks: [threshold],\n  y: { scale: scaleLinear },\n})\n```\n\nThis mark is decorative, so it emits no fake interaction point.\n\n## Core Patterns\n\n### Escalate through extension boundaries\n\n1. Built-in or first-party composite mark.\n2. Several built-in marks.\n3. Facet or named view composition.\n4. D3\u002Fapplication-prepared semantic rows.\n5. `compositeMark` for a reusable group of ordinary marks.\n6. `createMark` for new renderer-neutral geometry.\n7. `resolveLayout` only for final-bounds topology or collision.\n8. Custom control for reusable semantic behavior.\n9. Custom renderer\u002Fhost for a different platform surface.\n\nRead [the extension protocol matrix](references\u002Fextension-protocols.md) before choosing a boundary.\n\n### Materialize values before rendering\n\nInitialization declares every semantic value that must establish x, y, or color domains. Rendering maps those values through resolved scales. Never infer a private positional domain inside `render`.\n\n### Emit honest interaction points\n\nOnly emit points for semantic targets. Each point keeps the original datum, stable key, semantic values, resolved coordinates, and group\u002Fcolor identity. Attach the same point object to the scene primitive it paints. Use focus anchors for reveal-only geometry and focus guides for data-less cursor presentation.\n\n### Use final-layout callbacks only for final-layout work\n\nUse `resolveLayout` for binning, collision, packing, or topology that depends on resolved scales and inner bounds. Keep semantic row transforms eager and outside render. Keep layout callbacks synchronous, pure, and deterministic because margin solving can call them more than once.\n\n## Common Mistakes\n\n### CRITICAL Reading or mutating the DOM during scene generation\n\nWrong: query text, append SVG, or inspect browser layout in `initialize`, `resolveLayout`, or `render`.\n\nCorrect: consume the supplied bounds, scales, theme, text layout, and scene contracts; put platform lifecycle in a renderer or host extension.\n\nScene compilation must remain deterministic for SSR, Canvas, native, export, and tests.\n\nSource: `docs\u002Fguides\u002Fcustom-marks-and-renderers.md`; `packages\u002Fcharts-core\u002Fsrc\u002Fmark.ts`\n\n### CRITICAL Inferring a private positional domain in render\n\nWrong: derive a local domain and scale after chart scales have resolved.\n\nCorrect: materialize positional channel values during initialization, then map with `context.scales`.\n\nPrivate domains prevent coordinated guides, layers, focus, and views.\n\nSource: `docs\u002Freference\u002Fcustom-extensions.md`; archived custom-mark notes\n\n### HIGH Conflating interaction and scale values\n\nWrong:\n\n```ts\ncreateMark\u003CDatum, PointX, PointY>(initialize)\n```\n\nCorrect:\n\n```ts\ncreateMarkWithScaleValues\u003CDatum, PointX, PointY, ScaleX, ScaleY>(initialize)\n```\n\nUse the exceptional factory when an interval or layout focuses one semantic value but materializes different endpoint types on its scales.\n\nSource: `API-FRICTION.md` F-094; `docs\u002Freference\u002Ftypes.md`\n\n### HIGH Running side effects in resolved layout\n\nWrong: update application state, mutate cached rows, allocate a persistent controller, or read external changing state from `resolveLayout`.\n\nCorrect: derive the returned layout solely from inputs and capture local derived rows in its render closure.\n\nMargin and responsive solving may evaluate the callback repeatedly.\n\nSource: hexbin and Sankey references\n\n### HIGH Tension: rich interaction versus portable rendering\n\nCustom DOM behavior is easy to prototype but breaks renderer parity. Prefer renderer-neutral points, focus guides, controls, and semantic application state; isolate platform code in the host seam.\n\nSee also: `build-chart-interactions\u002FSKILL.md` and `ship-accessible-charts\u002FSKILL.md`\n\n## References\n\n- [Extension protocol matrix](references\u002Fextension-protocols.md)\n\nSee also: `compose-marks-and-views\u002FSKILL.md` and `debug-and-verify-charts\u002FSKILL.md` — justify extensions against native composition and verify them across renderer boundaries.\n",{"data":49,"body":61},{"name":4,"description":6,"metadata":50,"requires":54,"sources":56},{"type":51,"library":52,"library_version":53},"core","@tanstack\u002Fcharts","0.9.0",[55],"compose-marks-and-views",[57,58,59,60],"TanStack\u002Fcharts:docs\u002Fguides\u002Fcustom-marks-and-renderers.md","TanStack\u002Fcharts:docs\u002Freference\u002Fcustom-extensions.md","TanStack\u002Fcharts:packages\u002Fcharts-core\u002Fsrc\u002Fmark.ts","TanStack\u002Fcharts:packages\u002Fcharts-core\u002Fsrc\u002Fmark-with-scale-values.ts",{"type":62,"children":63},"root",[64,72,86,93,98,1179,1184,1190,1197,1265,1279,1285,1297,1303,1308,1314,1325,1331,1337,1363,1368,1373,1392,1398,1403,1415,1420,1432,1438,1443,1493,1498,1563,1568,1586,1592,1603,1608,1613,1618,1624,1629,1648,1654,1666,1685],{"type":65,"tag":66,"props":67,"children":68},"element","h1",{"id":4},[69],{"type":70,"value":71},"text","Extend TanStack Charts",{"type":65,"tag":73,"props":74,"children":75},"p",{},[76,78,84],{"type":70,"value":77},"Use ",{"type":65,"tag":79,"props":80,"children":81},"strong",{},[82],{"type":70,"value":83},"trigger → inspect → decide → build → verify",{"type":70,"value":85},". Extend the narrowest ownership boundary after proving built-in marks, first-party layouts, transforms, facets, views, and controlled behaviors cannot express the required semantics.",{"type":65,"tag":87,"props":88,"children":90},"h2",{"id":89},"setup",[91],{"type":70,"value":92},"Setup",{"type":65,"tag":73,"props":94,"children":95},{},[96],{"type":70,"value":97},"Create a renderer-neutral mark with declared scale values and deterministic scene keys:",{"type":65,"tag":99,"props":100,"children":105},"pre",{"className":101,"code":102,"language":103,"meta":104,"style":104},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { createMark, defineChart } from '@tanstack\u002Fcharts'\nimport { scaleLinear } from '@tanstack\u002Fcharts\u002Fscales\u002Flinear'\n\ninterface ThresholdDatum {\n  id: string\n  value: number\n}\n\nconst threshold = createMark\u003CThresholdDatum, never, number>(({ markIndex }) => {\n  const datum: ThresholdDatum = { id: 'target', value: 75 }\n\n  return {\n    id: `threshold-${markIndex}`,\n    channels: { y: { scale: 'y', values: [datum.value] } },\n    render({ chart, scales, theme }) {\n      const y = scales.y.map(datum.value)\n      return {\n        nodes: [\n          {\n            kind: 'rule',\n            key: datum.id,\n            x1: chart.x,\n            x2: chart.x + chart.width,\n            y1: y,\n            y2: y,\n            style: { stroke: theme.foreground, strokeOpacity: 0.55 },\n          },\n        ],\n      }\n    },\n  }\n})\n\nexport const chart = defineChart({\n  marks: [threshold],\n  y: { scale: scaleLinear },\n})\n","ts","",[106],{"type":65,"tag":107,"props":108,"children":109},"code",{"__ignoreMap":104},[110,169,207,217,238,258,276,285,293,380,458,466,479,522,622,666,725,738,756,765,795,825,855,902,923,944,1005,1014,1027,1036,1045,1054,1066,1074,1110,1132,1167],{"type":65,"tag":111,"props":112,"children":115},"span",{"class":113,"line":114},"line",1,[116,122,128,134,139,144,149,154,159,164],{"type":65,"tag":111,"props":117,"children":119},{"style":118},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[120],{"type":70,"value":121},"import",{"type":65,"tag":111,"props":123,"children":125},{"style":124},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[126],{"type":70,"value":127}," {",{"type":65,"tag":111,"props":129,"children":131},{"style":130},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[132],{"type":70,"value":133}," createMark",{"type":65,"tag":111,"props":135,"children":136},{"style":124},[137],{"type":70,"value":138},",",{"type":65,"tag":111,"props":140,"children":141},{"style":130},[142],{"type":70,"value":143}," defineChart",{"type":65,"tag":111,"props":145,"children":146},{"style":124},[147],{"type":70,"value":148}," }",{"type":65,"tag":111,"props":150,"children":151},{"style":118},[152],{"type":70,"value":153}," from",{"type":65,"tag":111,"props":155,"children":156},{"style":124},[157],{"type":70,"value":158}," '",{"type":65,"tag":111,"props":160,"children":162},{"style":161},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[163],{"type":70,"value":52},{"type":65,"tag":111,"props":165,"children":166},{"style":124},[167],{"type":70,"value":168},"'\n",{"type":65,"tag":111,"props":170,"children":172},{"class":113,"line":171},2,[173,177,181,186,190,194,198,203],{"type":65,"tag":111,"props":174,"children":175},{"style":118},[176],{"type":70,"value":121},{"type":65,"tag":111,"props":178,"children":179},{"style":124},[180],{"type":70,"value":127},{"type":65,"tag":111,"props":182,"children":183},{"style":130},[184],{"type":70,"value":185}," scaleLinear",{"type":65,"tag":111,"props":187,"children":188},{"style":124},[189],{"type":70,"value":148},{"type":65,"tag":111,"props":191,"children":192},{"style":118},[193],{"type":70,"value":153},{"type":65,"tag":111,"props":195,"children":196},{"style":124},[197],{"type":70,"value":158},{"type":65,"tag":111,"props":199,"children":200},{"style":161},[201],{"type":70,"value":202},"@tanstack\u002Fcharts\u002Fscales\u002Flinear",{"type":65,"tag":111,"props":204,"children":205},{"style":124},[206],{"type":70,"value":168},{"type":65,"tag":111,"props":208,"children":210},{"class":113,"line":209},3,[211],{"type":65,"tag":111,"props":212,"children":214},{"emptyLinePlaceholder":213},true,[215],{"type":70,"value":216},"\n",{"type":65,"tag":111,"props":218,"children":220},{"class":113,"line":219},4,[221,227,233],{"type":65,"tag":111,"props":222,"children":224},{"style":223},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[225],{"type":70,"value":226},"interface",{"type":65,"tag":111,"props":228,"children":230},{"style":229},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[231],{"type":70,"value":232}," ThresholdDatum",{"type":65,"tag":111,"props":234,"children":235},{"style":124},[236],{"type":70,"value":237}," {\n",{"type":65,"tag":111,"props":239,"children":241},{"class":113,"line":240},5,[242,248,253],{"type":65,"tag":111,"props":243,"children":245},{"style":244},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[246],{"type":70,"value":247},"  id",{"type":65,"tag":111,"props":249,"children":250},{"style":124},[251],{"type":70,"value":252},":",{"type":65,"tag":111,"props":254,"children":255},{"style":229},[256],{"type":70,"value":257}," string\n",{"type":65,"tag":111,"props":259,"children":261},{"class":113,"line":260},6,[262,267,271],{"type":65,"tag":111,"props":263,"children":264},{"style":244},[265],{"type":70,"value":266},"  value",{"type":65,"tag":111,"props":268,"children":269},{"style":124},[270],{"type":70,"value":252},{"type":65,"tag":111,"props":272,"children":273},{"style":229},[274],{"type":70,"value":275}," number\n",{"type":65,"tag":111,"props":277,"children":279},{"class":113,"line":278},7,[280],{"type":65,"tag":111,"props":281,"children":282},{"style":124},[283],{"type":70,"value":284},"}\n",{"type":65,"tag":111,"props":286,"children":288},{"class":113,"line":287},8,[289],{"type":65,"tag":111,"props":290,"children":291},{"emptyLinePlaceholder":213},[292],{"type":70,"value":216},{"type":65,"tag":111,"props":294,"children":296},{"class":113,"line":295},9,[297,302,307,312,317,322,327,331,336,340,345,350,355,360,366,371,376],{"type":65,"tag":111,"props":298,"children":299},{"style":223},[300],{"type":70,"value":301},"const",{"type":65,"tag":111,"props":303,"children":304},{"style":130},[305],{"type":70,"value":306}," threshold ",{"type":65,"tag":111,"props":308,"children":309},{"style":124},[310],{"type":70,"value":311},"=",{"type":65,"tag":111,"props":313,"children":315},{"style":314},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[316],{"type":70,"value":133},{"type":65,"tag":111,"props":318,"children":319},{"style":124},[320],{"type":70,"value":321},"\u003C",{"type":65,"tag":111,"props":323,"children":324},{"style":229},[325],{"type":70,"value":326},"ThresholdDatum",{"type":65,"tag":111,"props":328,"children":329},{"style":124},[330],{"type":70,"value":138},{"type":65,"tag":111,"props":332,"children":333},{"style":229},[334],{"type":70,"value":335}," never",{"type":65,"tag":111,"props":337,"children":338},{"style":124},[339],{"type":70,"value":138},{"type":65,"tag":111,"props":341,"children":342},{"style":229},[343],{"type":70,"value":344}," number",{"type":65,"tag":111,"props":346,"children":347},{"style":124},[348],{"type":70,"value":349},">",{"type":65,"tag":111,"props":351,"children":352},{"style":130},[353],{"type":70,"value":354},"(",{"type":65,"tag":111,"props":356,"children":357},{"style":124},[358],{"type":70,"value":359},"({",{"type":65,"tag":111,"props":361,"children":363},{"style":362},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[364],{"type":70,"value":365}," markIndex",{"type":65,"tag":111,"props":367,"children":368},{"style":124},[369],{"type":70,"value":370}," })",{"type":65,"tag":111,"props":372,"children":373},{"style":223},[374],{"type":70,"value":375}," =>",{"type":65,"tag":111,"props":377,"children":378},{"style":124},[379],{"type":70,"value":237},{"type":65,"tag":111,"props":381,"children":383},{"class":113,"line":382},10,[384,389,394,398,402,407,411,416,420,424,429,434,438,443,447,453],{"type":65,"tag":111,"props":385,"children":386},{"style":223},[387],{"type":70,"value":388},"  const",{"type":65,"tag":111,"props":390,"children":391},{"style":130},[392],{"type":70,"value":393}," datum",{"type":65,"tag":111,"props":395,"children":396},{"style":124},[397],{"type":70,"value":252},{"type":65,"tag":111,"props":399,"children":400},{"style":229},[401],{"type":70,"value":232},{"type":65,"tag":111,"props":403,"children":404},{"style":124},[405],{"type":70,"value":406}," =",{"type":65,"tag":111,"props":408,"children":409},{"style":124},[410],{"type":70,"value":127},{"type":65,"tag":111,"props":412,"children":413},{"style":244},[414],{"type":70,"value":415}," id",{"type":65,"tag":111,"props":417,"children":418},{"style":124},[419],{"type":70,"value":252},{"type":65,"tag":111,"props":421,"children":422},{"style":124},[423],{"type":70,"value":158},{"type":65,"tag":111,"props":425,"children":426},{"style":161},[427],{"type":70,"value":428},"target",{"type":65,"tag":111,"props":430,"children":431},{"style":124},[432],{"type":70,"value":433},"'",{"type":65,"tag":111,"props":435,"children":436},{"style":124},[437],{"type":70,"value":138},{"type":65,"tag":111,"props":439,"children":440},{"style":244},[441],{"type":70,"value":442}," value",{"type":65,"tag":111,"props":444,"children":445},{"style":124},[446],{"type":70,"value":252},{"type":65,"tag":111,"props":448,"children":450},{"style":449},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[451],{"type":70,"value":452}," 75",{"type":65,"tag":111,"props":454,"children":455},{"style":124},[456],{"type":70,"value":457}," }\n",{"type":65,"tag":111,"props":459,"children":461},{"class":113,"line":460},11,[462],{"type":65,"tag":111,"props":463,"children":464},{"emptyLinePlaceholder":213},[465],{"type":70,"value":216},{"type":65,"tag":111,"props":467,"children":469},{"class":113,"line":468},12,[470,475],{"type":65,"tag":111,"props":471,"children":472},{"style":118},[473],{"type":70,"value":474},"  return",{"type":65,"tag":111,"props":476,"children":477},{"style":124},[478],{"type":70,"value":237},{"type":65,"tag":111,"props":480,"children":482},{"class":113,"line":481},13,[483,488,492,497,502,507,512,517],{"type":65,"tag":111,"props":484,"children":485},{"style":244},[486],{"type":70,"value":487},"    id",{"type":65,"tag":111,"props":489,"children":490},{"style":124},[491],{"type":70,"value":252},{"type":65,"tag":111,"props":493,"children":494},{"style":124},[495],{"type":70,"value":496}," `",{"type":65,"tag":111,"props":498,"children":499},{"style":161},[500],{"type":70,"value":501},"threshold-",{"type":65,"tag":111,"props":503,"children":504},{"style":124},[505],{"type":70,"value":506},"${",{"type":65,"tag":111,"props":508,"children":509},{"style":130},[510],{"type":70,"value":511},"markIndex",{"type":65,"tag":111,"props":513,"children":514},{"style":124},[515],{"type":70,"value":516},"}`",{"type":65,"tag":111,"props":518,"children":519},{"style":124},[520],{"type":70,"value":521},",\n",{"type":65,"tag":111,"props":523,"children":525},{"class":113,"line":524},14,[526,531,535,539,544,548,552,557,561,565,570,574,578,583,587,592,597,602,607,612,617],{"type":65,"tag":111,"props":527,"children":528},{"style":244},[529],{"type":70,"value":530},"    channels",{"type":65,"tag":111,"props":532,"children":533},{"style":124},[534],{"type":70,"value":252},{"type":65,"tag":111,"props":536,"children":537},{"style":124},[538],{"type":70,"value":127},{"type":65,"tag":111,"props":540,"children":541},{"style":244},[542],{"type":70,"value":543}," y",{"type":65,"tag":111,"props":545,"children":546},{"style":124},[547],{"type":70,"value":252},{"type":65,"tag":111,"props":549,"children":550},{"style":124},[551],{"type":70,"value":127},{"type":65,"tag":111,"props":553,"children":554},{"style":244},[555],{"type":70,"value":556}," scale",{"type":65,"tag":111,"props":558,"children":559},{"style":124},[560],{"type":70,"value":252},{"type":65,"tag":111,"props":562,"children":563},{"style":124},[564],{"type":70,"value":158},{"type":65,"tag":111,"props":566,"children":567},{"style":161},[568],{"type":70,"value":569},"y",{"type":65,"tag":111,"props":571,"children":572},{"style":124},[573],{"type":70,"value":433},{"type":65,"tag":111,"props":575,"children":576},{"style":124},[577],{"type":70,"value":138},{"type":65,"tag":111,"props":579,"children":580},{"style":244},[581],{"type":70,"value":582}," values",{"type":65,"tag":111,"props":584,"children":585},{"style":124},[586],{"type":70,"value":252},{"type":65,"tag":111,"props":588,"children":589},{"style":244},[590],{"type":70,"value":591}," [",{"type":65,"tag":111,"props":593,"children":594},{"style":130},[595],{"type":70,"value":596},"datum",{"type":65,"tag":111,"props":598,"children":599},{"style":124},[600],{"type":70,"value":601},".",{"type":65,"tag":111,"props":603,"children":604},{"style":130},[605],{"type":70,"value":606},"value",{"type":65,"tag":111,"props":608,"children":609},{"style":244},[610],{"type":70,"value":611},"] ",{"type":65,"tag":111,"props":613,"children":614},{"style":124},[615],{"type":70,"value":616},"}",{"type":65,"tag":111,"props":618,"children":619},{"style":124},[620],{"type":70,"value":621}," },\n",{"type":65,"tag":111,"props":623,"children":625},{"class":113,"line":624},15,[626,631,635,640,644,649,653,658,662],{"type":65,"tag":111,"props":627,"children":628},{"style":244},[629],{"type":70,"value":630},"    render",{"type":65,"tag":111,"props":632,"children":633},{"style":124},[634],{"type":70,"value":359},{"type":65,"tag":111,"props":636,"children":637},{"style":362},[638],{"type":70,"value":639}," chart",{"type":65,"tag":111,"props":641,"children":642},{"style":124},[643],{"type":70,"value":138},{"type":65,"tag":111,"props":645,"children":646},{"style":362},[647],{"type":70,"value":648}," scales",{"type":65,"tag":111,"props":650,"children":651},{"style":124},[652],{"type":70,"value":138},{"type":65,"tag":111,"props":654,"children":655},{"style":362},[656],{"type":70,"value":657}," theme",{"type":65,"tag":111,"props":659,"children":660},{"style":124},[661],{"type":70,"value":370},{"type":65,"tag":111,"props":663,"children":664},{"style":124},[665],{"type":70,"value":237},{"type":65,"tag":111,"props":667,"children":669},{"class":113,"line":668},16,[670,675,679,683,687,691,695,699,704,708,712,716,720],{"type":65,"tag":111,"props":671,"children":672},{"style":223},[673],{"type":70,"value":674},"      const",{"type":65,"tag":111,"props":676,"children":677},{"style":130},[678],{"type":70,"value":543},{"type":65,"tag":111,"props":680,"children":681},{"style":124},[682],{"type":70,"value":406},{"type":65,"tag":111,"props":684,"children":685},{"style":130},[686],{"type":70,"value":648},{"type":65,"tag":111,"props":688,"children":689},{"style":124},[690],{"type":70,"value":601},{"type":65,"tag":111,"props":692,"children":693},{"style":130},[694],{"type":70,"value":569},{"type":65,"tag":111,"props":696,"children":697},{"style":124},[698],{"type":70,"value":601},{"type":65,"tag":111,"props":700,"children":701},{"style":314},[702],{"type":70,"value":703},"map",{"type":65,"tag":111,"props":705,"children":706},{"style":244},[707],{"type":70,"value":354},{"type":65,"tag":111,"props":709,"children":710},{"style":130},[711],{"type":70,"value":596},{"type":65,"tag":111,"props":713,"children":714},{"style":124},[715],{"type":70,"value":601},{"type":65,"tag":111,"props":717,"children":718},{"style":130},[719],{"type":70,"value":606},{"type":65,"tag":111,"props":721,"children":722},{"style":244},[723],{"type":70,"value":724},")\n",{"type":65,"tag":111,"props":726,"children":728},{"class":113,"line":727},17,[729,734],{"type":65,"tag":111,"props":730,"children":731},{"style":118},[732],{"type":70,"value":733},"      return",{"type":65,"tag":111,"props":735,"children":736},{"style":124},[737],{"type":70,"value":237},{"type":65,"tag":111,"props":739,"children":741},{"class":113,"line":740},18,[742,747,751],{"type":65,"tag":111,"props":743,"children":744},{"style":244},[745],{"type":70,"value":746},"        nodes",{"type":65,"tag":111,"props":748,"children":749},{"style":124},[750],{"type":70,"value":252},{"type":65,"tag":111,"props":752,"children":753},{"style":244},[754],{"type":70,"value":755}," [\n",{"type":65,"tag":111,"props":757,"children":759},{"class":113,"line":758},19,[760],{"type":65,"tag":111,"props":761,"children":762},{"style":124},[763],{"type":70,"value":764},"          {\n",{"type":65,"tag":111,"props":766,"children":768},{"class":113,"line":767},20,[769,774,778,782,787,791],{"type":65,"tag":111,"props":770,"children":771},{"style":244},[772],{"type":70,"value":773},"            kind",{"type":65,"tag":111,"props":775,"children":776},{"style":124},[777],{"type":70,"value":252},{"type":65,"tag":111,"props":779,"children":780},{"style":124},[781],{"type":70,"value":158},{"type":65,"tag":111,"props":783,"children":784},{"style":161},[785],{"type":70,"value":786},"rule",{"type":65,"tag":111,"props":788,"children":789},{"style":124},[790],{"type":70,"value":433},{"type":65,"tag":111,"props":792,"children":793},{"style":124},[794],{"type":70,"value":521},{"type":65,"tag":111,"props":796,"children":798},{"class":113,"line":797},21,[799,804,808,812,816,821],{"type":65,"tag":111,"props":800,"children":801},{"style":244},[802],{"type":70,"value":803},"            key",{"type":65,"tag":111,"props":805,"children":806},{"style":124},[807],{"type":70,"value":252},{"type":65,"tag":111,"props":809,"children":810},{"style":130},[811],{"type":70,"value":393},{"type":65,"tag":111,"props":813,"children":814},{"style":124},[815],{"type":70,"value":601},{"type":65,"tag":111,"props":817,"children":818},{"style":130},[819],{"type":70,"value":820},"id",{"type":65,"tag":111,"props":822,"children":823},{"style":124},[824],{"type":70,"value":521},{"type":65,"tag":111,"props":826,"children":828},{"class":113,"line":827},22,[829,834,838,842,846,851],{"type":65,"tag":111,"props":830,"children":831},{"style":244},[832],{"type":70,"value":833},"            x1",{"type":65,"tag":111,"props":835,"children":836},{"style":124},[837],{"type":70,"value":252},{"type":65,"tag":111,"props":839,"children":840},{"style":130},[841],{"type":70,"value":639},{"type":65,"tag":111,"props":843,"children":844},{"style":124},[845],{"type":70,"value":601},{"type":65,"tag":111,"props":847,"children":848},{"style":130},[849],{"type":70,"value":850},"x",{"type":65,"tag":111,"props":852,"children":853},{"style":124},[854],{"type":70,"value":521},{"type":65,"tag":111,"props":856,"children":858},{"class":113,"line":857},23,[859,864,868,872,876,880,885,889,893,898],{"type":65,"tag":111,"props":860,"children":861},{"style":244},[862],{"type":70,"value":863},"            x2",{"type":65,"tag":111,"props":865,"children":866},{"style":124},[867],{"type":70,"value":252},{"type":65,"tag":111,"props":869,"children":870},{"style":130},[871],{"type":70,"value":639},{"type":65,"tag":111,"props":873,"children":874},{"style":124},[875],{"type":70,"value":601},{"type":65,"tag":111,"props":877,"children":878},{"style":130},[879],{"type":70,"value":850},{"type":65,"tag":111,"props":881,"children":882},{"style":124},[883],{"type":70,"value":884}," +",{"type":65,"tag":111,"props":886,"children":887},{"style":130},[888],{"type":70,"value":639},{"type":65,"tag":111,"props":890,"children":891},{"style":124},[892],{"type":70,"value":601},{"type":65,"tag":111,"props":894,"children":895},{"style":130},[896],{"type":70,"value":897},"width",{"type":65,"tag":111,"props":899,"children":900},{"style":124},[901],{"type":70,"value":521},{"type":65,"tag":111,"props":903,"children":905},{"class":113,"line":904},24,[906,911,915,919],{"type":65,"tag":111,"props":907,"children":908},{"style":244},[909],{"type":70,"value":910},"            y1",{"type":65,"tag":111,"props":912,"children":913},{"style":124},[914],{"type":70,"value":252},{"type":65,"tag":111,"props":916,"children":917},{"style":130},[918],{"type":70,"value":543},{"type":65,"tag":111,"props":920,"children":921},{"style":124},[922],{"type":70,"value":521},{"type":65,"tag":111,"props":924,"children":926},{"class":113,"line":925},25,[927,932,936,940],{"type":65,"tag":111,"props":928,"children":929},{"style":244},[930],{"type":70,"value":931},"            y2",{"type":65,"tag":111,"props":933,"children":934},{"style":124},[935],{"type":70,"value":252},{"type":65,"tag":111,"props":937,"children":938},{"style":130},[939],{"type":70,"value":543},{"type":65,"tag":111,"props":941,"children":942},{"style":124},[943],{"type":70,"value":521},{"type":65,"tag":111,"props":945,"children":947},{"class":113,"line":946},26,[948,953,957,961,966,970,974,978,983,987,992,996,1001],{"type":65,"tag":111,"props":949,"children":950},{"style":244},[951],{"type":70,"value":952},"            style",{"type":65,"tag":111,"props":954,"children":955},{"style":124},[956],{"type":70,"value":252},{"type":65,"tag":111,"props":958,"children":959},{"style":124},[960],{"type":70,"value":127},{"type":65,"tag":111,"props":962,"children":963},{"style":244},[964],{"type":70,"value":965}," stroke",{"type":65,"tag":111,"props":967,"children":968},{"style":124},[969],{"type":70,"value":252},{"type":65,"tag":111,"props":971,"children":972},{"style":130},[973],{"type":70,"value":657},{"type":65,"tag":111,"props":975,"children":976},{"style":124},[977],{"type":70,"value":601},{"type":65,"tag":111,"props":979,"children":980},{"style":130},[981],{"type":70,"value":982},"foreground",{"type":65,"tag":111,"props":984,"children":985},{"style":124},[986],{"type":70,"value":138},{"type":65,"tag":111,"props":988,"children":989},{"style":244},[990],{"type":70,"value":991}," strokeOpacity",{"type":65,"tag":111,"props":993,"children":994},{"style":124},[995],{"type":70,"value":252},{"type":65,"tag":111,"props":997,"children":998},{"style":449},[999],{"type":70,"value":1000}," 0.55",{"type":65,"tag":111,"props":1002,"children":1003},{"style":124},[1004],{"type":70,"value":621},{"type":65,"tag":111,"props":1006,"children":1008},{"class":113,"line":1007},27,[1009],{"type":65,"tag":111,"props":1010,"children":1011},{"style":124},[1012],{"type":70,"value":1013},"          },\n",{"type":65,"tag":111,"props":1015,"children":1017},{"class":113,"line":1016},28,[1018,1023],{"type":65,"tag":111,"props":1019,"children":1020},{"style":244},[1021],{"type":70,"value":1022},"        ]",{"type":65,"tag":111,"props":1024,"children":1025},{"style":124},[1026],{"type":70,"value":521},{"type":65,"tag":111,"props":1028,"children":1030},{"class":113,"line":1029},29,[1031],{"type":65,"tag":111,"props":1032,"children":1033},{"style":124},[1034],{"type":70,"value":1035},"      }\n",{"type":65,"tag":111,"props":1037,"children":1039},{"class":113,"line":1038},30,[1040],{"type":65,"tag":111,"props":1041,"children":1042},{"style":124},[1043],{"type":70,"value":1044},"    },\n",{"type":65,"tag":111,"props":1046,"children":1048},{"class":113,"line":1047},31,[1049],{"type":65,"tag":111,"props":1050,"children":1051},{"style":124},[1052],{"type":70,"value":1053},"  }\n",{"type":65,"tag":111,"props":1055,"children":1057},{"class":113,"line":1056},32,[1058,1062],{"type":65,"tag":111,"props":1059,"children":1060},{"style":124},[1061],{"type":70,"value":616},{"type":65,"tag":111,"props":1063,"children":1064},{"style":130},[1065],{"type":70,"value":724},{"type":65,"tag":111,"props":1067,"children":1069},{"class":113,"line":1068},33,[1070],{"type":65,"tag":111,"props":1071,"children":1072},{"emptyLinePlaceholder":213},[1073],{"type":70,"value":216},{"type":65,"tag":111,"props":1075,"children":1077},{"class":113,"line":1076},34,[1078,1083,1088,1093,1097,1101,1105],{"type":65,"tag":111,"props":1079,"children":1080},{"style":118},[1081],{"type":70,"value":1082},"export",{"type":65,"tag":111,"props":1084,"children":1085},{"style":223},[1086],{"type":70,"value":1087}," const",{"type":65,"tag":111,"props":1089,"children":1090},{"style":130},[1091],{"type":70,"value":1092}," chart ",{"type":65,"tag":111,"props":1094,"children":1095},{"style":124},[1096],{"type":70,"value":311},{"type":65,"tag":111,"props":1098,"children":1099},{"style":314},[1100],{"type":70,"value":143},{"type":65,"tag":111,"props":1102,"children":1103},{"style":130},[1104],{"type":70,"value":354},{"type":65,"tag":111,"props":1106,"children":1107},{"style":124},[1108],{"type":70,"value":1109},"{\n",{"type":65,"tag":111,"props":1111,"children":1113},{"class":113,"line":1112},35,[1114,1119,1123,1128],{"type":65,"tag":111,"props":1115,"children":1116},{"style":244},[1117],{"type":70,"value":1118},"  marks",{"type":65,"tag":111,"props":1120,"children":1121},{"style":124},[1122],{"type":70,"value":252},{"type":65,"tag":111,"props":1124,"children":1125},{"style":130},[1126],{"type":70,"value":1127}," [threshold]",{"type":65,"tag":111,"props":1129,"children":1130},{"style":124},[1131],{"type":70,"value":521},{"type":65,"tag":111,"props":1133,"children":1135},{"class":113,"line":1134},36,[1136,1141,1145,1149,1153,1157,1162],{"type":65,"tag":111,"props":1137,"children":1138},{"style":244},[1139],{"type":70,"value":1140},"  y",{"type":65,"tag":111,"props":1142,"children":1143},{"style":124},[1144],{"type":70,"value":252},{"type":65,"tag":111,"props":1146,"children":1147},{"style":124},[1148],{"type":70,"value":127},{"type":65,"tag":111,"props":1150,"children":1151},{"style":244},[1152],{"type":70,"value":556},{"type":65,"tag":111,"props":1154,"children":1155},{"style":124},[1156],{"type":70,"value":252},{"type":65,"tag":111,"props":1158,"children":1159},{"style":130},[1160],{"type":70,"value":1161}," scaleLinear ",{"type":65,"tag":111,"props":1163,"children":1164},{"style":124},[1165],{"type":70,"value":1166},"},\n",{"type":65,"tag":111,"props":1168,"children":1170},{"class":113,"line":1169},37,[1171,1175],{"type":65,"tag":111,"props":1172,"children":1173},{"style":124},[1174],{"type":70,"value":616},{"type":65,"tag":111,"props":1176,"children":1177},{"style":130},[1178],{"type":70,"value":724},{"type":65,"tag":73,"props":1180,"children":1181},{},[1182],{"type":70,"value":1183},"This mark is decorative, so it emits no fake interaction point.",{"type":65,"tag":87,"props":1185,"children":1187},{"id":1186},"core-patterns",[1188],{"type":70,"value":1189},"Core Patterns",{"type":65,"tag":1191,"props":1192,"children":1194},"h3",{"id":1193},"escalate-through-extension-boundaries",[1195],{"type":70,"value":1196},"Escalate through extension boundaries",{"type":65,"tag":1198,"props":1199,"children":1200},"ol",{},[1201,1207,1212,1217,1222,1233,1244,1255,1260],{"type":65,"tag":1202,"props":1203,"children":1204},"li",{},[1205],{"type":70,"value":1206},"Built-in or first-party composite mark.",{"type":65,"tag":1202,"props":1208,"children":1209},{},[1210],{"type":70,"value":1211},"Several built-in marks.",{"type":65,"tag":1202,"props":1213,"children":1214},{},[1215],{"type":70,"value":1216},"Facet or named view composition.",{"type":65,"tag":1202,"props":1218,"children":1219},{},[1220],{"type":70,"value":1221},"D3\u002Fapplication-prepared semantic rows.",{"type":65,"tag":1202,"props":1223,"children":1224},{},[1225,1231],{"type":65,"tag":107,"props":1226,"children":1228},{"className":1227},[],[1229],{"type":70,"value":1230},"compositeMark",{"type":70,"value":1232}," for a reusable group of ordinary marks.",{"type":65,"tag":1202,"props":1234,"children":1235},{},[1236,1242],{"type":65,"tag":107,"props":1237,"children":1239},{"className":1238},[],[1240],{"type":70,"value":1241},"createMark",{"type":70,"value":1243}," for new renderer-neutral geometry.",{"type":65,"tag":1202,"props":1245,"children":1246},{},[1247,1253],{"type":65,"tag":107,"props":1248,"children":1250},{"className":1249},[],[1251],{"type":70,"value":1252},"resolveLayout",{"type":70,"value":1254}," only for final-bounds topology or collision.",{"type":65,"tag":1202,"props":1256,"children":1257},{},[1258],{"type":70,"value":1259},"Custom control for reusable semantic behavior.",{"type":65,"tag":1202,"props":1261,"children":1262},{},[1263],{"type":70,"value":1264},"Custom renderer\u002Fhost for a different platform surface.",{"type":65,"tag":73,"props":1266,"children":1267},{},[1268,1270,1277],{"type":70,"value":1269},"Read ",{"type":65,"tag":1271,"props":1272,"children":1274},"a",{"href":1273},"references\u002Fextension-protocols.md",[1275],{"type":70,"value":1276},"the extension protocol matrix",{"type":70,"value":1278}," before choosing a boundary.",{"type":65,"tag":1191,"props":1280,"children":1282},{"id":1281},"materialize-values-before-rendering",[1283],{"type":70,"value":1284},"Materialize values before rendering",{"type":65,"tag":73,"props":1286,"children":1287},{},[1288,1290,1296],{"type":70,"value":1289},"Initialization declares every semantic value that must establish x, y, or color domains. Rendering maps those values through resolved scales. Never infer a private positional domain inside ",{"type":65,"tag":107,"props":1291,"children":1293},{"className":1292},[],[1294],{"type":70,"value":1295},"render",{"type":70,"value":601},{"type":65,"tag":1191,"props":1298,"children":1300},{"id":1299},"emit-honest-interaction-points",[1301],{"type":70,"value":1302},"Emit honest interaction points",{"type":65,"tag":73,"props":1304,"children":1305},{},[1306],{"type":70,"value":1307},"Only emit points for semantic targets. Each point keeps the original datum, stable key, semantic values, resolved coordinates, and group\u002Fcolor identity. Attach the same point object to the scene primitive it paints. Use focus anchors for reveal-only geometry and focus guides for data-less cursor presentation.",{"type":65,"tag":1191,"props":1309,"children":1311},{"id":1310},"use-final-layout-callbacks-only-for-final-layout-work",[1312],{"type":70,"value":1313},"Use final-layout callbacks only for final-layout work",{"type":65,"tag":73,"props":1315,"children":1316},{},[1317,1318,1323],{"type":70,"value":77},{"type":65,"tag":107,"props":1319,"children":1321},{"className":1320},[],[1322],{"type":70,"value":1252},{"type":70,"value":1324}," for binning, collision, packing, or topology that depends on resolved scales and inner bounds. Keep semantic row transforms eager and outside render. Keep layout callbacks synchronous, pure, and deterministic because margin solving can call them more than once.",{"type":65,"tag":87,"props":1326,"children":1328},{"id":1327},"common-mistakes",[1329],{"type":70,"value":1330},"Common Mistakes",{"type":65,"tag":1191,"props":1332,"children":1334},{"id":1333},"critical-reading-or-mutating-the-dom-during-scene-generation",[1335],{"type":70,"value":1336},"CRITICAL Reading or mutating the DOM during scene generation",{"type":65,"tag":73,"props":1338,"children":1339},{},[1340,1342,1348,1350,1355,1357,1362],{"type":70,"value":1341},"Wrong: query text, append SVG, or inspect browser layout in ",{"type":65,"tag":107,"props":1343,"children":1345},{"className":1344},[],[1346],{"type":70,"value":1347},"initialize",{"type":70,"value":1349},", ",{"type":65,"tag":107,"props":1351,"children":1353},{"className":1352},[],[1354],{"type":70,"value":1252},{"type":70,"value":1356},", or ",{"type":65,"tag":107,"props":1358,"children":1360},{"className":1359},[],[1361],{"type":70,"value":1295},{"type":70,"value":601},{"type":65,"tag":73,"props":1364,"children":1365},{},[1366],{"type":70,"value":1367},"Correct: consume the supplied bounds, scales, theme, text layout, and scene contracts; put platform lifecycle in a renderer or host extension.",{"type":65,"tag":73,"props":1369,"children":1370},{},[1371],{"type":70,"value":1372},"Scene compilation must remain deterministic for SSR, Canvas, native, export, and tests.",{"type":65,"tag":73,"props":1374,"children":1375},{},[1376,1378,1384,1386],{"type":70,"value":1377},"Source: ",{"type":65,"tag":107,"props":1379,"children":1381},{"className":1380},[],[1382],{"type":70,"value":1383},"docs\u002Fguides\u002Fcustom-marks-and-renderers.md",{"type":70,"value":1385},"; ",{"type":65,"tag":107,"props":1387,"children":1389},{"className":1388},[],[1390],{"type":70,"value":1391},"packages\u002Fcharts-core\u002Fsrc\u002Fmark.ts",{"type":65,"tag":1191,"props":1393,"children":1395},{"id":1394},"critical-inferring-a-private-positional-domain-in-render",[1396],{"type":70,"value":1397},"CRITICAL Inferring a private positional domain in render",{"type":65,"tag":73,"props":1399,"children":1400},{},[1401],{"type":70,"value":1402},"Wrong: derive a local domain and scale after chart scales have resolved.",{"type":65,"tag":73,"props":1404,"children":1405},{},[1406,1408,1414],{"type":70,"value":1407},"Correct: materialize positional channel values during initialization, then map with ",{"type":65,"tag":107,"props":1409,"children":1411},{"className":1410},[],[1412],{"type":70,"value":1413},"context.scales",{"type":70,"value":601},{"type":65,"tag":73,"props":1416,"children":1417},{},[1418],{"type":70,"value":1419},"Private domains prevent coordinated guides, layers, focus, and views.",{"type":65,"tag":73,"props":1421,"children":1422},{},[1423,1424,1430],{"type":70,"value":1377},{"type":65,"tag":107,"props":1425,"children":1427},{"className":1426},[],[1428],{"type":70,"value":1429},"docs\u002Freference\u002Fcustom-extensions.md",{"type":70,"value":1431},"; archived custom-mark notes",{"type":65,"tag":1191,"props":1433,"children":1435},{"id":1434},"high-conflating-interaction-and-scale-values",[1436],{"type":70,"value":1437},"HIGH Conflating interaction and scale values",{"type":65,"tag":73,"props":1439,"children":1440},{},[1441],{"type":70,"value":1442},"Wrong:",{"type":65,"tag":99,"props":1444,"children":1446},{"className":101,"code":1445,"language":103,"meta":104,"style":104},"createMark\u003CDatum, PointX, PointY>(initialize)\n",[1447],{"type":65,"tag":107,"props":1448,"children":1449},{"__ignoreMap":104},[1450],{"type":65,"tag":111,"props":1451,"children":1452},{"class":113,"line":114},[1453,1457,1461,1466,1470,1475,1479,1484,1488],{"type":65,"tag":111,"props":1454,"children":1455},{"style":314},[1456],{"type":70,"value":1241},{"type":65,"tag":111,"props":1458,"children":1459},{"style":124},[1460],{"type":70,"value":321},{"type":65,"tag":111,"props":1462,"children":1463},{"style":229},[1464],{"type":70,"value":1465},"Datum",{"type":65,"tag":111,"props":1467,"children":1468},{"style":124},[1469],{"type":70,"value":138},{"type":65,"tag":111,"props":1471,"children":1472},{"style":229},[1473],{"type":70,"value":1474}," PointX",{"type":65,"tag":111,"props":1476,"children":1477},{"style":124},[1478],{"type":70,"value":138},{"type":65,"tag":111,"props":1480,"children":1481},{"style":229},[1482],{"type":70,"value":1483}," PointY",{"type":65,"tag":111,"props":1485,"children":1486},{"style":124},[1487],{"type":70,"value":349},{"type":65,"tag":111,"props":1489,"children":1490},{"style":130},[1491],{"type":70,"value":1492},"(initialize)\n",{"type":65,"tag":73,"props":1494,"children":1495},{},[1496],{"type":70,"value":1497},"Correct:",{"type":65,"tag":99,"props":1499,"children":1501},{"className":101,"code":1500,"language":103,"meta":104,"style":104},"createMarkWithScaleValues\u003CDatum, PointX, PointY, ScaleX, ScaleY>(initialize)\n",[1502],{"type":65,"tag":107,"props":1503,"children":1504},{"__ignoreMap":104},[1505],{"type":65,"tag":111,"props":1506,"children":1507},{"class":113,"line":114},[1508,1513,1517,1521,1525,1529,1533,1537,1541,1546,1550,1555,1559],{"type":65,"tag":111,"props":1509,"children":1510},{"style":314},[1511],{"type":70,"value":1512},"createMarkWithScaleValues",{"type":65,"tag":111,"props":1514,"children":1515},{"style":124},[1516],{"type":70,"value":321},{"type":65,"tag":111,"props":1518,"children":1519},{"style":229},[1520],{"type":70,"value":1465},{"type":65,"tag":111,"props":1522,"children":1523},{"style":124},[1524],{"type":70,"value":138},{"type":65,"tag":111,"props":1526,"children":1527},{"style":229},[1528],{"type":70,"value":1474},{"type":65,"tag":111,"props":1530,"children":1531},{"style":124},[1532],{"type":70,"value":138},{"type":65,"tag":111,"props":1534,"children":1535},{"style":229},[1536],{"type":70,"value":1483},{"type":65,"tag":111,"props":1538,"children":1539},{"style":124},[1540],{"type":70,"value":138},{"type":65,"tag":111,"props":1542,"children":1543},{"style":229},[1544],{"type":70,"value":1545}," ScaleX",{"type":65,"tag":111,"props":1547,"children":1548},{"style":124},[1549],{"type":70,"value":138},{"type":65,"tag":111,"props":1551,"children":1552},{"style":229},[1553],{"type":70,"value":1554}," ScaleY",{"type":65,"tag":111,"props":1556,"children":1557},{"style":124},[1558],{"type":70,"value":349},{"type":65,"tag":111,"props":1560,"children":1561},{"style":130},[1562],{"type":70,"value":1492},{"type":65,"tag":73,"props":1564,"children":1565},{},[1566],{"type":70,"value":1567},"Use the exceptional factory when an interval or layout focuses one semantic value but materializes different endpoint types on its scales.",{"type":65,"tag":73,"props":1569,"children":1570},{},[1571,1572,1578,1580],{"type":70,"value":1377},{"type":65,"tag":107,"props":1573,"children":1575},{"className":1574},[],[1576],{"type":70,"value":1577},"API-FRICTION.md",{"type":70,"value":1579}," F-094; ",{"type":65,"tag":107,"props":1581,"children":1583},{"className":1582},[],[1584],{"type":70,"value":1585},"docs\u002Freference\u002Ftypes.md",{"type":65,"tag":1191,"props":1587,"children":1589},{"id":1588},"high-running-side-effects-in-resolved-layout",[1590],{"type":70,"value":1591},"HIGH Running side effects in resolved layout",{"type":65,"tag":73,"props":1593,"children":1594},{},[1595,1597,1602],{"type":70,"value":1596},"Wrong: update application state, mutate cached rows, allocate a persistent controller, or read external changing state from ",{"type":65,"tag":107,"props":1598,"children":1600},{"className":1599},[],[1601],{"type":70,"value":1252},{"type":70,"value":601},{"type":65,"tag":73,"props":1604,"children":1605},{},[1606],{"type":70,"value":1607},"Correct: derive the returned layout solely from inputs and capture local derived rows in its render closure.",{"type":65,"tag":73,"props":1609,"children":1610},{},[1611],{"type":70,"value":1612},"Margin and responsive solving may evaluate the callback repeatedly.",{"type":65,"tag":73,"props":1614,"children":1615},{},[1616],{"type":70,"value":1617},"Source: hexbin and Sankey references",{"type":65,"tag":1191,"props":1619,"children":1621},{"id":1620},"high-tension-rich-interaction-versus-portable-rendering",[1622],{"type":70,"value":1623},"HIGH Tension: rich interaction versus portable rendering",{"type":65,"tag":73,"props":1625,"children":1626},{},[1627],{"type":70,"value":1628},"Custom DOM behavior is easy to prototype but breaks renderer parity. Prefer renderer-neutral points, focus guides, controls, and semantic application state; isolate platform code in the host seam.",{"type":65,"tag":73,"props":1630,"children":1631},{},[1632,1634,1640,1642],{"type":70,"value":1633},"See also: ",{"type":65,"tag":107,"props":1635,"children":1637},{"className":1636},[],[1638],{"type":70,"value":1639},"build-chart-interactions\u002FSKILL.md",{"type":70,"value":1641}," and ",{"type":65,"tag":107,"props":1643,"children":1645},{"className":1644},[],[1646],{"type":70,"value":1647},"ship-accessible-charts\u002FSKILL.md",{"type":65,"tag":87,"props":1649,"children":1651},{"id":1650},"references",[1652],{"type":70,"value":1653},"References",{"type":65,"tag":1655,"props":1656,"children":1657},"ul",{},[1658],{"type":65,"tag":1202,"props":1659,"children":1660},{},[1661],{"type":65,"tag":1271,"props":1662,"children":1663},{"href":1273},[1664],{"type":70,"value":1665},"Extension protocol matrix",{"type":65,"tag":73,"props":1667,"children":1668},{},[1669,1670,1676,1677,1683],{"type":70,"value":1633},{"type":65,"tag":107,"props":1671,"children":1673},{"className":1672},[],[1674],{"type":70,"value":1675},"compose-marks-and-views\u002FSKILL.md",{"type":70,"value":1641},{"type":65,"tag":107,"props":1678,"children":1680},{"className":1679},[],[1681],{"type":70,"value":1682},"debug-and-verify-charts\u002FSKILL.md",{"type":70,"value":1684}," — justify extensions against native composition and verify them across renderer boundaries.",{"type":65,"tag":1686,"props":1687,"children":1688},"style",{},[1689],{"type":70,"value":1690},"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":1692,"total":468},[1693,1706,1718,1730,1746,1759,1770],{"slug":1694,"name":1694,"fn":1695,"description":1696,"org":1697,"tags":1698,"stars":23,"repoUrl":24,"updatedAt":1705},"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},[1699,1700,1701,1704],{"name":17,"slug":18,"type":15},{"name":21,"slug":22,"type":15},{"name":1702,"slug":1703,"type":15},"Interaction","interaction",{"name":9,"slug":8,"type":15},"2026-08-15T03:47:32.82085",{"slug":55,"name":55,"fn":1707,"description":1708,"org":1709,"tags":1710,"stars":23,"repoUrl":24,"updatedAt":1717},"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},[1711,1712,1713,1714],{"name":17,"slug":18,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":1715,"slug":1716,"type":15},"UI Components","ui-components","2026-08-15T03:47:30.035164",{"slug":1719,"name":1719,"fn":1720,"description":1721,"org":1722,"tags":1723,"stars":23,"repoUrl":24,"updatedAt":1729},"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},[1724,1725,1727,1728],{"name":17,"slug":18,"type":15},{"name":1726,"slug":32,"type":15},"Data Visualization",{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-08-15T03:47:40.802271",{"slug":1731,"name":1731,"fn":1732,"description":1733,"org":1734,"tags":1735,"stars":23,"repoUrl":24,"updatedAt":1745},"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},[1736,1737,1740,1743,1744],{"name":17,"slug":18,"type":15},{"name":1738,"slug":1739,"type":15},"Data Analysis","data-analysis",{"name":1741,"slug":1742,"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":1747,"name":1747,"fn":1748,"description":1749,"org":1750,"tags":1751,"stars":23,"repoUrl":24,"updatedAt":1758},"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},[1752,1753,1756,1757],{"name":17,"slug":18,"type":15},{"name":1754,"slug":1755,"type":15},"Debugging","debugging",{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-08-15T03:47:33.503153",{"slug":1760,"name":1760,"fn":1761,"description":1762,"org":1763,"tags":1764,"stars":23,"repoUrl":24,"updatedAt":1769},"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},[1765,1766,1767,1768],{"name":17,"slug":18,"type":15},{"name":1726,"slug":32,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-08-15T03:47:40.463333",{"slug":1771,"name":1771,"fn":1772,"description":1773,"org":1774,"tags":1775,"stars":23,"repoUrl":24,"updatedAt":1782},"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},[1776,1777,1778,1779,1781],{"name":17,"slug":18,"type":15},{"name":1726,"slug":32,"type":15},{"name":21,"slug":22,"type":15},{"name":1780,"slug":39,"type":15},"SSR",{"name":9,"slug":8,"type":15},"2026-08-15T03:47:36.306971",{"items":1784,"total":1917},[1785,1797,1807,1817,1828,1843,1853,1863,1873,1886,1896,1907],{"slug":1786,"name":1786,"fn":1787,"description":1788,"org":1789,"tags":1790,"stars":1794,"repoUrl":1795,"updatedAt":1796},"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},[1791,1792,1793],{"name":1738,"slug":1739,"type":15},{"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":1798,"name":1798,"fn":1799,"description":1800,"org":1801,"tags":1802,"stars":1794,"repoUrl":1795,"updatedAt":1806},"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},[1803,1804,1805],{"name":1754,"slug":1755,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-08-11T04:05:45.454347",{"slug":1808,"name":1808,"fn":1809,"description":1810,"org":1811,"tags":1812,"stars":1794,"repoUrl":1795,"updatedAt":1816},"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},[1813,1814,1815],{"name":1738,"slug":1739,"type":15},{"name":9,"slug":8,"type":15},{"name":1715,"slug":1716,"type":15},"2026-08-11T04:05:18.454719",{"slug":1818,"name":1818,"fn":1819,"description":1820,"org":1821,"tags":1822,"stars":1794,"repoUrl":1795,"updatedAt":1827},"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},[1823,1824,1825,1826],{"name":1726,"slug":32,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":1715,"slug":1716,"type":15},"2026-08-11T04:05:16.471567",{"slug":1829,"name":1829,"fn":1830,"description":1831,"org":1832,"tags":1833,"stars":1794,"repoUrl":1795,"updatedAt":1842},"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},[1834,1837,1838,1841],{"name":1835,"slug":1836,"type":15},"Data Pipeline","data-pipeline",{"name":21,"slug":22,"type":15},{"name":1839,"slug":1840,"type":15},"Performance","performance",{"name":9,"slug":8,"type":15},"2026-08-11T04:05:25.45112",{"slug":1844,"name":1844,"fn":1845,"description":1846,"org":1847,"tags":1848,"stars":1794,"repoUrl":1795,"updatedAt":1852},"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},[1849,1850,1851],{"name":1726,"slug":32,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-08-11T04:05:21.505333",{"slug":1854,"name":1854,"fn":1855,"description":1856,"org":1857,"tags":1858,"stars":1794,"repoUrl":1795,"updatedAt":1862},"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},[1859,1860,1861],{"name":1738,"slug":1739,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-08-11T04:05:33.684468",{"slug":1864,"name":1864,"fn":1865,"description":1866,"org":1867,"tags":1868,"stars":1794,"repoUrl":1795,"updatedAt":1872},"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},[1869,1870,1871],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":1715,"slug":1716,"type":15},"2026-08-11T04:05:43.445905",{"slug":1874,"name":1874,"fn":1875,"description":1876,"org":1877,"tags":1878,"stars":1794,"repoUrl":1795,"updatedAt":1885},"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},[1879,1882,1883,1884],{"name":1880,"slug":1881,"type":15},"CSS","css",{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":1715,"slug":1716,"type":15},"2026-08-11T04:05:35.453858",{"slug":1887,"name":1887,"fn":1888,"description":1889,"org":1890,"tags":1891,"stars":1794,"repoUrl":1795,"updatedAt":1895},"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},[1892,1893,1894],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":1715,"slug":1716,"type":15},"2026-08-11T04:05:31.46447",{"slug":1897,"name":1897,"fn":1898,"description":1899,"org":1900,"tags":1901,"stars":1794,"repoUrl":1795,"updatedAt":1906},"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},[1902,1903,1904,1905],{"name":1880,"slug":1881,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":1715,"slug":1716,"type":15},"2026-08-11T04:05:28.559861",{"slug":1908,"name":1908,"fn":1909,"description":1910,"org":1911,"tags":1912,"stars":1794,"repoUrl":1795,"updatedAt":1916},"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},[1913,1914,1915],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":1715,"slug":1716,"type":15},"2026-08-11T04:05:27.479925",139]