[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-tanstack-design-responsive-charts":3,"mdc--rf83oc-key":49,"related-repo-tanstack-design-responsive-charts":2154,"related-org-tanstack-design-responsive-charts":2241},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":26,"repoUrl":27,"updatedAt":28,"license":29,"forks":30,"topics":31,"repo":44,"sourceUrl":47,"mdContent":48},"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},"tanstack","TanStack","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Ftanstack.png",[12,16,19,22,23],{"name":13,"slug":14,"type":15},"Data Visualization","data-visualization","tag",{"name":17,"slug":18,"type":15},"Charts","charts",{"name":20,"slug":21,"type":15},"SSR","ssr",{"name":9,"slug":8,"type":15},{"name":24,"slug":25,"type":15},"Frontend","frontend",608,"https:\u002F\u002Fgithub.com\u002FTanStack\u002Fcharts","2026-08-15T03:47:36.306971",null,40,[32,33,18,34,14,35,36,37,38,39,40,21,41,8,42,43],"accessible-charts","charting-library","d3","dataviz","grammar-of-graphics","javascript","octane","react","responsive-charts","svg","typescript","visualization",{"repoUrl":27,"stars":26,"forks":30,"topics":45,"description":46},[32,33,18,34,14,35,36,37,38,39,40,21,41,8,42,43],"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\u002Fdesign-responsive-charts","---\nname: design-responsive-charts\ndescription: >\n  Make TanStack Charts adapt to measured containers, information priority,\n  guide margins, SSR initial width, and final plot bounds. Load for narrow\n  dashboards, overflow, label density, responsive topology, or pixel-space\n  layouts.\nmetadata:\n  type: core\n  library: '@tanstack\u002Fcharts'\n  library_version: '0.9.0'\nsources:\n  - 'TanStack\u002Fcharts:docs\u002Fguides\u002Fresponsive-charts.md'\n  - 'TanStack\u002Fcharts:docs\u002Freference\u002Fchart-definitions.md'\n  - 'TanStack\u002Fcharts:docs\u002Freference\u002Fmarks\u002Fwaffle.md'\n  - 'TanStack\u002Fcharts:docs\u002Freference\u002Fmarks\u002Ftreemap.md'\n---\n\n# Design Responsive Charts\n\nUse **trigger → inspect → decide → build → verify**. Adapt to the chart container and information priority; do not equate responsive design with stretching geometry.\n\n## Setup\n\nOmit host width, choose height deliberately, and use the responsive definition only for surface-dependent decisions:\n\n```ts\nimport { barX, defineChart, mountChart } from '@tanstack\u002Fcharts'\nimport { scaleBand } from '@tanstack\u002Fcharts\u002Fscales\u002Fband'\nimport { scaleLinear } from '@tanstack\u002Fcharts\u002Fscales\u002Flinear'\n\nconst rows = [\n  { feature: 'Account recovery', requests: 128 },\n  { feature: 'Saved searches', requests: 95 },\n  { feature: 'Audit export', requests: 72 },\n]\n\nconst definition = defineChart(({ width }) => ({\n  marks: [barX(rows, { x: 'requests', y: 'feature' })],\n  x: {\n    scale: scaleLinear,\n    nice: true,\n    axis: { ticks: { count: width \u003C 420 ? 3 : 6 } },\n  },\n  y: { scale: () => scaleBand\u003Cstring>().padding(0.1) },\n}))\n\nconst element = document.querySelector\u003CHTMLElement>('#feature-chart')\nif (!element) throw new Error('Missing #feature-chart')\n\nexport const host = mountChart(element, {\n  definition,\n  height: 320,\n  initialWidth: 640,\n  ariaLabel: 'Weekly feature requests',\n})\n```\n\nThe container's grid or flex item must be allowed to shrink, usually with `min-width: 0`.\n\n## Core Patterns\n\n### Adapt information in priority order\n\nAt narrower containers:\n\n1. Reduce tick candidates and optional annotations.\n2. Thin, abbreviate, rotate, or directly label essential values.\n3. Change orientation or facet layout without changing metric semantics.\n4. Aggregate only when the question remains valid.\n5. Replace the chart with a focused summary or accessible table when the comparison no longer fits.\n\nKeep domains, thresholds, units, and category-color assignments stable when readers compare the same chart across sizes.\n\n### Distinguish surface bounds from plot bounds\n\nThe responsive builder receives full surface `width` and `height`. Axes, legends, and measured text later determine `scene.chart`, the final inner plot. Use:\n\n- responsive builder context for surface breakpoints and representation choice;\n- custom-mark render bounds for plot-space geometry;\n- `host.getScene().chart` for application overlays after render.\n\nDo not duplicate margin math in application code.\n\n### Treat topology as responsive state\n\nWaffle packing, treemaps, Sankey columns, facets, Delaunay links, hexbins, density contours, and label fit can change membership or arrangement when final bounds change. Verify semantic keys and interaction state after topology changes, not only node dimensions.\n\n### Use deterministic initial geometry\n\nSupply the same `initialWidth` for equivalent server renders. The client adopts the measured container width after hydration. Use fixed `width` only for exports, benchmarks, or another application-owned frame.\n\n## Common Mistakes\n\n### CRITICAL Adapting to viewport width\n\nWrong:\n\n```ts\nconst compact = window.innerWidth \u003C 640\n```\n\nCorrect:\n\n```ts\ndefineChart(({ width }) => ({\n  marks,\n  x: {\n    scale: scaleLinear,\n    axis: { ticks: { count: width \u003C 420 ? 4 : 8 } },\n  },\n}))\n```\n\nDashboard panels and embeds can be narrow inside a wide viewport.\n\nSource: `docs\u002Fguides\u002Fresponsive-charts.md`\n\n### CRITICAL Using surface width as plot width\n\nWrong: compute bins, collisions, or overlay positions directly from responsive builder width.\n\nCorrect: perform exact pixel work from resolved custom-mark bounds or `scene.chart`.\n\nGuides and legends reduce the final plot after the builder returns.\n\nSource: `API-FRICTION.md` F-116, F-219; `docs\u002Fguides\u002Fresponsive-charts.md`\n\n### HIGH Assuming resize only stretches geometry\n\nWrong: preserve old treemap, facet, waffle, Delaunay, hexbin, or label topology and scale its pixels.\n\nCorrect: let the owning resolved-layout primitive recompute from final bounds and preserve semantic keys through the change.\n\nMany final-pixel layouts change topology, not only size.\n\nSource: waffle, treemap, Delaunay, and hexbin mark references\n\n### HIGH Using fixed width for application charts\n\nWrong:\n\n```ts\nmountChart(element, { definition, width: 640, height: 320, ariaLabel })\n```\n\nCorrect:\n\n```ts\nmountChart(element, {\n  definition,\n  height: 320,\n  initialWidth: 640,\n  ariaLabel,\n})\n```\n\nFixed width opts out of container measurement; missing `initialWidth` or shrink constraints causes different SSR or overflow failures.\n\nSource: `docs\u002Fguides\u002Fresponsive-charts.md`; `API-FRICTION.md` F-111\n\n### CRITICAL Assigning positional pixel ranges\n\nWrong:\n\n```ts\nx: {\n  scale: scaleLinear().range([0, 640])\n}\n```\n\nCorrect:\n\n```ts\nx: {\n  scale: scaleLinear\n}\n```\n\nThe range must follow the final plot after container measurement and guide margins resolve.\n\nSource: `API-FRICTION.md` F-002; `docs\u002Fconcepts\u002Fscales-and-d3.md`\n\n### HIGH Treating containment as collision avoidance\n\nWrong: expect automatic margins to make every long tick label readable.\n\nCorrect: choose responsive candidate spacing, thinning, rotation, abbreviation, or a different composition.\n\nMargins contain guides inside the surface; they do not resolve every label-label collision.\n\nSource: `API-FRICTION.md` F-023, F-160; `docs\u002Fguides\u002Fresponsive-charts.md`\n\n### HIGH Tension: responsive adaptation versus comparison stability\n\nReduce guide density and change composition without silently changing what position, color, or a threshold means.\n\nSee also: `configure-scales-guides-color\u002FSKILL.md` § Common Mistakes\n\n### HIGH Tension: motion continuity versus current-state correctness\n\nResponsive relayout should commit immediately by default. Animating every observed resize can leave geometry behind the actual panel size and repeatedly interrupt transitions.\n\nSee also: `update-and-animate-charts\u002FSKILL.md` and `debug-and-verify-charts\u002FSKILL.md`\n\nSee also: `ship-accessible-charts\u002FSKILL.md` and `update-and-animate-charts\u002FSKILL.md` — initial size, label priority, and resize policy affect hydration, accessibility, and motion.\n",{"data":50,"body":60},{"name":4,"description":6,"metadata":51,"sources":55},{"type":52,"library":53,"library_version":54},"core","@tanstack\u002Fcharts","0.9.0",[56,57,58,59],"TanStack\u002Fcharts:docs\u002Fguides\u002Fresponsive-charts.md","TanStack\u002Fcharts:docs\u002Freference\u002Fchart-definitions.md","TanStack\u002Fcharts:docs\u002Freference\u002Fmarks\u002Fwaffle.md","TanStack\u002Fcharts:docs\u002Freference\u002Fmarks\u002Ftreemap.md",{"type":61,"children":62},"root",[63,71,85,92,97,1154,1166,1172,1179,1184,1214,1219,1225,1254,1279,1284,1290,1295,1301,1321,1327,1333,1338,1384,1389,1568,1573,1584,1590,1595,1606,1611,1628,1634,1639,1644,1649,1654,1660,1664,1746,1750,1847,1859,1877,1883,1887,1970,1974,2019,2024,2041,2047,2052,2057,2062,2078,2084,2089,2102,2108,2113,2130,2148],{"type":64,"tag":65,"props":66,"children":67},"element","h1",{"id":4},[68],{"type":69,"value":70},"text","Design Responsive Charts",{"type":64,"tag":72,"props":73,"children":74},"p",{},[75,77,83],{"type":69,"value":76},"Use ",{"type":64,"tag":78,"props":79,"children":80},"strong",{},[81],{"type":69,"value":82},"trigger → inspect → decide → build → verify",{"type":69,"value":84},". Adapt to the chart container and information priority; do not equate responsive design with stretching geometry.",{"type":64,"tag":86,"props":87,"children":89},"h2",{"id":88},"setup",[90],{"type":69,"value":91},"Setup",{"type":64,"tag":72,"props":93,"children":94},{},[95],{"type":69,"value":96},"Omit host width, choose height deliberately, and use the responsive definition only for surface-dependent decisions:",{"type":64,"tag":98,"props":99,"children":104},"pre",{"className":100,"code":101,"language":102,"meta":103,"style":103},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { barX, defineChart, mountChart } from '@tanstack\u002Fcharts'\nimport { scaleBand } from '@tanstack\u002Fcharts\u002Fscales\u002Fband'\nimport { scaleLinear } from '@tanstack\u002Fcharts\u002Fscales\u002Flinear'\n\nconst rows = [\n  { feature: 'Account recovery', requests: 128 },\n  { feature: 'Saved searches', requests: 95 },\n  { feature: 'Audit export', requests: 72 },\n]\n\nconst definition = defineChart(({ width }) => ({\n  marks: [barX(rows, { x: 'requests', y: 'feature' })],\n  x: {\n    scale: scaleLinear,\n    nice: true,\n    axis: { ticks: { count: width \u003C 420 ? 3 : 6 } },\n  },\n  y: { scale: () => scaleBand\u003Cstring>().padding(0.1) },\n}))\n\nconst element = document.querySelector\u003CHTMLElement>('#feature-chart')\nif (!element) throw new Error('Missing #feature-chart')\n\nexport const host = mountChart(element, {\n  definition,\n  height: 320,\n  initialWidth: 640,\n  ariaLabel: 'Weekly feature requests',\n})\n","ts","",[105],{"type":64,"tag":106,"props":107,"children":108},"code",{"__ignoreMap":103},[109,177,215,253,263,288,346,396,446,455,463,521,619,637,658,681,763,772,860,874,882,948,1007,1015,1055,1068,1090,1112,1142],{"type":64,"tag":110,"props":111,"children":114},"span",{"class":112,"line":113},"line",1,[115,121,127,133,138,143,147,152,157,162,167,172],{"type":64,"tag":110,"props":116,"children":118},{"style":117},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[119],{"type":69,"value":120},"import",{"type":64,"tag":110,"props":122,"children":124},{"style":123},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[125],{"type":69,"value":126}," {",{"type":64,"tag":110,"props":128,"children":130},{"style":129},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[131],{"type":69,"value":132}," barX",{"type":64,"tag":110,"props":134,"children":135},{"style":123},[136],{"type":69,"value":137},",",{"type":64,"tag":110,"props":139,"children":140},{"style":129},[141],{"type":69,"value":142}," defineChart",{"type":64,"tag":110,"props":144,"children":145},{"style":123},[146],{"type":69,"value":137},{"type":64,"tag":110,"props":148,"children":149},{"style":129},[150],{"type":69,"value":151}," mountChart",{"type":64,"tag":110,"props":153,"children":154},{"style":123},[155],{"type":69,"value":156}," }",{"type":64,"tag":110,"props":158,"children":159},{"style":117},[160],{"type":69,"value":161}," from",{"type":64,"tag":110,"props":163,"children":164},{"style":123},[165],{"type":69,"value":166}," '",{"type":64,"tag":110,"props":168,"children":170},{"style":169},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[171],{"type":69,"value":53},{"type":64,"tag":110,"props":173,"children":174},{"style":123},[175],{"type":69,"value":176},"'\n",{"type":64,"tag":110,"props":178,"children":180},{"class":112,"line":179},2,[181,185,189,194,198,202,206,211],{"type":64,"tag":110,"props":182,"children":183},{"style":117},[184],{"type":69,"value":120},{"type":64,"tag":110,"props":186,"children":187},{"style":123},[188],{"type":69,"value":126},{"type":64,"tag":110,"props":190,"children":191},{"style":129},[192],{"type":69,"value":193}," scaleBand",{"type":64,"tag":110,"props":195,"children":196},{"style":123},[197],{"type":69,"value":156},{"type":64,"tag":110,"props":199,"children":200},{"style":117},[201],{"type":69,"value":161},{"type":64,"tag":110,"props":203,"children":204},{"style":123},[205],{"type":69,"value":166},{"type":64,"tag":110,"props":207,"children":208},{"style":169},[209],{"type":69,"value":210},"@tanstack\u002Fcharts\u002Fscales\u002Fband",{"type":64,"tag":110,"props":212,"children":213},{"style":123},[214],{"type":69,"value":176},{"type":64,"tag":110,"props":216,"children":218},{"class":112,"line":217},3,[219,223,227,232,236,240,244,249],{"type":64,"tag":110,"props":220,"children":221},{"style":117},[222],{"type":69,"value":120},{"type":64,"tag":110,"props":224,"children":225},{"style":123},[226],{"type":69,"value":126},{"type":64,"tag":110,"props":228,"children":229},{"style":129},[230],{"type":69,"value":231}," scaleLinear",{"type":64,"tag":110,"props":233,"children":234},{"style":123},[235],{"type":69,"value":156},{"type":64,"tag":110,"props":237,"children":238},{"style":117},[239],{"type":69,"value":161},{"type":64,"tag":110,"props":241,"children":242},{"style":123},[243],{"type":69,"value":166},{"type":64,"tag":110,"props":245,"children":246},{"style":169},[247],{"type":69,"value":248},"@tanstack\u002Fcharts\u002Fscales\u002Flinear",{"type":64,"tag":110,"props":250,"children":251},{"style":123},[252],{"type":69,"value":176},{"type":64,"tag":110,"props":254,"children":256},{"class":112,"line":255},4,[257],{"type":64,"tag":110,"props":258,"children":260},{"emptyLinePlaceholder":259},true,[261],{"type":69,"value":262},"\n",{"type":64,"tag":110,"props":264,"children":266},{"class":112,"line":265},5,[267,273,278,283],{"type":64,"tag":110,"props":268,"children":270},{"style":269},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[271],{"type":69,"value":272},"const",{"type":64,"tag":110,"props":274,"children":275},{"style":129},[276],{"type":69,"value":277}," rows ",{"type":64,"tag":110,"props":279,"children":280},{"style":123},[281],{"type":69,"value":282},"=",{"type":64,"tag":110,"props":284,"children":285},{"style":129},[286],{"type":69,"value":287}," [\n",{"type":64,"tag":110,"props":289,"children":291},{"class":112,"line":290},6,[292,297,303,308,312,317,322,326,331,335,341],{"type":64,"tag":110,"props":293,"children":294},{"style":123},[295],{"type":69,"value":296},"  {",{"type":64,"tag":110,"props":298,"children":300},{"style":299},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[301],{"type":69,"value":302}," feature",{"type":64,"tag":110,"props":304,"children":305},{"style":123},[306],{"type":69,"value":307},":",{"type":64,"tag":110,"props":309,"children":310},{"style":123},[311],{"type":69,"value":166},{"type":64,"tag":110,"props":313,"children":314},{"style":169},[315],{"type":69,"value":316},"Account recovery",{"type":64,"tag":110,"props":318,"children":319},{"style":123},[320],{"type":69,"value":321},"'",{"type":64,"tag":110,"props":323,"children":324},{"style":123},[325],{"type":69,"value":137},{"type":64,"tag":110,"props":327,"children":328},{"style":299},[329],{"type":69,"value":330}," requests",{"type":64,"tag":110,"props":332,"children":333},{"style":123},[334],{"type":69,"value":307},{"type":64,"tag":110,"props":336,"children":338},{"style":337},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[339],{"type":69,"value":340}," 128",{"type":64,"tag":110,"props":342,"children":343},{"style":123},[344],{"type":69,"value":345}," },\n",{"type":64,"tag":110,"props":347,"children":349},{"class":112,"line":348},7,[350,354,358,362,366,371,375,379,383,387,392],{"type":64,"tag":110,"props":351,"children":352},{"style":123},[353],{"type":69,"value":296},{"type":64,"tag":110,"props":355,"children":356},{"style":299},[357],{"type":69,"value":302},{"type":64,"tag":110,"props":359,"children":360},{"style":123},[361],{"type":69,"value":307},{"type":64,"tag":110,"props":363,"children":364},{"style":123},[365],{"type":69,"value":166},{"type":64,"tag":110,"props":367,"children":368},{"style":169},[369],{"type":69,"value":370},"Saved searches",{"type":64,"tag":110,"props":372,"children":373},{"style":123},[374],{"type":69,"value":321},{"type":64,"tag":110,"props":376,"children":377},{"style":123},[378],{"type":69,"value":137},{"type":64,"tag":110,"props":380,"children":381},{"style":299},[382],{"type":69,"value":330},{"type":64,"tag":110,"props":384,"children":385},{"style":123},[386],{"type":69,"value":307},{"type":64,"tag":110,"props":388,"children":389},{"style":337},[390],{"type":69,"value":391}," 95",{"type":64,"tag":110,"props":393,"children":394},{"style":123},[395],{"type":69,"value":345},{"type":64,"tag":110,"props":397,"children":399},{"class":112,"line":398},8,[400,404,408,412,416,421,425,429,433,437,442],{"type":64,"tag":110,"props":401,"children":402},{"style":123},[403],{"type":69,"value":296},{"type":64,"tag":110,"props":405,"children":406},{"style":299},[407],{"type":69,"value":302},{"type":64,"tag":110,"props":409,"children":410},{"style":123},[411],{"type":69,"value":307},{"type":64,"tag":110,"props":413,"children":414},{"style":123},[415],{"type":69,"value":166},{"type":64,"tag":110,"props":417,"children":418},{"style":169},[419],{"type":69,"value":420},"Audit export",{"type":64,"tag":110,"props":422,"children":423},{"style":123},[424],{"type":69,"value":321},{"type":64,"tag":110,"props":426,"children":427},{"style":123},[428],{"type":69,"value":137},{"type":64,"tag":110,"props":430,"children":431},{"style":299},[432],{"type":69,"value":330},{"type":64,"tag":110,"props":434,"children":435},{"style":123},[436],{"type":69,"value":307},{"type":64,"tag":110,"props":438,"children":439},{"style":337},[440],{"type":69,"value":441}," 72",{"type":64,"tag":110,"props":443,"children":444},{"style":123},[445],{"type":69,"value":345},{"type":64,"tag":110,"props":447,"children":449},{"class":112,"line":448},9,[450],{"type":64,"tag":110,"props":451,"children":452},{"style":129},[453],{"type":69,"value":454},"]\n",{"type":64,"tag":110,"props":456,"children":458},{"class":112,"line":457},10,[459],{"type":64,"tag":110,"props":460,"children":461},{"emptyLinePlaceholder":259},[462],{"type":69,"value":262},{"type":64,"tag":110,"props":464,"children":466},{"class":112,"line":465},11,[467,471,476,480,485,490,495,501,506,511,516],{"type":64,"tag":110,"props":468,"children":469},{"style":269},[470],{"type":69,"value":272},{"type":64,"tag":110,"props":472,"children":473},{"style":129},[474],{"type":69,"value":475}," definition ",{"type":64,"tag":110,"props":477,"children":478},{"style":123},[479],{"type":69,"value":282},{"type":64,"tag":110,"props":481,"children":483},{"style":482},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[484],{"type":69,"value":142},{"type":64,"tag":110,"props":486,"children":487},{"style":129},[488],{"type":69,"value":489},"(",{"type":64,"tag":110,"props":491,"children":492},{"style":123},[493],{"type":69,"value":494},"({",{"type":64,"tag":110,"props":496,"children":498},{"style":497},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[499],{"type":69,"value":500}," width",{"type":64,"tag":110,"props":502,"children":503},{"style":123},[504],{"type":69,"value":505}," })",{"type":64,"tag":110,"props":507,"children":508},{"style":269},[509],{"type":69,"value":510}," =>",{"type":64,"tag":110,"props":512,"children":513},{"style":129},[514],{"type":69,"value":515}," (",{"type":64,"tag":110,"props":517,"children":518},{"style":123},[519],{"type":69,"value":520},"{\n",{"type":64,"tag":110,"props":522,"children":524},{"class":112,"line":523},12,[525,530,534,539,544,549,553,557,562,566,570,575,579,583,588,592,596,601,605,609,614],{"type":64,"tag":110,"props":526,"children":527},{"style":299},[528],{"type":69,"value":529},"  marks",{"type":64,"tag":110,"props":531,"children":532},{"style":123},[533],{"type":69,"value":307},{"type":64,"tag":110,"props":535,"children":536},{"style":129},[537],{"type":69,"value":538}," [",{"type":64,"tag":110,"props":540,"children":541},{"style":482},[542],{"type":69,"value":543},"barX",{"type":64,"tag":110,"props":545,"children":546},{"style":129},[547],{"type":69,"value":548},"(rows",{"type":64,"tag":110,"props":550,"children":551},{"style":123},[552],{"type":69,"value":137},{"type":64,"tag":110,"props":554,"children":555},{"style":123},[556],{"type":69,"value":126},{"type":64,"tag":110,"props":558,"children":559},{"style":299},[560],{"type":69,"value":561}," x",{"type":64,"tag":110,"props":563,"children":564},{"style":123},[565],{"type":69,"value":307},{"type":64,"tag":110,"props":567,"children":568},{"style":123},[569],{"type":69,"value":166},{"type":64,"tag":110,"props":571,"children":572},{"style":169},[573],{"type":69,"value":574},"requests",{"type":64,"tag":110,"props":576,"children":577},{"style":123},[578],{"type":69,"value":321},{"type":64,"tag":110,"props":580,"children":581},{"style":123},[582],{"type":69,"value":137},{"type":64,"tag":110,"props":584,"children":585},{"style":299},[586],{"type":69,"value":587}," y",{"type":64,"tag":110,"props":589,"children":590},{"style":123},[591],{"type":69,"value":307},{"type":64,"tag":110,"props":593,"children":594},{"style":123},[595],{"type":69,"value":166},{"type":64,"tag":110,"props":597,"children":598},{"style":169},[599],{"type":69,"value":600},"feature",{"type":64,"tag":110,"props":602,"children":603},{"style":123},[604],{"type":69,"value":321},{"type":64,"tag":110,"props":606,"children":607},{"style":123},[608],{"type":69,"value":156},{"type":64,"tag":110,"props":610,"children":611},{"style":129},[612],{"type":69,"value":613},")]",{"type":64,"tag":110,"props":615,"children":616},{"style":123},[617],{"type":69,"value":618},",\n",{"type":64,"tag":110,"props":620,"children":622},{"class":112,"line":621},13,[623,628,632],{"type":64,"tag":110,"props":624,"children":625},{"style":299},[626],{"type":69,"value":627},"  x",{"type":64,"tag":110,"props":629,"children":630},{"style":123},[631],{"type":69,"value":307},{"type":64,"tag":110,"props":633,"children":634},{"style":123},[635],{"type":69,"value":636}," {\n",{"type":64,"tag":110,"props":638,"children":640},{"class":112,"line":639},14,[641,646,650,654],{"type":64,"tag":110,"props":642,"children":643},{"style":299},[644],{"type":69,"value":645},"    scale",{"type":64,"tag":110,"props":647,"children":648},{"style":123},[649],{"type":69,"value":307},{"type":64,"tag":110,"props":651,"children":652},{"style":129},[653],{"type":69,"value":231},{"type":64,"tag":110,"props":655,"children":656},{"style":123},[657],{"type":69,"value":618},{"type":64,"tag":110,"props":659,"children":661},{"class":112,"line":660},15,[662,667,671,677],{"type":64,"tag":110,"props":663,"children":664},{"style":299},[665],{"type":69,"value":666},"    nice",{"type":64,"tag":110,"props":668,"children":669},{"style":123},[670],{"type":69,"value":307},{"type":64,"tag":110,"props":672,"children":674},{"style":673},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[675],{"type":69,"value":676}," true",{"type":64,"tag":110,"props":678,"children":679},{"style":123},[680],{"type":69,"value":618},{"type":64,"tag":110,"props":682,"children":684},{"class":112,"line":683},16,[685,690,694,698,703,707,711,716,720,725,730,735,740,745,750,755,759],{"type":64,"tag":110,"props":686,"children":687},{"style":299},[688],{"type":69,"value":689},"    axis",{"type":64,"tag":110,"props":691,"children":692},{"style":123},[693],{"type":69,"value":307},{"type":64,"tag":110,"props":695,"children":696},{"style":123},[697],{"type":69,"value":126},{"type":64,"tag":110,"props":699,"children":700},{"style":299},[701],{"type":69,"value":702}," ticks",{"type":64,"tag":110,"props":704,"children":705},{"style":123},[706],{"type":69,"value":307},{"type":64,"tag":110,"props":708,"children":709},{"style":123},[710],{"type":69,"value":126},{"type":64,"tag":110,"props":712,"children":713},{"style":299},[714],{"type":69,"value":715}," count",{"type":64,"tag":110,"props":717,"children":718},{"style":123},[719],{"type":69,"value":307},{"type":64,"tag":110,"props":721,"children":722},{"style":129},[723],{"type":69,"value":724}," width ",{"type":64,"tag":110,"props":726,"children":727},{"style":123},[728],{"type":69,"value":729},"\u003C",{"type":64,"tag":110,"props":731,"children":732},{"style":337},[733],{"type":69,"value":734}," 420",{"type":64,"tag":110,"props":736,"children":737},{"style":123},[738],{"type":69,"value":739}," ?",{"type":64,"tag":110,"props":741,"children":742},{"style":337},[743],{"type":69,"value":744}," 3",{"type":64,"tag":110,"props":746,"children":747},{"style":123},[748],{"type":69,"value":749}," :",{"type":64,"tag":110,"props":751,"children":752},{"style":337},[753],{"type":69,"value":754}," 6",{"type":64,"tag":110,"props":756,"children":757},{"style":123},[758],{"type":69,"value":156},{"type":64,"tag":110,"props":760,"children":761},{"style":123},[762],{"type":69,"value":345},{"type":64,"tag":110,"props":764,"children":766},{"class":112,"line":765},17,[767],{"type":64,"tag":110,"props":768,"children":769},{"style":123},[770],{"type":69,"value":771},"  },\n",{"type":64,"tag":110,"props":773,"children":775},{"class":112,"line":774},18,[776,781,785,789,794,798,803,807,811,815,821,826,831,836,841,845,850,855],{"type":64,"tag":110,"props":777,"children":778},{"style":299},[779],{"type":69,"value":780},"  y",{"type":64,"tag":110,"props":782,"children":783},{"style":123},[784],{"type":69,"value":307},{"type":64,"tag":110,"props":786,"children":787},{"style":123},[788],{"type":69,"value":126},{"type":64,"tag":110,"props":790,"children":791},{"style":482},[792],{"type":69,"value":793}," scale",{"type":64,"tag":110,"props":795,"children":796},{"style":123},[797],{"type":69,"value":307},{"type":64,"tag":110,"props":799,"children":800},{"style":123},[801],{"type":69,"value":802}," ()",{"type":64,"tag":110,"props":804,"children":805},{"style":269},[806],{"type":69,"value":510},{"type":64,"tag":110,"props":808,"children":809},{"style":482},[810],{"type":69,"value":193},{"type":64,"tag":110,"props":812,"children":813},{"style":123},[814],{"type":69,"value":729},{"type":64,"tag":110,"props":816,"children":818},{"style":817},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[819],{"type":69,"value":820},"string",{"type":64,"tag":110,"props":822,"children":823},{"style":123},[824],{"type":69,"value":825},">",{"type":64,"tag":110,"props":827,"children":828},{"style":129},[829],{"type":69,"value":830},"()",{"type":64,"tag":110,"props":832,"children":833},{"style":123},[834],{"type":69,"value":835},".",{"type":64,"tag":110,"props":837,"children":838},{"style":482},[839],{"type":69,"value":840},"padding",{"type":64,"tag":110,"props":842,"children":843},{"style":129},[844],{"type":69,"value":489},{"type":64,"tag":110,"props":846,"children":847},{"style":337},[848],{"type":69,"value":849},"0.1",{"type":64,"tag":110,"props":851,"children":852},{"style":129},[853],{"type":69,"value":854},") ",{"type":64,"tag":110,"props":856,"children":857},{"style":123},[858],{"type":69,"value":859},"},\n",{"type":64,"tag":110,"props":861,"children":863},{"class":112,"line":862},19,[864,869],{"type":64,"tag":110,"props":865,"children":866},{"style":123},[867],{"type":69,"value":868},"}",{"type":64,"tag":110,"props":870,"children":871},{"style":129},[872],{"type":69,"value":873},"))\n",{"type":64,"tag":110,"props":875,"children":877},{"class":112,"line":876},20,[878],{"type":64,"tag":110,"props":879,"children":880},{"emptyLinePlaceholder":259},[881],{"type":69,"value":262},{"type":64,"tag":110,"props":883,"children":885},{"class":112,"line":884},21,[886,890,895,899,904,908,913,917,922,926,930,934,939,943],{"type":64,"tag":110,"props":887,"children":888},{"style":269},[889],{"type":69,"value":272},{"type":64,"tag":110,"props":891,"children":892},{"style":129},[893],{"type":69,"value":894}," element ",{"type":64,"tag":110,"props":896,"children":897},{"style":123},[898],{"type":69,"value":282},{"type":64,"tag":110,"props":900,"children":901},{"style":129},[902],{"type":69,"value":903}," document",{"type":64,"tag":110,"props":905,"children":906},{"style":123},[907],{"type":69,"value":835},{"type":64,"tag":110,"props":909,"children":910},{"style":482},[911],{"type":69,"value":912},"querySelector",{"type":64,"tag":110,"props":914,"children":915},{"style":123},[916],{"type":69,"value":729},{"type":64,"tag":110,"props":918,"children":919},{"style":817},[920],{"type":69,"value":921},"HTMLElement",{"type":64,"tag":110,"props":923,"children":924},{"style":123},[925],{"type":69,"value":825},{"type":64,"tag":110,"props":927,"children":928},{"style":129},[929],{"type":69,"value":489},{"type":64,"tag":110,"props":931,"children":932},{"style":123},[933],{"type":69,"value":321},{"type":64,"tag":110,"props":935,"children":936},{"style":169},[937],{"type":69,"value":938},"#feature-chart",{"type":64,"tag":110,"props":940,"children":941},{"style":123},[942],{"type":69,"value":321},{"type":64,"tag":110,"props":944,"children":945},{"style":129},[946],{"type":69,"value":947},")\n",{"type":64,"tag":110,"props":949,"children":951},{"class":112,"line":950},22,[952,957,961,966,971,976,981,986,990,994,999,1003],{"type":64,"tag":110,"props":953,"children":954},{"style":117},[955],{"type":69,"value":956},"if",{"type":64,"tag":110,"props":958,"children":959},{"style":129},[960],{"type":69,"value":515},{"type":64,"tag":110,"props":962,"children":963},{"style":123},[964],{"type":69,"value":965},"!",{"type":64,"tag":110,"props":967,"children":968},{"style":129},[969],{"type":69,"value":970},"element) ",{"type":64,"tag":110,"props":972,"children":973},{"style":117},[974],{"type":69,"value":975},"throw",{"type":64,"tag":110,"props":977,"children":978},{"style":123},[979],{"type":69,"value":980}," new",{"type":64,"tag":110,"props":982,"children":983},{"style":482},[984],{"type":69,"value":985}," Error",{"type":64,"tag":110,"props":987,"children":988},{"style":129},[989],{"type":69,"value":489},{"type":64,"tag":110,"props":991,"children":992},{"style":123},[993],{"type":69,"value":321},{"type":64,"tag":110,"props":995,"children":996},{"style":169},[997],{"type":69,"value":998},"Missing #feature-chart",{"type":64,"tag":110,"props":1000,"children":1001},{"style":123},[1002],{"type":69,"value":321},{"type":64,"tag":110,"props":1004,"children":1005},{"style":129},[1006],{"type":69,"value":947},{"type":64,"tag":110,"props":1008,"children":1010},{"class":112,"line":1009},23,[1011],{"type":64,"tag":110,"props":1012,"children":1013},{"emptyLinePlaceholder":259},[1014],{"type":69,"value":262},{"type":64,"tag":110,"props":1016,"children":1018},{"class":112,"line":1017},24,[1019,1024,1029,1034,1038,1042,1047,1051],{"type":64,"tag":110,"props":1020,"children":1021},{"style":117},[1022],{"type":69,"value":1023},"export",{"type":64,"tag":110,"props":1025,"children":1026},{"style":269},[1027],{"type":69,"value":1028}," const",{"type":64,"tag":110,"props":1030,"children":1031},{"style":129},[1032],{"type":69,"value":1033}," host ",{"type":64,"tag":110,"props":1035,"children":1036},{"style":123},[1037],{"type":69,"value":282},{"type":64,"tag":110,"props":1039,"children":1040},{"style":482},[1041],{"type":69,"value":151},{"type":64,"tag":110,"props":1043,"children":1044},{"style":129},[1045],{"type":69,"value":1046},"(element",{"type":64,"tag":110,"props":1048,"children":1049},{"style":123},[1050],{"type":69,"value":137},{"type":64,"tag":110,"props":1052,"children":1053},{"style":123},[1054],{"type":69,"value":636},{"type":64,"tag":110,"props":1056,"children":1058},{"class":112,"line":1057},25,[1059,1064],{"type":64,"tag":110,"props":1060,"children":1061},{"style":129},[1062],{"type":69,"value":1063},"  definition",{"type":64,"tag":110,"props":1065,"children":1066},{"style":123},[1067],{"type":69,"value":618},{"type":64,"tag":110,"props":1069,"children":1071},{"class":112,"line":1070},26,[1072,1077,1081,1086],{"type":64,"tag":110,"props":1073,"children":1074},{"style":299},[1075],{"type":69,"value":1076},"  height",{"type":64,"tag":110,"props":1078,"children":1079},{"style":123},[1080],{"type":69,"value":307},{"type":64,"tag":110,"props":1082,"children":1083},{"style":337},[1084],{"type":69,"value":1085}," 320",{"type":64,"tag":110,"props":1087,"children":1088},{"style":123},[1089],{"type":69,"value":618},{"type":64,"tag":110,"props":1091,"children":1093},{"class":112,"line":1092},27,[1094,1099,1103,1108],{"type":64,"tag":110,"props":1095,"children":1096},{"style":299},[1097],{"type":69,"value":1098},"  initialWidth",{"type":64,"tag":110,"props":1100,"children":1101},{"style":123},[1102],{"type":69,"value":307},{"type":64,"tag":110,"props":1104,"children":1105},{"style":337},[1106],{"type":69,"value":1107}," 640",{"type":64,"tag":110,"props":1109,"children":1110},{"style":123},[1111],{"type":69,"value":618},{"type":64,"tag":110,"props":1113,"children":1115},{"class":112,"line":1114},28,[1116,1121,1125,1129,1134,1138],{"type":64,"tag":110,"props":1117,"children":1118},{"style":299},[1119],{"type":69,"value":1120},"  ariaLabel",{"type":64,"tag":110,"props":1122,"children":1123},{"style":123},[1124],{"type":69,"value":307},{"type":64,"tag":110,"props":1126,"children":1127},{"style":123},[1128],{"type":69,"value":166},{"type":64,"tag":110,"props":1130,"children":1131},{"style":169},[1132],{"type":69,"value":1133},"Weekly feature requests",{"type":64,"tag":110,"props":1135,"children":1136},{"style":123},[1137],{"type":69,"value":321},{"type":64,"tag":110,"props":1139,"children":1140},{"style":123},[1141],{"type":69,"value":618},{"type":64,"tag":110,"props":1143,"children":1145},{"class":112,"line":1144},29,[1146,1150],{"type":64,"tag":110,"props":1147,"children":1148},{"style":123},[1149],{"type":69,"value":868},{"type":64,"tag":110,"props":1151,"children":1152},{"style":129},[1153],{"type":69,"value":947},{"type":64,"tag":72,"props":1155,"children":1156},{},[1157,1159,1165],{"type":69,"value":1158},"The container's grid or flex item must be allowed to shrink, usually with ",{"type":64,"tag":106,"props":1160,"children":1162},{"className":1161},[],[1163],{"type":69,"value":1164},"min-width: 0",{"type":69,"value":835},{"type":64,"tag":86,"props":1167,"children":1169},{"id":1168},"core-patterns",[1170],{"type":69,"value":1171},"Core Patterns",{"type":64,"tag":1173,"props":1174,"children":1176},"h3",{"id":1175},"adapt-information-in-priority-order",[1177],{"type":69,"value":1178},"Adapt information in priority order",{"type":64,"tag":72,"props":1180,"children":1181},{},[1182],{"type":69,"value":1183},"At narrower containers:",{"type":64,"tag":1185,"props":1186,"children":1187},"ol",{},[1188,1194,1199,1204,1209],{"type":64,"tag":1189,"props":1190,"children":1191},"li",{},[1192],{"type":69,"value":1193},"Reduce tick candidates and optional annotations.",{"type":64,"tag":1189,"props":1195,"children":1196},{},[1197],{"type":69,"value":1198},"Thin, abbreviate, rotate, or directly label essential values.",{"type":64,"tag":1189,"props":1200,"children":1201},{},[1202],{"type":69,"value":1203},"Change orientation or facet layout without changing metric semantics.",{"type":64,"tag":1189,"props":1205,"children":1206},{},[1207],{"type":69,"value":1208},"Aggregate only when the question remains valid.",{"type":64,"tag":1189,"props":1210,"children":1211},{},[1212],{"type":69,"value":1213},"Replace the chart with a focused summary or accessible table when the comparison no longer fits.",{"type":64,"tag":72,"props":1215,"children":1216},{},[1217],{"type":69,"value":1218},"Keep domains, thresholds, units, and category-color assignments stable when readers compare the same chart across sizes.",{"type":64,"tag":1173,"props":1220,"children":1222},{"id":1221},"distinguish-surface-bounds-from-plot-bounds",[1223],{"type":69,"value":1224},"Distinguish surface bounds from plot bounds",{"type":64,"tag":72,"props":1226,"children":1227},{},[1228,1230,1236,1238,1244,1246,1252],{"type":69,"value":1229},"The responsive builder receives full surface ",{"type":64,"tag":106,"props":1231,"children":1233},{"className":1232},[],[1234],{"type":69,"value":1235},"width",{"type":69,"value":1237}," and ",{"type":64,"tag":106,"props":1239,"children":1241},{"className":1240},[],[1242],{"type":69,"value":1243},"height",{"type":69,"value":1245},". Axes, legends, and measured text later determine ",{"type":64,"tag":106,"props":1247,"children":1249},{"className":1248},[],[1250],{"type":69,"value":1251},"scene.chart",{"type":69,"value":1253},", the final inner plot. Use:",{"type":64,"tag":1255,"props":1256,"children":1257},"ul",{},[1258,1263,1268],{"type":64,"tag":1189,"props":1259,"children":1260},{},[1261],{"type":69,"value":1262},"responsive builder context for surface breakpoints and representation choice;",{"type":64,"tag":1189,"props":1264,"children":1265},{},[1266],{"type":69,"value":1267},"custom-mark render bounds for plot-space geometry;",{"type":64,"tag":1189,"props":1269,"children":1270},{},[1271,1277],{"type":64,"tag":106,"props":1272,"children":1274},{"className":1273},[],[1275],{"type":69,"value":1276},"host.getScene().chart",{"type":69,"value":1278}," for application overlays after render.",{"type":64,"tag":72,"props":1280,"children":1281},{},[1282],{"type":69,"value":1283},"Do not duplicate margin math in application code.",{"type":64,"tag":1173,"props":1285,"children":1287},{"id":1286},"treat-topology-as-responsive-state",[1288],{"type":69,"value":1289},"Treat topology as responsive state",{"type":64,"tag":72,"props":1291,"children":1292},{},[1293],{"type":69,"value":1294},"Waffle packing, treemaps, Sankey columns, facets, Delaunay links, hexbins, density contours, and label fit can change membership or arrangement when final bounds change. Verify semantic keys and interaction state after topology changes, not only node dimensions.",{"type":64,"tag":1173,"props":1296,"children":1298},{"id":1297},"use-deterministic-initial-geometry",[1299],{"type":69,"value":1300},"Use deterministic initial geometry",{"type":64,"tag":72,"props":1302,"children":1303},{},[1304,1306,1312,1314,1319],{"type":69,"value":1305},"Supply the same ",{"type":64,"tag":106,"props":1307,"children":1309},{"className":1308},[],[1310],{"type":69,"value":1311},"initialWidth",{"type":69,"value":1313}," for equivalent server renders. The client adopts the measured container width after hydration. Use fixed ",{"type":64,"tag":106,"props":1315,"children":1317},{"className":1316},[],[1318],{"type":69,"value":1235},{"type":69,"value":1320}," only for exports, benchmarks, or another application-owned frame.",{"type":64,"tag":86,"props":1322,"children":1324},{"id":1323},"common-mistakes",[1325],{"type":69,"value":1326},"Common Mistakes",{"type":64,"tag":1173,"props":1328,"children":1330},{"id":1329},"critical-adapting-to-viewport-width",[1331],{"type":69,"value":1332},"CRITICAL Adapting to viewport width",{"type":64,"tag":72,"props":1334,"children":1335},{},[1336],{"type":69,"value":1337},"Wrong:",{"type":64,"tag":98,"props":1339,"children":1341},{"className":100,"code":1340,"language":102,"meta":103,"style":103},"const compact = window.innerWidth \u003C 640\n",[1342],{"type":64,"tag":106,"props":1343,"children":1344},{"__ignoreMap":103},[1345],{"type":64,"tag":110,"props":1346,"children":1347},{"class":112,"line":113},[1348,1352,1357,1361,1366,1370,1375,1379],{"type":64,"tag":110,"props":1349,"children":1350},{"style":269},[1351],{"type":69,"value":272},{"type":64,"tag":110,"props":1353,"children":1354},{"style":129},[1355],{"type":69,"value":1356}," compact ",{"type":64,"tag":110,"props":1358,"children":1359},{"style":123},[1360],{"type":69,"value":282},{"type":64,"tag":110,"props":1362,"children":1363},{"style":129},[1364],{"type":69,"value":1365}," window",{"type":64,"tag":110,"props":1367,"children":1368},{"style":123},[1369],{"type":69,"value":835},{"type":64,"tag":110,"props":1371,"children":1372},{"style":129},[1373],{"type":69,"value":1374},"innerWidth ",{"type":64,"tag":110,"props":1376,"children":1377},{"style":123},[1378],{"type":69,"value":729},{"type":64,"tag":110,"props":1380,"children":1381},{"style":337},[1382],{"type":69,"value":1383}," 640\n",{"type":64,"tag":72,"props":1385,"children":1386},{},[1387],{"type":69,"value":1388},"Correct:",{"type":64,"tag":98,"props":1390,"children":1392},{"className":100,"code":1391,"language":102,"meta":103,"style":103},"defineChart(({ width }) => ({\n  marks,\n  x: {\n    scale: scaleLinear,\n    axis: { ticks: { count: width \u003C 420 ? 4 : 8 } },\n  },\n}))\n",[1393],{"type":64,"tag":106,"props":1394,"children":1395},{"__ignoreMap":103},[1396,1432,1443,1458,1477,1550,1557],{"type":64,"tag":110,"props":1397,"children":1398},{"class":112,"line":113},[1399,1404,1408,1412,1416,1420,1424,1428],{"type":64,"tag":110,"props":1400,"children":1401},{"style":482},[1402],{"type":69,"value":1403},"defineChart",{"type":64,"tag":110,"props":1405,"children":1406},{"style":129},[1407],{"type":69,"value":489},{"type":64,"tag":110,"props":1409,"children":1410},{"style":123},[1411],{"type":69,"value":494},{"type":64,"tag":110,"props":1413,"children":1414},{"style":497},[1415],{"type":69,"value":500},{"type":64,"tag":110,"props":1417,"children":1418},{"style":123},[1419],{"type":69,"value":505},{"type":64,"tag":110,"props":1421,"children":1422},{"style":269},[1423],{"type":69,"value":510},{"type":64,"tag":110,"props":1425,"children":1426},{"style":129},[1427],{"type":69,"value":515},{"type":64,"tag":110,"props":1429,"children":1430},{"style":123},[1431],{"type":69,"value":520},{"type":64,"tag":110,"props":1433,"children":1434},{"class":112,"line":179},[1435,1439],{"type":64,"tag":110,"props":1436,"children":1437},{"style":129},[1438],{"type":69,"value":529},{"type":64,"tag":110,"props":1440,"children":1441},{"style":123},[1442],{"type":69,"value":618},{"type":64,"tag":110,"props":1444,"children":1445},{"class":112,"line":217},[1446,1450,1454],{"type":64,"tag":110,"props":1447,"children":1448},{"style":299},[1449],{"type":69,"value":627},{"type":64,"tag":110,"props":1451,"children":1452},{"style":123},[1453],{"type":69,"value":307},{"type":64,"tag":110,"props":1455,"children":1456},{"style":123},[1457],{"type":69,"value":636},{"type":64,"tag":110,"props":1459,"children":1460},{"class":112,"line":255},[1461,1465,1469,1473],{"type":64,"tag":110,"props":1462,"children":1463},{"style":299},[1464],{"type":69,"value":645},{"type":64,"tag":110,"props":1466,"children":1467},{"style":123},[1468],{"type":69,"value":307},{"type":64,"tag":110,"props":1470,"children":1471},{"style":129},[1472],{"type":69,"value":231},{"type":64,"tag":110,"props":1474,"children":1475},{"style":123},[1476],{"type":69,"value":618},{"type":64,"tag":110,"props":1478,"children":1479},{"class":112,"line":265},[1480,1484,1488,1492,1496,1500,1504,1508,1512,1516,1520,1524,1528,1533,1537,1542,1546],{"type":64,"tag":110,"props":1481,"children":1482},{"style":299},[1483],{"type":69,"value":689},{"type":64,"tag":110,"props":1485,"children":1486},{"style":123},[1487],{"type":69,"value":307},{"type":64,"tag":110,"props":1489,"children":1490},{"style":123},[1491],{"type":69,"value":126},{"type":64,"tag":110,"props":1493,"children":1494},{"style":299},[1495],{"type":69,"value":702},{"type":64,"tag":110,"props":1497,"children":1498},{"style":123},[1499],{"type":69,"value":307},{"type":64,"tag":110,"props":1501,"children":1502},{"style":123},[1503],{"type":69,"value":126},{"type":64,"tag":110,"props":1505,"children":1506},{"style":299},[1507],{"type":69,"value":715},{"type":64,"tag":110,"props":1509,"children":1510},{"style":123},[1511],{"type":69,"value":307},{"type":64,"tag":110,"props":1513,"children":1514},{"style":129},[1515],{"type":69,"value":724},{"type":64,"tag":110,"props":1517,"children":1518},{"style":123},[1519],{"type":69,"value":729},{"type":64,"tag":110,"props":1521,"children":1522},{"style":337},[1523],{"type":69,"value":734},{"type":64,"tag":110,"props":1525,"children":1526},{"style":123},[1527],{"type":69,"value":739},{"type":64,"tag":110,"props":1529,"children":1530},{"style":337},[1531],{"type":69,"value":1532}," 4",{"type":64,"tag":110,"props":1534,"children":1535},{"style":123},[1536],{"type":69,"value":749},{"type":64,"tag":110,"props":1538,"children":1539},{"style":337},[1540],{"type":69,"value":1541}," 8",{"type":64,"tag":110,"props":1543,"children":1544},{"style":123},[1545],{"type":69,"value":156},{"type":64,"tag":110,"props":1547,"children":1548},{"style":123},[1549],{"type":69,"value":345},{"type":64,"tag":110,"props":1551,"children":1552},{"class":112,"line":290},[1553],{"type":64,"tag":110,"props":1554,"children":1555},{"style":123},[1556],{"type":69,"value":771},{"type":64,"tag":110,"props":1558,"children":1559},{"class":112,"line":348},[1560,1564],{"type":64,"tag":110,"props":1561,"children":1562},{"style":123},[1563],{"type":69,"value":868},{"type":64,"tag":110,"props":1565,"children":1566},{"style":129},[1567],{"type":69,"value":873},{"type":64,"tag":72,"props":1569,"children":1570},{},[1571],{"type":69,"value":1572},"Dashboard panels and embeds can be narrow inside a wide viewport.",{"type":64,"tag":72,"props":1574,"children":1575},{},[1576,1578],{"type":69,"value":1577},"Source: ",{"type":64,"tag":106,"props":1579,"children":1581},{"className":1580},[],[1582],{"type":69,"value":1583},"docs\u002Fguides\u002Fresponsive-charts.md",{"type":64,"tag":1173,"props":1585,"children":1587},{"id":1586},"critical-using-surface-width-as-plot-width",[1588],{"type":69,"value":1589},"CRITICAL Using surface width as plot width",{"type":64,"tag":72,"props":1591,"children":1592},{},[1593],{"type":69,"value":1594},"Wrong: compute bins, collisions, or overlay positions directly from responsive builder width.",{"type":64,"tag":72,"props":1596,"children":1597},{},[1598,1600,1605],{"type":69,"value":1599},"Correct: perform exact pixel work from resolved custom-mark bounds or ",{"type":64,"tag":106,"props":1601,"children":1603},{"className":1602},[],[1604],{"type":69,"value":1251},{"type":69,"value":835},{"type":64,"tag":72,"props":1607,"children":1608},{},[1609],{"type":69,"value":1610},"Guides and legends reduce the final plot after the builder returns.",{"type":64,"tag":72,"props":1612,"children":1613},{},[1614,1615,1621,1623],{"type":69,"value":1577},{"type":64,"tag":106,"props":1616,"children":1618},{"className":1617},[],[1619],{"type":69,"value":1620},"API-FRICTION.md",{"type":69,"value":1622}," F-116, F-219; ",{"type":64,"tag":106,"props":1624,"children":1626},{"className":1625},[],[1627],{"type":69,"value":1583},{"type":64,"tag":1173,"props":1629,"children":1631},{"id":1630},"high-assuming-resize-only-stretches-geometry",[1632],{"type":69,"value":1633},"HIGH Assuming resize only stretches geometry",{"type":64,"tag":72,"props":1635,"children":1636},{},[1637],{"type":69,"value":1638},"Wrong: preserve old treemap, facet, waffle, Delaunay, hexbin, or label topology and scale its pixels.",{"type":64,"tag":72,"props":1640,"children":1641},{},[1642],{"type":69,"value":1643},"Correct: let the owning resolved-layout primitive recompute from final bounds and preserve semantic keys through the change.",{"type":64,"tag":72,"props":1645,"children":1646},{},[1647],{"type":69,"value":1648},"Many final-pixel layouts change topology, not only size.",{"type":64,"tag":72,"props":1650,"children":1651},{},[1652],{"type":69,"value":1653},"Source: waffle, treemap, Delaunay, and hexbin mark references",{"type":64,"tag":1173,"props":1655,"children":1657},{"id":1656},"high-using-fixed-width-for-application-charts",[1658],{"type":69,"value":1659},"HIGH Using fixed width for application charts",{"type":64,"tag":72,"props":1661,"children":1662},{},[1663],{"type":69,"value":1337},{"type":64,"tag":98,"props":1665,"children":1667},{"className":100,"code":1666,"language":102,"meta":103,"style":103},"mountChart(element, { definition, width: 640, height: 320, ariaLabel })\n",[1668],{"type":64,"tag":106,"props":1669,"children":1670},{"__ignoreMap":103},[1671],{"type":64,"tag":110,"props":1672,"children":1673},{"class":112,"line":113},[1674,1679,1683,1687,1691,1696,1700,1704,1708,1712,1716,1721,1725,1729,1733,1738,1742],{"type":64,"tag":110,"props":1675,"children":1676},{"style":482},[1677],{"type":69,"value":1678},"mountChart",{"type":64,"tag":110,"props":1680,"children":1681},{"style":129},[1682],{"type":69,"value":1046},{"type":64,"tag":110,"props":1684,"children":1685},{"style":123},[1686],{"type":69,"value":137},{"type":64,"tag":110,"props":1688,"children":1689},{"style":123},[1690],{"type":69,"value":126},{"type":64,"tag":110,"props":1692,"children":1693},{"style":129},[1694],{"type":69,"value":1695}," definition",{"type":64,"tag":110,"props":1697,"children":1698},{"style":123},[1699],{"type":69,"value":137},{"type":64,"tag":110,"props":1701,"children":1702},{"style":299},[1703],{"type":69,"value":500},{"type":64,"tag":110,"props":1705,"children":1706},{"style":123},[1707],{"type":69,"value":307},{"type":64,"tag":110,"props":1709,"children":1710},{"style":337},[1711],{"type":69,"value":1107},{"type":64,"tag":110,"props":1713,"children":1714},{"style":123},[1715],{"type":69,"value":137},{"type":64,"tag":110,"props":1717,"children":1718},{"style":299},[1719],{"type":69,"value":1720}," height",{"type":64,"tag":110,"props":1722,"children":1723},{"style":123},[1724],{"type":69,"value":307},{"type":64,"tag":110,"props":1726,"children":1727},{"style":337},[1728],{"type":69,"value":1085},{"type":64,"tag":110,"props":1730,"children":1731},{"style":123},[1732],{"type":69,"value":137},{"type":64,"tag":110,"props":1734,"children":1735},{"style":129},[1736],{"type":69,"value":1737}," ariaLabel ",{"type":64,"tag":110,"props":1739,"children":1740},{"style":123},[1741],{"type":69,"value":868},{"type":64,"tag":110,"props":1743,"children":1744},{"style":129},[1745],{"type":69,"value":947},{"type":64,"tag":72,"props":1747,"children":1748},{},[1749],{"type":69,"value":1388},{"type":64,"tag":98,"props":1751,"children":1753},{"className":100,"code":1752,"language":102,"meta":103,"style":103},"mountChart(element, {\n  definition,\n  height: 320,\n  initialWidth: 640,\n  ariaLabel,\n})\n",[1754],{"type":64,"tag":106,"props":1755,"children":1756},{"__ignoreMap":103},[1757,1776,1787,1806,1825,1836],{"type":64,"tag":110,"props":1758,"children":1759},{"class":112,"line":113},[1760,1764,1768,1772],{"type":64,"tag":110,"props":1761,"children":1762},{"style":482},[1763],{"type":69,"value":1678},{"type":64,"tag":110,"props":1765,"children":1766},{"style":129},[1767],{"type":69,"value":1046},{"type":64,"tag":110,"props":1769,"children":1770},{"style":123},[1771],{"type":69,"value":137},{"type":64,"tag":110,"props":1773,"children":1774},{"style":123},[1775],{"type":69,"value":636},{"type":64,"tag":110,"props":1777,"children":1778},{"class":112,"line":179},[1779,1783],{"type":64,"tag":110,"props":1780,"children":1781},{"style":129},[1782],{"type":69,"value":1063},{"type":64,"tag":110,"props":1784,"children":1785},{"style":123},[1786],{"type":69,"value":618},{"type":64,"tag":110,"props":1788,"children":1789},{"class":112,"line":217},[1790,1794,1798,1802],{"type":64,"tag":110,"props":1791,"children":1792},{"style":299},[1793],{"type":69,"value":1076},{"type":64,"tag":110,"props":1795,"children":1796},{"style":123},[1797],{"type":69,"value":307},{"type":64,"tag":110,"props":1799,"children":1800},{"style":337},[1801],{"type":69,"value":1085},{"type":64,"tag":110,"props":1803,"children":1804},{"style":123},[1805],{"type":69,"value":618},{"type":64,"tag":110,"props":1807,"children":1808},{"class":112,"line":255},[1809,1813,1817,1821],{"type":64,"tag":110,"props":1810,"children":1811},{"style":299},[1812],{"type":69,"value":1098},{"type":64,"tag":110,"props":1814,"children":1815},{"style":123},[1816],{"type":69,"value":307},{"type":64,"tag":110,"props":1818,"children":1819},{"style":337},[1820],{"type":69,"value":1107},{"type":64,"tag":110,"props":1822,"children":1823},{"style":123},[1824],{"type":69,"value":618},{"type":64,"tag":110,"props":1826,"children":1827},{"class":112,"line":265},[1828,1832],{"type":64,"tag":110,"props":1829,"children":1830},{"style":129},[1831],{"type":69,"value":1120},{"type":64,"tag":110,"props":1833,"children":1834},{"style":123},[1835],{"type":69,"value":618},{"type":64,"tag":110,"props":1837,"children":1838},{"class":112,"line":290},[1839,1843],{"type":64,"tag":110,"props":1840,"children":1841},{"style":123},[1842],{"type":69,"value":868},{"type":64,"tag":110,"props":1844,"children":1845},{"style":129},[1846],{"type":69,"value":947},{"type":64,"tag":72,"props":1848,"children":1849},{},[1850,1852,1857],{"type":69,"value":1851},"Fixed width opts out of container measurement; missing ",{"type":64,"tag":106,"props":1853,"children":1855},{"className":1854},[],[1856],{"type":69,"value":1311},{"type":69,"value":1858}," or shrink constraints causes different SSR or overflow failures.",{"type":64,"tag":72,"props":1860,"children":1861},{},[1862,1863,1868,1870,1875],{"type":69,"value":1577},{"type":64,"tag":106,"props":1864,"children":1866},{"className":1865},[],[1867],{"type":69,"value":1583},{"type":69,"value":1869},"; ",{"type":64,"tag":106,"props":1871,"children":1873},{"className":1872},[],[1874],{"type":69,"value":1620},{"type":69,"value":1876}," F-111",{"type":64,"tag":1173,"props":1878,"children":1880},{"id":1879},"critical-assigning-positional-pixel-ranges",[1881],{"type":69,"value":1882},"CRITICAL Assigning positional pixel ranges",{"type":64,"tag":72,"props":1884,"children":1885},{},[1886],{"type":69,"value":1337},{"type":64,"tag":98,"props":1888,"children":1890},{"className":100,"code":1889,"language":102,"meta":103,"style":103},"x: {\n  scale: scaleLinear().range([0, 640])\n}\n",[1891],{"type":64,"tag":106,"props":1892,"children":1893},{"__ignoreMap":103},[1894,1910,1962],{"type":64,"tag":110,"props":1895,"children":1896},{"class":112,"line":113},[1897,1902,1906],{"type":64,"tag":110,"props":1898,"children":1899},{"style":817},[1900],{"type":69,"value":1901},"x",{"type":64,"tag":110,"props":1903,"children":1904},{"style":123},[1905],{"type":69,"value":307},{"type":64,"tag":110,"props":1907,"children":1908},{"style":123},[1909],{"type":69,"value":636},{"type":64,"tag":110,"props":1911,"children":1912},{"class":112,"line":179},[1913,1918,1922,1926,1930,1934,1939,1944,1949,1953,1957],{"type":64,"tag":110,"props":1914,"children":1915},{"style":817},[1916],{"type":69,"value":1917},"  scale",{"type":64,"tag":110,"props":1919,"children":1920},{"style":123},[1921],{"type":69,"value":307},{"type":64,"tag":110,"props":1923,"children":1924},{"style":482},[1925],{"type":69,"value":231},{"type":64,"tag":110,"props":1927,"children":1928},{"style":299},[1929],{"type":69,"value":830},{"type":64,"tag":110,"props":1931,"children":1932},{"style":123},[1933],{"type":69,"value":835},{"type":64,"tag":110,"props":1935,"children":1936},{"style":482},[1937],{"type":69,"value":1938},"range",{"type":64,"tag":110,"props":1940,"children":1941},{"style":299},[1942],{"type":69,"value":1943},"([",{"type":64,"tag":110,"props":1945,"children":1946},{"style":337},[1947],{"type":69,"value":1948},"0",{"type":64,"tag":110,"props":1950,"children":1951},{"style":123},[1952],{"type":69,"value":137},{"type":64,"tag":110,"props":1954,"children":1955},{"style":337},[1956],{"type":69,"value":1107},{"type":64,"tag":110,"props":1958,"children":1959},{"style":299},[1960],{"type":69,"value":1961},"])\n",{"type":64,"tag":110,"props":1963,"children":1964},{"class":112,"line":217},[1965],{"type":64,"tag":110,"props":1966,"children":1967},{"style":123},[1968],{"type":69,"value":1969},"}\n",{"type":64,"tag":72,"props":1971,"children":1972},{},[1973],{"type":69,"value":1388},{"type":64,"tag":98,"props":1975,"children":1977},{"className":100,"code":1976,"language":102,"meta":103,"style":103},"x: {\n  scale: scaleLinear\n}\n",[1978],{"type":64,"tag":106,"props":1979,"children":1980},{"__ignoreMap":103},[1981,1996,2012],{"type":64,"tag":110,"props":1982,"children":1983},{"class":112,"line":113},[1984,1988,1992],{"type":64,"tag":110,"props":1985,"children":1986},{"style":817},[1987],{"type":69,"value":1901},{"type":64,"tag":110,"props":1989,"children":1990},{"style":123},[1991],{"type":69,"value":307},{"type":64,"tag":110,"props":1993,"children":1994},{"style":123},[1995],{"type":69,"value":636},{"type":64,"tag":110,"props":1997,"children":1998},{"class":112,"line":179},[1999,2003,2007],{"type":64,"tag":110,"props":2000,"children":2001},{"style":817},[2002],{"type":69,"value":1917},{"type":64,"tag":110,"props":2004,"children":2005},{"style":123},[2006],{"type":69,"value":307},{"type":64,"tag":110,"props":2008,"children":2009},{"style":129},[2010],{"type":69,"value":2011}," scaleLinear\n",{"type":64,"tag":110,"props":2013,"children":2014},{"class":112,"line":217},[2015],{"type":64,"tag":110,"props":2016,"children":2017},{"style":123},[2018],{"type":69,"value":1969},{"type":64,"tag":72,"props":2020,"children":2021},{},[2022],{"type":69,"value":2023},"The range must follow the final plot after container measurement and guide margins resolve.",{"type":64,"tag":72,"props":2025,"children":2026},{},[2027,2028,2033,2035],{"type":69,"value":1577},{"type":64,"tag":106,"props":2029,"children":2031},{"className":2030},[],[2032],{"type":69,"value":1620},{"type":69,"value":2034}," F-002; ",{"type":64,"tag":106,"props":2036,"children":2038},{"className":2037},[],[2039],{"type":69,"value":2040},"docs\u002Fconcepts\u002Fscales-and-d3.md",{"type":64,"tag":1173,"props":2042,"children":2044},{"id":2043},"high-treating-containment-as-collision-avoidance",[2045],{"type":69,"value":2046},"HIGH Treating containment as collision avoidance",{"type":64,"tag":72,"props":2048,"children":2049},{},[2050],{"type":69,"value":2051},"Wrong: expect automatic margins to make every long tick label readable.",{"type":64,"tag":72,"props":2053,"children":2054},{},[2055],{"type":69,"value":2056},"Correct: choose responsive candidate spacing, thinning, rotation, abbreviation, or a different composition.",{"type":64,"tag":72,"props":2058,"children":2059},{},[2060],{"type":69,"value":2061},"Margins contain guides inside the surface; they do not resolve every label-label collision.",{"type":64,"tag":72,"props":2063,"children":2064},{},[2065,2066,2071,2073],{"type":69,"value":1577},{"type":64,"tag":106,"props":2067,"children":2069},{"className":2068},[],[2070],{"type":69,"value":1620},{"type":69,"value":2072}," F-023, F-160; ",{"type":64,"tag":106,"props":2074,"children":2076},{"className":2075},[],[2077],{"type":69,"value":1583},{"type":64,"tag":1173,"props":2079,"children":2081},{"id":2080},"high-tension-responsive-adaptation-versus-comparison-stability",[2082],{"type":69,"value":2083},"HIGH Tension: responsive adaptation versus comparison stability",{"type":64,"tag":72,"props":2085,"children":2086},{},[2087],{"type":69,"value":2088},"Reduce guide density and change composition without silently changing what position, color, or a threshold means.",{"type":64,"tag":72,"props":2090,"children":2091},{},[2092,2094,2100],{"type":69,"value":2093},"See also: ",{"type":64,"tag":106,"props":2095,"children":2097},{"className":2096},[],[2098],{"type":69,"value":2099},"configure-scales-guides-color\u002FSKILL.md",{"type":69,"value":2101}," § Common Mistakes",{"type":64,"tag":1173,"props":2103,"children":2105},{"id":2104},"high-tension-motion-continuity-versus-current-state-correctness",[2106],{"type":69,"value":2107},"HIGH Tension: motion continuity versus current-state correctness",{"type":64,"tag":72,"props":2109,"children":2110},{},[2111],{"type":69,"value":2112},"Responsive relayout should commit immediately by default. Animating every observed resize can leave geometry behind the actual panel size and repeatedly interrupt transitions.",{"type":64,"tag":72,"props":2114,"children":2115},{},[2116,2117,2123,2124],{"type":69,"value":2093},{"type":64,"tag":106,"props":2118,"children":2120},{"className":2119},[],[2121],{"type":69,"value":2122},"update-and-animate-charts\u002FSKILL.md",{"type":69,"value":1237},{"type":64,"tag":106,"props":2125,"children":2127},{"className":2126},[],[2128],{"type":69,"value":2129},"debug-and-verify-charts\u002FSKILL.md",{"type":64,"tag":72,"props":2131,"children":2132},{},[2133,2134,2140,2141,2146],{"type":69,"value":2093},{"type":64,"tag":106,"props":2135,"children":2137},{"className":2136},[],[2138],{"type":69,"value":2139},"ship-accessible-charts\u002FSKILL.md",{"type":69,"value":1237},{"type":64,"tag":106,"props":2142,"children":2144},{"className":2143},[],[2145],{"type":69,"value":2122},{"type":69,"value":2147}," — initial size, label priority, and resize policy affect hydration, accessibility, and motion.",{"type":64,"tag":2149,"props":2150,"children":2151},"style",{},[2152],{"type":69,"value":2153},"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":2155,"total":523},[2156,2169,2182,2193,2209,2222,2233],{"slug":2157,"name":2157,"fn":2158,"description":2159,"org":2160,"tags":2161,"stars":26,"repoUrl":27,"updatedAt":2168},"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},[2162,2163,2164,2167],{"name":17,"slug":18,"type":15},{"name":24,"slug":25,"type":15},{"name":2165,"slug":2166,"type":15},"Interaction","interaction",{"name":9,"slug":8,"type":15},"2026-08-15T03:47:32.82085",{"slug":2170,"name":2170,"fn":2171,"description":2172,"org":2173,"tags":2174,"stars":26,"repoUrl":27,"updatedAt":2181},"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},[2175,2176,2177,2178],{"name":17,"slug":18,"type":15},{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":2179,"slug":2180,"type":15},"UI Components","ui-components","2026-08-15T03:47:30.035164",{"slug":2183,"name":2183,"fn":2184,"description":2185,"org":2186,"tags":2187,"stars":26,"repoUrl":27,"updatedAt":2192},"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},[2188,2189,2190,2191],{"name":17,"slug":18,"type":15},{"name":13,"slug":14,"type":15},{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},"2026-08-15T03:47:40.802271",{"slug":2194,"name":2194,"fn":2195,"description":2196,"org":2197,"tags":2198,"stars":26,"repoUrl":27,"updatedAt":2208},"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},[2199,2200,2203,2206,2207],{"name":17,"slug":18,"type":15},{"name":2201,"slug":2202,"type":15},"Data Analysis","data-analysis",{"name":2204,"slug":2205,"type":15},"Data Engineering","data-engineering",{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},"2026-08-15T03:47:37.086246",{"slug":2210,"name":2210,"fn":2211,"description":2212,"org":2213,"tags":2214,"stars":26,"repoUrl":27,"updatedAt":2221},"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},[2215,2216,2219,2220],{"name":17,"slug":18,"type":15},{"name":2217,"slug":2218,"type":15},"Debugging","debugging",{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},"2026-08-15T03:47:33.503153",{"slug":2223,"name":2223,"fn":2224,"description":2225,"org":2226,"tags":2227,"stars":26,"repoUrl":27,"updatedAt":2232},"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},[2228,2229,2230,2231],{"name":17,"slug":18,"type":15},{"name":13,"slug":14,"type":15},{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},"2026-08-15T03:47:40.463333",{"slug":4,"name":4,"fn":5,"description":6,"org":2234,"tags":2235,"stars":26,"repoUrl":27,"updatedAt":28},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[2236,2237,2238,2239,2240],{"name":17,"slug":18,"type":15},{"name":13,"slug":14,"type":15},{"name":24,"slug":25,"type":15},{"name":20,"slug":21,"type":15},{"name":9,"slug":8,"type":15},{"items":2242,"total":2375},[2243,2255,2265,2275,2286,2301,2311,2321,2331,2344,2354,2365],{"slug":2244,"name":2244,"fn":2245,"description":2246,"org":2247,"tags":2248,"stars":2252,"repoUrl":2253,"updatedAt":2254},"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},[2249,2250,2251],{"name":2201,"slug":2202,"type":15},{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},28175,"https:\u002F\u002Fgithub.com\u002FTanStack\u002Ftable","2026-08-11T04:05:39.647403",{"slug":2256,"name":2256,"fn":2257,"description":2258,"org":2259,"tags":2260,"stars":2252,"repoUrl":2253,"updatedAt":2264},"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},[2261,2262,2263],{"name":2217,"slug":2218,"type":15},{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},"2026-08-11T04:05:45.454347",{"slug":2266,"name":2266,"fn":2267,"description":2268,"org":2269,"tags":2270,"stars":2252,"repoUrl":2253,"updatedAt":2274},"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},[2271,2272,2273],{"name":2201,"slug":2202,"type":15},{"name":9,"slug":8,"type":15},{"name":2179,"slug":2180,"type":15},"2026-08-11T04:05:18.454719",{"slug":2276,"name":2276,"fn":2277,"description":2278,"org":2279,"tags":2280,"stars":2252,"repoUrl":2253,"updatedAt":2285},"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},[2281,2282,2283,2284],{"name":13,"slug":14,"type":15},{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":2179,"slug":2180,"type":15},"2026-08-11T04:05:16.471567",{"slug":2287,"name":2287,"fn":2288,"description":2289,"org":2290,"tags":2291,"stars":2252,"repoUrl":2253,"updatedAt":2300},"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},[2292,2295,2296,2299],{"name":2293,"slug":2294,"type":15},"Data Pipeline","data-pipeline",{"name":24,"slug":25,"type":15},{"name":2297,"slug":2298,"type":15},"Performance","performance",{"name":9,"slug":8,"type":15},"2026-08-11T04:05:25.45112",{"slug":2302,"name":2302,"fn":2303,"description":2304,"org":2305,"tags":2306,"stars":2252,"repoUrl":2253,"updatedAt":2310},"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},[2307,2308,2309],{"name":13,"slug":14,"type":15},{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},"2026-08-11T04:05:21.505333",{"slug":2312,"name":2312,"fn":2313,"description":2314,"org":2315,"tags":2316,"stars":2252,"repoUrl":2253,"updatedAt":2320},"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},[2317,2318,2319],{"name":2201,"slug":2202,"type":15},{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},"2026-08-11T04:05:33.684468",{"slug":2322,"name":2322,"fn":2323,"description":2324,"org":2325,"tags":2326,"stars":2252,"repoUrl":2253,"updatedAt":2330},"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},[2327,2328,2329],{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":2179,"slug":2180,"type":15},"2026-08-11T04:05:43.445905",{"slug":2332,"name":2332,"fn":2333,"description":2334,"org":2335,"tags":2336,"stars":2252,"repoUrl":2253,"updatedAt":2343},"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},[2337,2340,2341,2342],{"name":2338,"slug":2339,"type":15},"CSS","css",{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":2179,"slug":2180,"type":15},"2026-08-11T04:05:35.453858",{"slug":2345,"name":2345,"fn":2346,"description":2347,"org":2348,"tags":2349,"stars":2252,"repoUrl":2253,"updatedAt":2353},"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},[2350,2351,2352],{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":2179,"slug":2180,"type":15},"2026-08-11T04:05:31.46447",{"slug":2355,"name":2355,"fn":2356,"description":2357,"org":2358,"tags":2359,"stars":2252,"repoUrl":2253,"updatedAt":2364},"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},[2360,2361,2362,2363],{"name":2338,"slug":2339,"type":15},{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":2179,"slug":2180,"type":15},"2026-08-11T04:05:28.559861",{"slug":2366,"name":2366,"fn":2367,"description":2368,"org":2369,"tags":2370,"stars":2252,"repoUrl":2253,"updatedAt":2374},"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},[2371,2372,2373],{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":2179,"slug":2180,"type":15},"2026-08-11T04:05:27.479925",139]