[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-tanstack-migrate-to-tanstack-charts":3,"mdc-5bw0gp-key":48,"related-repo-tanstack-migrate-to-tanstack-charts":1415,"related-org-tanstack-migrate-to-tanstack-charts":1505},{"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},"migrate-to-tanstack-charts","migrate to TanStack Charts","Migrate Observable Plot, Recharts, Chart.js, ECharts, direct D3, or another renderer to TanStack Charts by translating semantic ownership and proving visual, interaction, accessibility, export, bundle, and performance parity.\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},"Migration","migration","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.132993",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\u002Fmigrate-to-tanstack-charts","---\nname: migrate-to-tanstack-charts\ndescription: >\n  Migrate Observable Plot, Recharts, Chart.js, ECharts, direct D3, or another\n  renderer to TanStack Charts by translating semantic ownership and proving\n  visual, interaction, accessibility, export, bundle, and performance parity.\nmetadata:\n  type: composition\n  library: '@tanstack\u002Fcharts'\n  library_version: '0.9.0'\nrequires:\n  - design-a-chart\n  - debug-and-verify-charts\nsources:\n  - 'TanStack\u002Fcharts:docs\u002Fguides\u002Fmigrating.md'\n  - 'TanStack\u002Fcharts:packages\u002Fcharts-core-d3\u002Fdocs\u002Fobservable-plot-migration.md'\n  - 'TanStack\u002Fcharts:packages\u002Fcharts-core-d3\u002Fdocs\u002Ftanstack-stats-migration.md'\n---\n\nThis skill requires `design-a-chart` and `debug-and-verify-charts`. Read them first to preserve the analytical task and define parity evidence.\n\n# Migrate Charts to TanStack Charts\n\nUse **trigger → inspect → decide → build → verify**. Translate semantic ownership, not component names or generated DOM. Keep the old chart available until parity evidence passes.\n\n## Integration Setup\n\nInventory the current chart before changing code:\n\n```ts\nexport interface MigrationInventory {\n  question: string\n  rowGrain: string\n  metrics: readonly string[]\n  transforms: readonly string[]\n  layers: readonly string[]\n  domains: readonly string[]\n  interactions: readonly string[]\n  accessibility: readonly string[]\n  exports: readonly string[]\n  performanceBudget: string\n}\n\nexport const inventory: MigrationInventory = {\n  question: 'How did weekly revenue change by product?',\n  rowGrain: 'one row per product and week',\n  metrics: ['revenue USD', 'orders'],\n  transforms: ['weekly aggregation'],\n  layers: ['line per product', 'target rule'],\n  domains: ['shared weekly x', 'zero-based revenue y', 'stable product color'],\n  interactions: ['grouped x tooltip', 'keyboard inspection'],\n  accessibility: ['figure label', 'adjacent summary'],\n  exports: ['static SVG'],\n  performanceBudget: '12 charts, 2,000 visible points, responsive updates',\n}\n```\n\nRecord which layer currently owns every item. Do not assume the source renderer owns transforms, domains, or product state just because its API config mentions them.\n\n## Core Integration Patterns\n\n### Translate through the grammar\n\nFor each source layer, map:\n\n1. source rows and row grain;\n2. eager analytical transforms;\n3. mark-local layout;\n4. positional, grouping, color, and interval channels;\n5. semantic scale domains;\n6. marks and layer order;\n7. focus and controlled application state;\n8. renderer, adapter, and export lifecycle.\n\nUse the source-specific references only after this inventory.\n\n### Migrate one ownership boundary at a time\n\nA safe sequence is:\n\n1. Freeze source data preparation and capture fixtures.\n2. Build a static TanStack scene from the same prepared rows.\n3. Match scales, marks, labels, and empty\u002Fmissing behavior.\n4. Add focus and tooltip semantics.\n5. Add controlled selection, brush, zoom, or application overlays.\n6. Wire the target framework adapter and SSR lifecycle.\n7. Compare bundle and sustained interaction\u002Fupdate performance.\n8. Remove the source renderer only after rollback is no longer needed.\n\n### Prove parity by scenarios\n\n| Surface       | Evidence                                                         |\n| ------------- | ---------------------------------------------------------------- |\n| Data          | fixture rows and transform outputs match                         |\n| Visual        | geometry, domains, guides, labels, color, missing\u002Fnegative cases |\n| Interaction   | pointer and keyboard focus, grouping, pinning, controlled state  |\n| Lifecycle     | mount, update, resize, SSR\u002Fhydration, destroy                    |\n| Accessibility | meaningful name, equivalent values\u002Factions, summary\u002Ftable        |\n| Export        | SVG\u002FCanvas\u002Fstatic output and fonts\u002Fresources                     |\n| Packaging     | packed consumer imports and retained optional modules            |\n| Performance   | target dashboard shape under sustained pointer\u002Fupdate work       |\n\n### Keep a comparison switch\n\nDuring production migration, use the same prepared rows and accepted application state for old and new renderers. A temporary feature flag or development harness should switch rendering ownership without changing analytics.\n\n## Common Mistakes\n\n### CRITICAL Translating component names one for one\n\nWrong: find the TanStack component with the closest source-library name.\n\nCorrect: map data, transform, scale, geometry, interaction, and lifecycle ownership independently.\n\nSource components combine responsibilities differently, so name matching preserves syntax instead of behavior.\n\nSource: `docs\u002Fguides\u002Fmigrating.md`\n\n### CRITICAL Replacing transforms and renderer together\n\nWrong: rewrite grouping, stacking, forecasting, and rendering in one change.\n\nCorrect: freeze and test analytical rows first; migrate renderer ownership against those fixtures; move transforms later only with separate evidence.\n\nChanging both makes visual drift impossible to classify.\n\nSource: `docs\u002Fguides\u002Fmigrating.md`; archived TanStack Stats migration notes\n\n### CRITICAL Calling screenshot similarity complete parity\n\nWrong: approve after one viewport screenshot resembles the source.\n\nCorrect: test the scenario matrix for focus, keyboard, updates, pinning, export, packages, and performance.\n\nA final image does not prove behavior or lifecycle ownership.\n\nSource: `API-FRICTION.md` F-036, F-073, F-081; `docs\u002Fguides\u002Fmigrating.md`\n\n### HIGH Reimplementing source internals blindly\n\nWrong: port D3 selections, plugin lifecycle, source scale math, and every private helper into custom marks.\n\nCorrect: keep proven application\u002FD3\u002FSQL preparation at first, express supported semantics through TanStack primitives, and extend only a verified gap.\n\nBlind ports preserve accidental architecture and bypass renderer-neutral ownership.\n\nSource: `docs\u002Fguides\u002Fmigrating.md`; `API-FRICTION.md` F-127\n\n## References\n\n- [Observable Plot](references\u002Fobservable-plot.md)\n- [Recharts](references\u002Frecharts.md)\n- [Chart.js](references\u002Fchart-js.md)\n- [ECharts](references\u002Fecharts.md)\n- [Direct D3](references\u002Fd3.md)\n\nSee also: `design-a-chart\u002FSKILL.md` and `debug-and-verify-charts\u002FSKILL.md` — restate the analytical task and prove parity beyond screenshots.\n",{"data":49,"body":61},{"name":4,"description":6,"metadata":50,"requires":54,"sources":57},{"type":51,"library":52,"library_version":53},"composition","@tanstack\u002Fcharts","0.9.0",[55,56],"design-a-chart","debug-and-verify-charts",[58,59,60],"TanStack\u002Fcharts:docs\u002Fguides\u002Fmigrating.md","TanStack\u002Fcharts:packages\u002Fcharts-core-d3\u002Fdocs\u002Fobservable-plot-migration.md","TanStack\u002Fcharts:packages\u002Fcharts-core-d3\u002Fdocs\u002Ftanstack-stats-migration.md",{"type":62,"children":63},"root",[64,87,94,107,114,119,910,915,921,928,933,978,983,989,994,1037,1043,1175,1181,1186,1192,1198,1203,1208,1213,1224,1230,1235,1240,1245,1256,1262,1267,1272,1277,1294,1300,1305,1310,1315,1333,1339,1389,1409],{"type":65,"tag":66,"props":67,"children":68},"element","p",{},[69,72,78,80,85],{"type":70,"value":71},"text","This skill requires ",{"type":65,"tag":73,"props":74,"children":76},"code",{"className":75},[],[77],{"type":70,"value":55},{"type":70,"value":79}," and ",{"type":65,"tag":73,"props":81,"children":83},{"className":82},[],[84],{"type":70,"value":56},{"type":70,"value":86},". Read them first to preserve the analytical task and define parity evidence.",{"type":65,"tag":88,"props":89,"children":91},"h1",{"id":90},"migrate-charts-to-tanstack-charts",[92],{"type":70,"value":93},"Migrate Charts to TanStack Charts",{"type":65,"tag":66,"props":95,"children":96},{},[97,99,105],{"type":70,"value":98},"Use ",{"type":65,"tag":100,"props":101,"children":102},"strong",{},[103],{"type":70,"value":104},"trigger → inspect → decide → build → verify",{"type":70,"value":106},". Translate semantic ownership, not component names or generated DOM. Keep the old chart available until parity evidence passes.",{"type":65,"tag":108,"props":109,"children":111},"h2",{"id":110},"integration-setup",[112],{"type":70,"value":113},"Integration Setup",{"type":65,"tag":66,"props":115,"children":116},{},[117],{"type":70,"value":118},"Inventory the current chart before changing code:",{"type":65,"tag":120,"props":121,"children":126},"pre",{"className":122,"code":123,"language":124,"meta":125,"style":125},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export interface MigrationInventory {\n  question: string\n  rowGrain: string\n  metrics: readonly string[]\n  transforms: readonly string[]\n  layers: readonly string[]\n  domains: readonly string[]\n  interactions: readonly string[]\n  accessibility: readonly string[]\n  exports: readonly string[]\n  performanceBudget: string\n}\n\nexport const inventory: MigrationInventory = {\n  question: 'How did weekly revenue change by product?',\n  rowGrain: 'one row per product and week',\n  metrics: ['revenue USD', 'orders'],\n  transforms: ['weekly aggregation'],\n  layers: ['line per product', 'target rule'],\n  domains: ['shared weekly x', 'zero-based revenue y', 'stable product color'],\n  interactions: ['grouped x tooltip', 'keyboard inspection'],\n  accessibility: ['figure label', 'adjacent summary'],\n  exports: ['static SVG'],\n  performanceBudget: '12 charts, 2,000 visible points, responsive updates',\n}\n","ts","",[127],{"type":65,"tag":73,"props":128,"children":129},{"__ignoreMap":125},[130,160,180,197,226,251,276,301,326,351,376,393,402,412,447,480,509,566,603,657,728,782,836,873,902],{"type":65,"tag":131,"props":132,"children":135},"span",{"class":133,"line":134},"line",1,[136,142,148,154],{"type":65,"tag":131,"props":137,"children":139},{"style":138},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[140],{"type":70,"value":141},"export",{"type":65,"tag":131,"props":143,"children":145},{"style":144},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[146],{"type":70,"value":147}," interface",{"type":65,"tag":131,"props":149,"children":151},{"style":150},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[152],{"type":70,"value":153}," MigrationInventory",{"type":65,"tag":131,"props":155,"children":157},{"style":156},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[158],{"type":70,"value":159}," {\n",{"type":65,"tag":131,"props":161,"children":163},{"class":133,"line":162},2,[164,170,175],{"type":65,"tag":131,"props":165,"children":167},{"style":166},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[168],{"type":70,"value":169},"  question",{"type":65,"tag":131,"props":171,"children":172},{"style":156},[173],{"type":70,"value":174},":",{"type":65,"tag":131,"props":176,"children":177},{"style":150},[178],{"type":70,"value":179}," string\n",{"type":65,"tag":131,"props":181,"children":183},{"class":133,"line":182},3,[184,189,193],{"type":65,"tag":131,"props":185,"children":186},{"style":166},[187],{"type":70,"value":188},"  rowGrain",{"type":65,"tag":131,"props":190,"children":191},{"style":156},[192],{"type":70,"value":174},{"type":65,"tag":131,"props":194,"children":195},{"style":150},[196],{"type":70,"value":179},{"type":65,"tag":131,"props":198,"children":200},{"class":133,"line":199},4,[201,206,210,215,220],{"type":65,"tag":131,"props":202,"children":203},{"style":166},[204],{"type":70,"value":205},"  metrics",{"type":65,"tag":131,"props":207,"children":208},{"style":156},[209],{"type":70,"value":174},{"type":65,"tag":131,"props":211,"children":212},{"style":144},[213],{"type":70,"value":214}," readonly",{"type":65,"tag":131,"props":216,"children":217},{"style":150},[218],{"type":70,"value":219}," string",{"type":65,"tag":131,"props":221,"children":223},{"style":222},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[224],{"type":70,"value":225},"[]\n",{"type":65,"tag":131,"props":227,"children":229},{"class":133,"line":228},5,[230,235,239,243,247],{"type":65,"tag":131,"props":231,"children":232},{"style":166},[233],{"type":70,"value":234},"  transforms",{"type":65,"tag":131,"props":236,"children":237},{"style":156},[238],{"type":70,"value":174},{"type":65,"tag":131,"props":240,"children":241},{"style":144},[242],{"type":70,"value":214},{"type":65,"tag":131,"props":244,"children":245},{"style":150},[246],{"type":70,"value":219},{"type":65,"tag":131,"props":248,"children":249},{"style":222},[250],{"type":70,"value":225},{"type":65,"tag":131,"props":252,"children":254},{"class":133,"line":253},6,[255,260,264,268,272],{"type":65,"tag":131,"props":256,"children":257},{"style":166},[258],{"type":70,"value":259},"  layers",{"type":65,"tag":131,"props":261,"children":262},{"style":156},[263],{"type":70,"value":174},{"type":65,"tag":131,"props":265,"children":266},{"style":144},[267],{"type":70,"value":214},{"type":65,"tag":131,"props":269,"children":270},{"style":150},[271],{"type":70,"value":219},{"type":65,"tag":131,"props":273,"children":274},{"style":222},[275],{"type":70,"value":225},{"type":65,"tag":131,"props":277,"children":279},{"class":133,"line":278},7,[280,285,289,293,297],{"type":65,"tag":131,"props":281,"children":282},{"style":166},[283],{"type":70,"value":284},"  domains",{"type":65,"tag":131,"props":286,"children":287},{"style":156},[288],{"type":70,"value":174},{"type":65,"tag":131,"props":290,"children":291},{"style":144},[292],{"type":70,"value":214},{"type":65,"tag":131,"props":294,"children":295},{"style":150},[296],{"type":70,"value":219},{"type":65,"tag":131,"props":298,"children":299},{"style":222},[300],{"type":70,"value":225},{"type":65,"tag":131,"props":302,"children":304},{"class":133,"line":303},8,[305,310,314,318,322],{"type":65,"tag":131,"props":306,"children":307},{"style":166},[308],{"type":70,"value":309},"  interactions",{"type":65,"tag":131,"props":311,"children":312},{"style":156},[313],{"type":70,"value":174},{"type":65,"tag":131,"props":315,"children":316},{"style":144},[317],{"type":70,"value":214},{"type":65,"tag":131,"props":319,"children":320},{"style":150},[321],{"type":70,"value":219},{"type":65,"tag":131,"props":323,"children":324},{"style":222},[325],{"type":70,"value":225},{"type":65,"tag":131,"props":327,"children":329},{"class":133,"line":328},9,[330,335,339,343,347],{"type":65,"tag":131,"props":331,"children":332},{"style":166},[333],{"type":70,"value":334},"  accessibility",{"type":65,"tag":131,"props":336,"children":337},{"style":156},[338],{"type":70,"value":174},{"type":65,"tag":131,"props":340,"children":341},{"style":144},[342],{"type":70,"value":214},{"type":65,"tag":131,"props":344,"children":345},{"style":150},[346],{"type":70,"value":219},{"type":65,"tag":131,"props":348,"children":349},{"style":222},[350],{"type":70,"value":225},{"type":65,"tag":131,"props":352,"children":354},{"class":133,"line":353},10,[355,360,364,368,372],{"type":65,"tag":131,"props":356,"children":357},{"style":166},[358],{"type":70,"value":359},"  exports",{"type":65,"tag":131,"props":361,"children":362},{"style":156},[363],{"type":70,"value":174},{"type":65,"tag":131,"props":365,"children":366},{"style":144},[367],{"type":70,"value":214},{"type":65,"tag":131,"props":369,"children":370},{"style":150},[371],{"type":70,"value":219},{"type":65,"tag":131,"props":373,"children":374},{"style":222},[375],{"type":70,"value":225},{"type":65,"tag":131,"props":377,"children":379},{"class":133,"line":378},11,[380,385,389],{"type":65,"tag":131,"props":381,"children":382},{"style":166},[383],{"type":70,"value":384},"  performanceBudget",{"type":65,"tag":131,"props":386,"children":387},{"style":156},[388],{"type":70,"value":174},{"type":65,"tag":131,"props":390,"children":391},{"style":150},[392],{"type":70,"value":179},{"type":65,"tag":131,"props":394,"children":396},{"class":133,"line":395},12,[397],{"type":65,"tag":131,"props":398,"children":399},{"style":156},[400],{"type":70,"value":401},"}\n",{"type":65,"tag":131,"props":403,"children":405},{"class":133,"line":404},13,[406],{"type":65,"tag":131,"props":407,"children":409},{"emptyLinePlaceholder":408},true,[410],{"type":70,"value":411},"\n",{"type":65,"tag":131,"props":413,"children":415},{"class":133,"line":414},14,[416,420,425,430,434,438,443],{"type":65,"tag":131,"props":417,"children":418},{"style":138},[419],{"type":70,"value":141},{"type":65,"tag":131,"props":421,"children":422},{"style":144},[423],{"type":70,"value":424}," const",{"type":65,"tag":131,"props":426,"children":427},{"style":222},[428],{"type":70,"value":429}," inventory",{"type":65,"tag":131,"props":431,"children":432},{"style":156},[433],{"type":70,"value":174},{"type":65,"tag":131,"props":435,"children":436},{"style":150},[437],{"type":70,"value":153},{"type":65,"tag":131,"props":439,"children":440},{"style":156},[441],{"type":70,"value":442}," =",{"type":65,"tag":131,"props":444,"children":445},{"style":156},[446],{"type":70,"value":159},{"type":65,"tag":131,"props":448,"children":450},{"class":133,"line":449},15,[451,455,459,464,470,475],{"type":65,"tag":131,"props":452,"children":453},{"style":166},[454],{"type":70,"value":169},{"type":65,"tag":131,"props":456,"children":457},{"style":156},[458],{"type":70,"value":174},{"type":65,"tag":131,"props":460,"children":461},{"style":156},[462],{"type":70,"value":463}," '",{"type":65,"tag":131,"props":465,"children":467},{"style":466},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[468],{"type":70,"value":469},"How did weekly revenue change by product?",{"type":65,"tag":131,"props":471,"children":472},{"style":156},[473],{"type":70,"value":474},"'",{"type":65,"tag":131,"props":476,"children":477},{"style":156},[478],{"type":70,"value":479},",\n",{"type":65,"tag":131,"props":481,"children":483},{"class":133,"line":482},16,[484,488,492,496,501,505],{"type":65,"tag":131,"props":485,"children":486},{"style":166},[487],{"type":70,"value":188},{"type":65,"tag":131,"props":489,"children":490},{"style":156},[491],{"type":70,"value":174},{"type":65,"tag":131,"props":493,"children":494},{"style":156},[495],{"type":70,"value":463},{"type":65,"tag":131,"props":497,"children":498},{"style":466},[499],{"type":70,"value":500},"one row per product and week",{"type":65,"tag":131,"props":502,"children":503},{"style":156},[504],{"type":70,"value":474},{"type":65,"tag":131,"props":506,"children":507},{"style":156},[508],{"type":70,"value":479},{"type":65,"tag":131,"props":510,"children":512},{"class":133,"line":511},17,[513,517,521,526,530,535,539,544,548,553,557,562],{"type":65,"tag":131,"props":514,"children":515},{"style":166},[516],{"type":70,"value":205},{"type":65,"tag":131,"props":518,"children":519},{"style":156},[520],{"type":70,"value":174},{"type":65,"tag":131,"props":522,"children":523},{"style":222},[524],{"type":70,"value":525}," [",{"type":65,"tag":131,"props":527,"children":528},{"style":156},[529],{"type":70,"value":474},{"type":65,"tag":131,"props":531,"children":532},{"style":466},[533],{"type":70,"value":534},"revenue USD",{"type":65,"tag":131,"props":536,"children":537},{"style":156},[538],{"type":70,"value":474},{"type":65,"tag":131,"props":540,"children":541},{"style":156},[542],{"type":70,"value":543},",",{"type":65,"tag":131,"props":545,"children":546},{"style":156},[547],{"type":70,"value":463},{"type":65,"tag":131,"props":549,"children":550},{"style":466},[551],{"type":70,"value":552},"orders",{"type":65,"tag":131,"props":554,"children":555},{"style":156},[556],{"type":70,"value":474},{"type":65,"tag":131,"props":558,"children":559},{"style":222},[560],{"type":70,"value":561},"]",{"type":65,"tag":131,"props":563,"children":564},{"style":156},[565],{"type":70,"value":479},{"type":65,"tag":131,"props":567,"children":569},{"class":133,"line":568},18,[570,574,578,582,586,591,595,599],{"type":65,"tag":131,"props":571,"children":572},{"style":166},[573],{"type":70,"value":234},{"type":65,"tag":131,"props":575,"children":576},{"style":156},[577],{"type":70,"value":174},{"type":65,"tag":131,"props":579,"children":580},{"style":222},[581],{"type":70,"value":525},{"type":65,"tag":131,"props":583,"children":584},{"style":156},[585],{"type":70,"value":474},{"type":65,"tag":131,"props":587,"children":588},{"style":466},[589],{"type":70,"value":590},"weekly aggregation",{"type":65,"tag":131,"props":592,"children":593},{"style":156},[594],{"type":70,"value":474},{"type":65,"tag":131,"props":596,"children":597},{"style":222},[598],{"type":70,"value":561},{"type":65,"tag":131,"props":600,"children":601},{"style":156},[602],{"type":70,"value":479},{"type":65,"tag":131,"props":604,"children":606},{"class":133,"line":605},19,[607,611,615,619,623,628,632,636,640,645,649,653],{"type":65,"tag":131,"props":608,"children":609},{"style":166},[610],{"type":70,"value":259},{"type":65,"tag":131,"props":612,"children":613},{"style":156},[614],{"type":70,"value":174},{"type":65,"tag":131,"props":616,"children":617},{"style":222},[618],{"type":70,"value":525},{"type":65,"tag":131,"props":620,"children":621},{"style":156},[622],{"type":70,"value":474},{"type":65,"tag":131,"props":624,"children":625},{"style":466},[626],{"type":70,"value":627},"line per product",{"type":65,"tag":131,"props":629,"children":630},{"style":156},[631],{"type":70,"value":474},{"type":65,"tag":131,"props":633,"children":634},{"style":156},[635],{"type":70,"value":543},{"type":65,"tag":131,"props":637,"children":638},{"style":156},[639],{"type":70,"value":463},{"type":65,"tag":131,"props":641,"children":642},{"style":466},[643],{"type":70,"value":644},"target rule",{"type":65,"tag":131,"props":646,"children":647},{"style":156},[648],{"type":70,"value":474},{"type":65,"tag":131,"props":650,"children":651},{"style":222},[652],{"type":70,"value":561},{"type":65,"tag":131,"props":654,"children":655},{"style":156},[656],{"type":70,"value":479},{"type":65,"tag":131,"props":658,"children":660},{"class":133,"line":659},20,[661,665,669,673,677,682,686,690,694,699,703,707,711,716,720,724],{"type":65,"tag":131,"props":662,"children":663},{"style":166},[664],{"type":70,"value":284},{"type":65,"tag":131,"props":666,"children":667},{"style":156},[668],{"type":70,"value":174},{"type":65,"tag":131,"props":670,"children":671},{"style":222},[672],{"type":70,"value":525},{"type":65,"tag":131,"props":674,"children":675},{"style":156},[676],{"type":70,"value":474},{"type":65,"tag":131,"props":678,"children":679},{"style":466},[680],{"type":70,"value":681},"shared weekly x",{"type":65,"tag":131,"props":683,"children":684},{"style":156},[685],{"type":70,"value":474},{"type":65,"tag":131,"props":687,"children":688},{"style":156},[689],{"type":70,"value":543},{"type":65,"tag":131,"props":691,"children":692},{"style":156},[693],{"type":70,"value":463},{"type":65,"tag":131,"props":695,"children":696},{"style":466},[697],{"type":70,"value":698},"zero-based revenue y",{"type":65,"tag":131,"props":700,"children":701},{"style":156},[702],{"type":70,"value":474},{"type":65,"tag":131,"props":704,"children":705},{"style":156},[706],{"type":70,"value":543},{"type":65,"tag":131,"props":708,"children":709},{"style":156},[710],{"type":70,"value":463},{"type":65,"tag":131,"props":712,"children":713},{"style":466},[714],{"type":70,"value":715},"stable product color",{"type":65,"tag":131,"props":717,"children":718},{"style":156},[719],{"type":70,"value":474},{"type":65,"tag":131,"props":721,"children":722},{"style":222},[723],{"type":70,"value":561},{"type":65,"tag":131,"props":725,"children":726},{"style":156},[727],{"type":70,"value":479},{"type":65,"tag":131,"props":729,"children":731},{"class":133,"line":730},21,[732,736,740,744,748,753,757,761,765,770,774,778],{"type":65,"tag":131,"props":733,"children":734},{"style":166},[735],{"type":70,"value":309},{"type":65,"tag":131,"props":737,"children":738},{"style":156},[739],{"type":70,"value":174},{"type":65,"tag":131,"props":741,"children":742},{"style":222},[743],{"type":70,"value":525},{"type":65,"tag":131,"props":745,"children":746},{"style":156},[747],{"type":70,"value":474},{"type":65,"tag":131,"props":749,"children":750},{"style":466},[751],{"type":70,"value":752},"grouped x tooltip",{"type":65,"tag":131,"props":754,"children":755},{"style":156},[756],{"type":70,"value":474},{"type":65,"tag":131,"props":758,"children":759},{"style":156},[760],{"type":70,"value":543},{"type":65,"tag":131,"props":762,"children":763},{"style":156},[764],{"type":70,"value":463},{"type":65,"tag":131,"props":766,"children":767},{"style":466},[768],{"type":70,"value":769},"keyboard inspection",{"type":65,"tag":131,"props":771,"children":772},{"style":156},[773],{"type":70,"value":474},{"type":65,"tag":131,"props":775,"children":776},{"style":222},[777],{"type":70,"value":561},{"type":65,"tag":131,"props":779,"children":780},{"style":156},[781],{"type":70,"value":479},{"type":65,"tag":131,"props":783,"children":785},{"class":133,"line":784},22,[786,790,794,798,802,807,811,815,819,824,828,832],{"type":65,"tag":131,"props":787,"children":788},{"style":166},[789],{"type":70,"value":334},{"type":65,"tag":131,"props":791,"children":792},{"style":156},[793],{"type":70,"value":174},{"type":65,"tag":131,"props":795,"children":796},{"style":222},[797],{"type":70,"value":525},{"type":65,"tag":131,"props":799,"children":800},{"style":156},[801],{"type":70,"value":474},{"type":65,"tag":131,"props":803,"children":804},{"style":466},[805],{"type":70,"value":806},"figure label",{"type":65,"tag":131,"props":808,"children":809},{"style":156},[810],{"type":70,"value":474},{"type":65,"tag":131,"props":812,"children":813},{"style":156},[814],{"type":70,"value":543},{"type":65,"tag":131,"props":816,"children":817},{"style":156},[818],{"type":70,"value":463},{"type":65,"tag":131,"props":820,"children":821},{"style":466},[822],{"type":70,"value":823},"adjacent summary",{"type":65,"tag":131,"props":825,"children":826},{"style":156},[827],{"type":70,"value":474},{"type":65,"tag":131,"props":829,"children":830},{"style":222},[831],{"type":70,"value":561},{"type":65,"tag":131,"props":833,"children":834},{"style":156},[835],{"type":70,"value":479},{"type":65,"tag":131,"props":837,"children":839},{"class":133,"line":838},23,[840,844,848,852,856,861,865,869],{"type":65,"tag":131,"props":841,"children":842},{"style":166},[843],{"type":70,"value":359},{"type":65,"tag":131,"props":845,"children":846},{"style":156},[847],{"type":70,"value":174},{"type":65,"tag":131,"props":849,"children":850},{"style":222},[851],{"type":70,"value":525},{"type":65,"tag":131,"props":853,"children":854},{"style":156},[855],{"type":70,"value":474},{"type":65,"tag":131,"props":857,"children":858},{"style":466},[859],{"type":70,"value":860},"static SVG",{"type":65,"tag":131,"props":862,"children":863},{"style":156},[864],{"type":70,"value":474},{"type":65,"tag":131,"props":866,"children":867},{"style":222},[868],{"type":70,"value":561},{"type":65,"tag":131,"props":870,"children":871},{"style":156},[872],{"type":70,"value":479},{"type":65,"tag":131,"props":874,"children":876},{"class":133,"line":875},24,[877,881,885,889,894,898],{"type":65,"tag":131,"props":878,"children":879},{"style":166},[880],{"type":70,"value":384},{"type":65,"tag":131,"props":882,"children":883},{"style":156},[884],{"type":70,"value":174},{"type":65,"tag":131,"props":886,"children":887},{"style":156},[888],{"type":70,"value":463},{"type":65,"tag":131,"props":890,"children":891},{"style":466},[892],{"type":70,"value":893},"12 charts, 2,000 visible points, responsive updates",{"type":65,"tag":131,"props":895,"children":896},{"style":156},[897],{"type":70,"value":474},{"type":65,"tag":131,"props":899,"children":900},{"style":156},[901],{"type":70,"value":479},{"type":65,"tag":131,"props":903,"children":905},{"class":133,"line":904},25,[906],{"type":65,"tag":131,"props":907,"children":908},{"style":156},[909],{"type":70,"value":401},{"type":65,"tag":66,"props":911,"children":912},{},[913],{"type":70,"value":914},"Record which layer currently owns every item. Do not assume the source renderer owns transforms, domains, or product state just because its API config mentions them.",{"type":65,"tag":108,"props":916,"children":918},{"id":917},"core-integration-patterns",[919],{"type":70,"value":920},"Core Integration Patterns",{"type":65,"tag":922,"props":923,"children":925},"h3",{"id":924},"translate-through-the-grammar",[926],{"type":70,"value":927},"Translate through the grammar",{"type":65,"tag":66,"props":929,"children":930},{},[931],{"type":70,"value":932},"For each source layer, map:",{"type":65,"tag":934,"props":935,"children":936},"ol",{},[937,943,948,953,958,963,968,973],{"type":65,"tag":938,"props":939,"children":940},"li",{},[941],{"type":70,"value":942},"source rows and row grain;",{"type":65,"tag":938,"props":944,"children":945},{},[946],{"type":70,"value":947},"eager analytical transforms;",{"type":65,"tag":938,"props":949,"children":950},{},[951],{"type":70,"value":952},"mark-local layout;",{"type":65,"tag":938,"props":954,"children":955},{},[956],{"type":70,"value":957},"positional, grouping, color, and interval channels;",{"type":65,"tag":938,"props":959,"children":960},{},[961],{"type":70,"value":962},"semantic scale domains;",{"type":65,"tag":938,"props":964,"children":965},{},[966],{"type":70,"value":967},"marks and layer order;",{"type":65,"tag":938,"props":969,"children":970},{},[971],{"type":70,"value":972},"focus and controlled application state;",{"type":65,"tag":938,"props":974,"children":975},{},[976],{"type":70,"value":977},"renderer, adapter, and export lifecycle.",{"type":65,"tag":66,"props":979,"children":980},{},[981],{"type":70,"value":982},"Use the source-specific references only after this inventory.",{"type":65,"tag":922,"props":984,"children":986},{"id":985},"migrate-one-ownership-boundary-at-a-time",[987],{"type":70,"value":988},"Migrate one ownership boundary at a time",{"type":65,"tag":66,"props":990,"children":991},{},[992],{"type":70,"value":993},"A safe sequence is:",{"type":65,"tag":934,"props":995,"children":996},{},[997,1002,1007,1012,1017,1022,1027,1032],{"type":65,"tag":938,"props":998,"children":999},{},[1000],{"type":70,"value":1001},"Freeze source data preparation and capture fixtures.",{"type":65,"tag":938,"props":1003,"children":1004},{},[1005],{"type":70,"value":1006},"Build a static TanStack scene from the same prepared rows.",{"type":65,"tag":938,"props":1008,"children":1009},{},[1010],{"type":70,"value":1011},"Match scales, marks, labels, and empty\u002Fmissing behavior.",{"type":65,"tag":938,"props":1013,"children":1014},{},[1015],{"type":70,"value":1016},"Add focus and tooltip semantics.",{"type":65,"tag":938,"props":1018,"children":1019},{},[1020],{"type":70,"value":1021},"Add controlled selection, brush, zoom, or application overlays.",{"type":65,"tag":938,"props":1023,"children":1024},{},[1025],{"type":70,"value":1026},"Wire the target framework adapter and SSR lifecycle.",{"type":65,"tag":938,"props":1028,"children":1029},{},[1030],{"type":70,"value":1031},"Compare bundle and sustained interaction\u002Fupdate performance.",{"type":65,"tag":938,"props":1033,"children":1034},{},[1035],{"type":70,"value":1036},"Remove the source renderer only after rollback is no longer needed.",{"type":65,"tag":922,"props":1038,"children":1040},{"id":1039},"prove-parity-by-scenarios",[1041],{"type":70,"value":1042},"Prove parity by scenarios",{"type":65,"tag":1044,"props":1045,"children":1046},"table",{},[1047,1066],{"type":65,"tag":1048,"props":1049,"children":1050},"thead",{},[1051],{"type":65,"tag":1052,"props":1053,"children":1054},"tr",{},[1055,1061],{"type":65,"tag":1056,"props":1057,"children":1058},"th",{},[1059],{"type":70,"value":1060},"Surface",{"type":65,"tag":1056,"props":1062,"children":1063},{},[1064],{"type":70,"value":1065},"Evidence",{"type":65,"tag":1067,"props":1068,"children":1069},"tbody",{},[1070,1084,1097,1110,1123,1136,1149,1162],{"type":65,"tag":1052,"props":1071,"children":1072},{},[1073,1079],{"type":65,"tag":1074,"props":1075,"children":1076},"td",{},[1077],{"type":70,"value":1078},"Data",{"type":65,"tag":1074,"props":1080,"children":1081},{},[1082],{"type":70,"value":1083},"fixture rows and transform outputs match",{"type":65,"tag":1052,"props":1085,"children":1086},{},[1087,1092],{"type":65,"tag":1074,"props":1088,"children":1089},{},[1090],{"type":70,"value":1091},"Visual",{"type":65,"tag":1074,"props":1093,"children":1094},{},[1095],{"type":70,"value":1096},"geometry, domains, guides, labels, color, missing\u002Fnegative cases",{"type":65,"tag":1052,"props":1098,"children":1099},{},[1100,1105],{"type":65,"tag":1074,"props":1101,"children":1102},{},[1103],{"type":70,"value":1104},"Interaction",{"type":65,"tag":1074,"props":1106,"children":1107},{},[1108],{"type":70,"value":1109},"pointer and keyboard focus, grouping, pinning, controlled state",{"type":65,"tag":1052,"props":1111,"children":1112},{},[1113,1118],{"type":65,"tag":1074,"props":1114,"children":1115},{},[1116],{"type":70,"value":1117},"Lifecycle",{"type":65,"tag":1074,"props":1119,"children":1120},{},[1121],{"type":70,"value":1122},"mount, update, resize, SSR\u002Fhydration, destroy",{"type":65,"tag":1052,"props":1124,"children":1125},{},[1126,1131],{"type":65,"tag":1074,"props":1127,"children":1128},{},[1129],{"type":70,"value":1130},"Accessibility",{"type":65,"tag":1074,"props":1132,"children":1133},{},[1134],{"type":70,"value":1135},"meaningful name, equivalent values\u002Factions, summary\u002Ftable",{"type":65,"tag":1052,"props":1137,"children":1138},{},[1139,1144],{"type":65,"tag":1074,"props":1140,"children":1141},{},[1142],{"type":70,"value":1143},"Export",{"type":65,"tag":1074,"props":1145,"children":1146},{},[1147],{"type":70,"value":1148},"SVG\u002FCanvas\u002Fstatic output and fonts\u002Fresources",{"type":65,"tag":1052,"props":1150,"children":1151},{},[1152,1157],{"type":65,"tag":1074,"props":1153,"children":1154},{},[1155],{"type":70,"value":1156},"Packaging",{"type":65,"tag":1074,"props":1158,"children":1159},{},[1160],{"type":70,"value":1161},"packed consumer imports and retained optional modules",{"type":65,"tag":1052,"props":1163,"children":1164},{},[1165,1170],{"type":65,"tag":1074,"props":1166,"children":1167},{},[1168],{"type":70,"value":1169},"Performance",{"type":65,"tag":1074,"props":1171,"children":1172},{},[1173],{"type":70,"value":1174},"target dashboard shape under sustained pointer\u002Fupdate work",{"type":65,"tag":922,"props":1176,"children":1178},{"id":1177},"keep-a-comparison-switch",[1179],{"type":70,"value":1180},"Keep a comparison switch",{"type":65,"tag":66,"props":1182,"children":1183},{},[1184],{"type":70,"value":1185},"During production migration, use the same prepared rows and accepted application state for old and new renderers. A temporary feature flag or development harness should switch rendering ownership without changing analytics.",{"type":65,"tag":108,"props":1187,"children":1189},{"id":1188},"common-mistakes",[1190],{"type":70,"value":1191},"Common Mistakes",{"type":65,"tag":922,"props":1193,"children":1195},{"id":1194},"critical-translating-component-names-one-for-one",[1196],{"type":70,"value":1197},"CRITICAL Translating component names one for one",{"type":65,"tag":66,"props":1199,"children":1200},{},[1201],{"type":70,"value":1202},"Wrong: find the TanStack component with the closest source-library name.",{"type":65,"tag":66,"props":1204,"children":1205},{},[1206],{"type":70,"value":1207},"Correct: map data, transform, scale, geometry, interaction, and lifecycle ownership independently.",{"type":65,"tag":66,"props":1209,"children":1210},{},[1211],{"type":70,"value":1212},"Source components combine responsibilities differently, so name matching preserves syntax instead of behavior.",{"type":65,"tag":66,"props":1214,"children":1215},{},[1216,1218],{"type":70,"value":1217},"Source: ",{"type":65,"tag":73,"props":1219,"children":1221},{"className":1220},[],[1222],{"type":70,"value":1223},"docs\u002Fguides\u002Fmigrating.md",{"type":65,"tag":922,"props":1225,"children":1227},{"id":1226},"critical-replacing-transforms-and-renderer-together",[1228],{"type":70,"value":1229},"CRITICAL Replacing transforms and renderer together",{"type":65,"tag":66,"props":1231,"children":1232},{},[1233],{"type":70,"value":1234},"Wrong: rewrite grouping, stacking, forecasting, and rendering in one change.",{"type":65,"tag":66,"props":1236,"children":1237},{},[1238],{"type":70,"value":1239},"Correct: freeze and test analytical rows first; migrate renderer ownership against those fixtures; move transforms later only with separate evidence.",{"type":65,"tag":66,"props":1241,"children":1242},{},[1243],{"type":70,"value":1244},"Changing both makes visual drift impossible to classify.",{"type":65,"tag":66,"props":1246,"children":1247},{},[1248,1249,1254],{"type":70,"value":1217},{"type":65,"tag":73,"props":1250,"children":1252},{"className":1251},[],[1253],{"type":70,"value":1223},{"type":70,"value":1255},"; archived TanStack Stats migration notes",{"type":65,"tag":922,"props":1257,"children":1259},{"id":1258},"critical-calling-screenshot-similarity-complete-parity",[1260],{"type":70,"value":1261},"CRITICAL Calling screenshot similarity complete parity",{"type":65,"tag":66,"props":1263,"children":1264},{},[1265],{"type":70,"value":1266},"Wrong: approve after one viewport screenshot resembles the source.",{"type":65,"tag":66,"props":1268,"children":1269},{},[1270],{"type":70,"value":1271},"Correct: test the scenario matrix for focus, keyboard, updates, pinning, export, packages, and performance.",{"type":65,"tag":66,"props":1273,"children":1274},{},[1275],{"type":70,"value":1276},"A final image does not prove behavior or lifecycle ownership.",{"type":65,"tag":66,"props":1278,"children":1279},{},[1280,1281,1287,1289],{"type":70,"value":1217},{"type":65,"tag":73,"props":1282,"children":1284},{"className":1283},[],[1285],{"type":70,"value":1286},"API-FRICTION.md",{"type":70,"value":1288}," F-036, F-073, F-081; ",{"type":65,"tag":73,"props":1290,"children":1292},{"className":1291},[],[1293],{"type":70,"value":1223},{"type":65,"tag":922,"props":1295,"children":1297},{"id":1296},"high-reimplementing-source-internals-blindly",[1298],{"type":70,"value":1299},"HIGH Reimplementing source internals blindly",{"type":65,"tag":66,"props":1301,"children":1302},{},[1303],{"type":70,"value":1304},"Wrong: port D3 selections, plugin lifecycle, source scale math, and every private helper into custom marks.",{"type":65,"tag":66,"props":1306,"children":1307},{},[1308],{"type":70,"value":1309},"Correct: keep proven application\u002FD3\u002FSQL preparation at first, express supported semantics through TanStack primitives, and extend only a verified gap.",{"type":65,"tag":66,"props":1311,"children":1312},{},[1313],{"type":70,"value":1314},"Blind ports preserve accidental architecture and bypass renderer-neutral ownership.",{"type":65,"tag":66,"props":1316,"children":1317},{},[1318,1319,1324,1326,1331],{"type":70,"value":1217},{"type":65,"tag":73,"props":1320,"children":1322},{"className":1321},[],[1323],{"type":70,"value":1223},{"type":70,"value":1325},"; ",{"type":65,"tag":73,"props":1327,"children":1329},{"className":1328},[],[1330],{"type":70,"value":1286},{"type":70,"value":1332}," F-127",{"type":65,"tag":108,"props":1334,"children":1336},{"id":1335},"references",[1337],{"type":70,"value":1338},"References",{"type":65,"tag":1340,"props":1341,"children":1342},"ul",{},[1343,1353,1362,1371,1380],{"type":65,"tag":938,"props":1344,"children":1345},{},[1346],{"type":65,"tag":1347,"props":1348,"children":1350},"a",{"href":1349},"references\u002Fobservable-plot.md",[1351],{"type":70,"value":1352},"Observable Plot",{"type":65,"tag":938,"props":1354,"children":1355},{},[1356],{"type":65,"tag":1347,"props":1357,"children":1359},{"href":1358},"references\u002Frecharts.md",[1360],{"type":70,"value":1361},"Recharts",{"type":65,"tag":938,"props":1363,"children":1364},{},[1365],{"type":65,"tag":1347,"props":1366,"children":1368},{"href":1367},"references\u002Fchart-js.md",[1369],{"type":70,"value":1370},"Chart.js",{"type":65,"tag":938,"props":1372,"children":1373},{},[1374],{"type":65,"tag":1347,"props":1375,"children":1377},{"href":1376},"references\u002Fecharts.md",[1378],{"type":70,"value":1379},"ECharts",{"type":65,"tag":938,"props":1381,"children":1382},{},[1383],{"type":65,"tag":1347,"props":1384,"children":1386},{"href":1385},"references\u002Fd3.md",[1387],{"type":70,"value":1388},"Direct D3",{"type":65,"tag":66,"props":1390,"children":1391},{},[1392,1394,1400,1401,1407],{"type":70,"value":1393},"See also: ",{"type":65,"tag":73,"props":1395,"children":1397},{"className":1396},[],[1398],{"type":70,"value":1399},"design-a-chart\u002FSKILL.md",{"type":70,"value":79},{"type":65,"tag":73,"props":1402,"children":1404},{"className":1403},[],[1405],{"type":70,"value":1406},"debug-and-verify-charts\u002FSKILL.md",{"type":70,"value":1408}," — restate the analytical task and prove parity beyond screenshots.",{"type":65,"tag":1410,"props":1411,"children":1412},"style",{},[1413],{"type":70,"value":1414},"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":1416,"total":395},[1417,1429,1442,1454,1470,1482,1492],{"slug":1418,"name":1418,"fn":1419,"description":1420,"org":1421,"tags":1422,"stars":23,"repoUrl":24,"updatedAt":1428},"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},[1423,1424,1425,1427],{"name":17,"slug":18,"type":15},{"name":21,"slug":22,"type":15},{"name":1104,"slug":1426,"type":15},"interaction",{"name":9,"slug":8,"type":15},"2026-08-15T03:47:32.82085",{"slug":1430,"name":1430,"fn":1431,"description":1432,"org":1433,"tags":1434,"stars":23,"repoUrl":24,"updatedAt":1441},"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},[1435,1436,1437,1438],{"name":17,"slug":18,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":1439,"slug":1440,"type":15},"UI Components","ui-components","2026-08-15T03:47:30.035164",{"slug":1443,"name":1443,"fn":1444,"description":1445,"org":1446,"tags":1447,"stars":23,"repoUrl":24,"updatedAt":1453},"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},[1448,1449,1451,1452],{"name":17,"slug":18,"type":15},{"name":1450,"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":1455,"name":1455,"fn":1456,"description":1457,"org":1458,"tags":1459,"stars":23,"repoUrl":24,"updatedAt":1469},"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},[1460,1461,1464,1467,1468],{"name":17,"slug":18,"type":15},{"name":1462,"slug":1463,"type":15},"Data Analysis","data-analysis",{"name":1465,"slug":1466,"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":56,"name":56,"fn":1471,"description":1472,"org":1473,"tags":1474,"stars":23,"repoUrl":24,"updatedAt":1481},"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},[1475,1476,1479,1480],{"name":17,"slug":18,"type":15},{"name":1477,"slug":1478,"type":15},"Debugging","debugging",{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-08-15T03:47:33.503153",{"slug":55,"name":55,"fn":1483,"description":1484,"org":1485,"tags":1486,"stars":23,"repoUrl":24,"updatedAt":1491},"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},[1487,1488,1489,1490],{"name":17,"slug":18,"type":15},{"name":1450,"slug":32,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-08-15T03:47:40.463333",{"slug":1493,"name":1493,"fn":1494,"description":1495,"org":1496,"tags":1497,"stars":23,"repoUrl":24,"updatedAt":1504},"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},[1498,1499,1500,1501,1503],{"name":17,"slug":18,"type":15},{"name":1450,"slug":32,"type":15},{"name":21,"slug":22,"type":15},{"name":1502,"slug":39,"type":15},"SSR",{"name":9,"slug":8,"type":15},"2026-08-15T03:47:36.306971",{"items":1506,"total":1638},[1507,1519,1529,1539,1550,1564,1574,1584,1594,1607,1617,1628],{"slug":1508,"name":1508,"fn":1509,"description":1510,"org":1511,"tags":1512,"stars":1516,"repoUrl":1517,"updatedAt":1518},"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},[1513,1514,1515],{"name":1462,"slug":1463,"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":1520,"name":1520,"fn":1521,"description":1522,"org":1523,"tags":1524,"stars":1516,"repoUrl":1517,"updatedAt":1528},"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},[1525,1526,1527],{"name":1477,"slug":1478,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-08-11T04:05:45.454347",{"slug":1530,"name":1530,"fn":1531,"description":1532,"org":1533,"tags":1534,"stars":1516,"repoUrl":1517,"updatedAt":1538},"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},[1535,1536,1537],{"name":1462,"slug":1463,"type":15},{"name":9,"slug":8,"type":15},{"name":1439,"slug":1440,"type":15},"2026-08-11T04:05:18.454719",{"slug":1540,"name":1540,"fn":1541,"description":1542,"org":1543,"tags":1544,"stars":1516,"repoUrl":1517,"updatedAt":1549},"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},[1545,1546,1547,1548],{"name":1450,"slug":32,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":1439,"slug":1440,"type":15},"2026-08-11T04:05:16.471567",{"slug":1551,"name":1551,"fn":1552,"description":1553,"org":1554,"tags":1555,"stars":1516,"repoUrl":1517,"updatedAt":1563},"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},[1556,1559,1560,1562],{"name":1557,"slug":1558,"type":15},"Data Pipeline","data-pipeline",{"name":21,"slug":22,"type":15},{"name":1169,"slug":1561,"type":15},"performance",{"name":9,"slug":8,"type":15},"2026-08-11T04:05:25.45112",{"slug":1565,"name":1565,"fn":1566,"description":1567,"org":1568,"tags":1569,"stars":1516,"repoUrl":1517,"updatedAt":1573},"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},[1570,1571,1572],{"name":1450,"slug":32,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-08-11T04:05:21.505333",{"slug":1575,"name":1575,"fn":1576,"description":1577,"org":1578,"tags":1579,"stars":1516,"repoUrl":1517,"updatedAt":1583},"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},[1580,1581,1582],{"name":1462,"slug":1463,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-08-11T04:05:33.684468",{"slug":1585,"name":1585,"fn":1586,"description":1587,"org":1588,"tags":1589,"stars":1516,"repoUrl":1517,"updatedAt":1593},"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},[1590,1591,1592],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":1439,"slug":1440,"type":15},"2026-08-11T04:05:43.445905",{"slug":1595,"name":1595,"fn":1596,"description":1597,"org":1598,"tags":1599,"stars":1516,"repoUrl":1517,"updatedAt":1606},"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},[1600,1603,1604,1605],{"name":1601,"slug":1602,"type":15},"CSS","css",{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":1439,"slug":1440,"type":15},"2026-08-11T04:05:35.453858",{"slug":1608,"name":1608,"fn":1609,"description":1610,"org":1611,"tags":1612,"stars":1516,"repoUrl":1517,"updatedAt":1616},"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},[1613,1614,1615],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":1439,"slug":1440,"type":15},"2026-08-11T04:05:31.46447",{"slug":1618,"name":1618,"fn":1619,"description":1620,"org":1621,"tags":1622,"stars":1516,"repoUrl":1517,"updatedAt":1627},"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},[1623,1624,1625,1626],{"name":1601,"slug":1602,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":1439,"slug":1440,"type":15},"2026-08-11T04:05:28.559861",{"slug":1629,"name":1629,"fn":1630,"description":1631,"org":1632,"tags":1633,"stars":1516,"repoUrl":1517,"updatedAt":1637},"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},[1634,1635,1636],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":1439,"slug":1440,"type":15},"2026-08-11T04:05:27.479925",139]