[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-tanstack-design-a-chart":3,"mdc-h8zey3-key":47,"related-repo-tanstack-design-a-chart":2241,"related-org-tanstack-design-a-chart":2329},{"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":42,"sourceUrl":45,"mdContent":46},"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},"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},"Data Visualization","data-visualization","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:40.463333",null,40,[29,30,18,31,14,32,33,34,35,36,37,38,39,8,40,41],"accessible-charts","charting-library","d3","dataviz","grammar-of-graphics","javascript","octane","react","responsive-charts","ssr","svg","typescript","visualization",{"repoUrl":24,"stars":23,"forks":27,"topics":43,"description":44},[29,30,18,31,14,32,33,34,35,36,37,38,39,8,40,41],"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-a-chart","---\nname: design-a-chart\ndescription: >\n  Choose an honest visualization from a user story, metric, comparison,\n  projection, target, or explanatory goal before selecting TanStack Charts\n  marks. Load whenever a user asks to graph, chart, visualize, compare,\n  forecast, project, explain, or communicate data.\nmetadata:\n  type: core\n  library: '@tanstack\u002Fcharts'\n  library_version: '0.9.0'\nsources:\n  - 'TanStack\u002Fcharts:docs\u002Fguides\u002Fchoosing-a-chart.md'\n  - 'TanStack\u002Fcharts:docs\u002Fexamples\u002F*.md'\n  - 'TanStack\u002Fcharts:docs\u002Freference\u002Ftransforms.md'\n---\n\n# Design a Chart From a User Goal\n\nUse this scenario loop: **trigger → inspect → decide → build → verify**. Do not begin with a chart type, even when the request names one.\n\n## Setup\n\nTurn the request into this brief before writing chart code:\n\n```ts\ninterface ChartBrief {\n  question: string\n  decision: string\n  observation: string\n  metric: { value: string; unit: string; denominator?: string }\n  comparison:\n    'time' | 'category' | 'distribution' | 'relationship' | 'composition'\n  evidence: readonly string[]\n}\n\nexport const brief: ChartBrief = {\n  question:\n    'Which acquisition channel improved conversion without losing volume?',\n  decision: 'Choose where to increase next-month spend',\n  observation: 'one row per channel and month',\n  metric: { value: 'conversionRate', unit: '%', denominator: 'sessions' },\n  comparison: 'time',\n  evidence: ['conversion rate', 'sessions', 'month', 'channel'],\n}\n```\n\nIf the question, observation, unit, denominator, or decision is unknown, inspect the data and surrounding product before choosing marks.\n\n## Core Patterns\n\n### Match the form to the reader's comparison\n\n- Change over ordered time → line; discrete periods → bars.\n- Named-category magnitude → sorted horizontal bars or dots.\n- Distribution → histogram, ECDF, box, violin, or faceted histograms.\n- Relationship → scatterplot; add size only for a meaningful third quantity.\n- Composition → stack for totals, normalized stack for proportions, mosaic for two categorical dimensions.\n- Flow, hierarchy, network, or spatial questions → use their first-party layouts only when topology is the question.\n\nRead [the visual-task matrix](references\u002Fvisual-task-matrix.md) for the full routing table.\n\n### Separate observed, target, and projected values\n\n```ts\nimport { areaY, defineChart, lineY, ruleY } from '@tanstack\u002Fcharts'\nimport { scaleLinear } from '@tanstack\u002Fcharts\u002Fscales\u002Flinear'\nimport { scalePoint } from '@tanstack\u002Fcharts\u002Fscales\u002Fpoint'\n\nconst rows = [\n  { month: 'Jan', actual: 82, forecast: null, low: null, high: null },\n  { month: 'Feb', actual: 91, forecast: null, low: null, high: null },\n  { month: 'Mar', actual: null, forecast: 96, low: 88, high: 106 },\n  { month: 'Apr', actual: null, forecast: 103, low: 90, high: 119 },\n]\n\nexport const chart = defineChart({\n  marks: [\n    areaY(rows, { x: 'month', y1: 'low', y2: 'high', fillOpacity: 0.15 }),\n    lineY(rows, { x: 'month', y: 'actual', strokeWidth: 2.5 }),\n    lineY(rows, { x: 'month', y: 'forecast', strokeDasharray: '5 4' }),\n    ruleY([100], { strokeDasharray: '2 3' }),\n  ],\n  x: { scale: scalePoint },\n  y: { scale: scaleLinear, axis: { label: 'Indexed revenue' } },\n})\n```\n\nUse different channels for status and uncertainty. A continuous unqualified line implies equal epistemic status.\n\n### Define proof before polish\n\nFor every chart, verify:\n\n- the visual answers the stated question;\n- axes, legend, title, or adjacent copy identify units and comparison;\n- ordering, aggregation, missing-value policy, and baseline are deliberate;\n- exact-value tasks have a table or textual equivalent;\n- the smallest supported container preserves the important comparison;\n- pointer, keyboard, updates, and empty states tell the same story.\n\n## Common Mistakes\n\n### CRITICAL Starting with the requested chart type\n\nWrong: implement “make this a pie chart” before identifying the comparison.\n\nCorrect: restate the decision and recommend the form that makes that comparison perceptually direct. If the user retains a weaker form, state its analytical limitation and preserve the underlying semantics.\n\nA familiar chart can answer a different question than the user needs.\n\nSource: `docs\u002Fguides\u002Fchoosing-a-chart.md`\n\n### HIGH Showing a rate without its denominator\n\nWrong: show conversion rate alone.\n\nCorrect: keep sessions or eligible population in the prepared row and expose it beside the rate or in the tooltip.\n\nNormalized values can reverse interpretation when volume changes.\n\nSource: `API-FRICTION.md` F-217; `docs\u002Freference\u002Ftransforms.md`\n\n### CRITICAL Rendering projections as observed history\n\nWrong: connect actuals and forecasts with one undifferentiated line.\n\nCorrect: encode the forecast boundary, projected segment, and uncertainty explicitly.\n\nContinuous treatment implies equal certainty.\n\nSource: `docs\u002Fexamples\u002Flines-and-areas.md`; `docs\u002Freference\u002Fmarks\u002Fdifference.md`\n\n### HIGH Choosing area or angle for precise ranking\n\nWrong: rank close values with wedges, bubbles, or interior stack layers.\n\nCorrect: use aligned position or length when exact ordering is the reader's task.\n\nArea and angle emphasize shape or part-to-whole relationships, not precise rank.\n\nSource: `docs\u002Fguides\u002Fchoosing-a-chart.md`; `docs\u002Fexamples\u002Fbars-and-rankings.md`\n\n### HIGH Tension: analytical honesty versus visual simplicity\n\nSimplifying aggregation can hide denominators, lineage, uncertainty, or missing-value policy. Preserve the evidence needed to interpret the result before reducing visual detail.\n\nSee also: `prepare-chart-data\u002FSKILL.md` § Common Mistakes\n\n## References\n\n- [Analytical task and visual-form matrix](references\u002Fvisual-task-matrix.md)\n\nSee also: `prepare-chart-data\u002FSKILL.md` and `compose-marks-and-views\u002FSKILL.md` — the analytical task determines both the transform and mark composition.\n",{"data":48,"body":57},{"name":4,"description":6,"metadata":49,"sources":53},{"type":50,"library":51,"library_version":52},"core","@tanstack\u002Fcharts","0.9.0",[54,55,56],"TanStack\u002Fcharts:docs\u002Fguides\u002Fchoosing-a-chart.md","TanStack\u002Fcharts:docs\u002Fexamples\u002F*.md","TanStack\u002Fcharts:docs\u002Freference\u002Ftransforms.md",{"type":58,"children":59},"root",[60,69,83,90,95,757,762,768,775,810,824,830,1973,1978,1984,1989,2022,2028,2034,2039,2044,2049,2060,2066,2071,2076,2081,2099,2105,2110,2115,2120,2138,2144,2149,2154,2159,2175,2181,2186,2199,2205,2216,2235],{"type":61,"tag":62,"props":63,"children":65},"element","h1",{"id":64},"design-a-chart-from-a-user-goal",[66],{"type":67,"value":68},"text","Design a Chart From a User Goal",{"type":61,"tag":70,"props":71,"children":72},"p",{},[73,75,81],{"type":67,"value":74},"Use this scenario loop: ",{"type":61,"tag":76,"props":77,"children":78},"strong",{},[79],{"type":67,"value":80},"trigger → inspect → decide → build → verify",{"type":67,"value":82},". Do not begin with a chart type, even when the request names one.",{"type":61,"tag":84,"props":85,"children":87},"h2",{"id":86},"setup",[88],{"type":67,"value":89},"Setup",{"type":61,"tag":70,"props":91,"children":92},{},[93],{"type":67,"value":94},"Turn the request into this brief before writing chart code:",{"type":61,"tag":96,"props":97,"children":102},"pre",{"className":98,"code":99,"language":100,"meta":101,"style":101},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","interface ChartBrief {\n  question: string\n  decision: string\n  observation: string\n  metric: { value: string; unit: string; denominator?: string }\n  comparison:\n    'time' | 'category' | 'distribution' | 'relationship' | 'composition'\n  evidence: readonly string[]\n}\n\nexport const brief: ChartBrief = {\n  question:\n    'Which acquisition channel improved conversion without losing volume?',\n  decision: 'Choose where to increase next-month spend',\n  observation: 'one row per channel and month',\n  metric: { value: 'conversionRate', unit: '%', denominator: 'sessions' },\n  comparison: 'time',\n  evidence: ['conversion rate', 'sessions', 'month', 'channel'],\n}\n","ts","",[103],{"type":61,"tag":104,"props":105,"children":106},"code",{"__ignoreMap":101},[107,131,151,168,185,258,272,363,391,400,410,447,459,481,510,539,632,660,749],{"type":61,"tag":108,"props":109,"children":112},"span",{"class":110,"line":111},"line",1,[113,119,125],{"type":61,"tag":108,"props":114,"children":116},{"style":115},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[117],{"type":67,"value":118},"interface",{"type":61,"tag":108,"props":120,"children":122},{"style":121},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[123],{"type":67,"value":124}," ChartBrief",{"type":61,"tag":108,"props":126,"children":128},{"style":127},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[129],{"type":67,"value":130}," {\n",{"type":61,"tag":108,"props":132,"children":134},{"class":110,"line":133},2,[135,141,146],{"type":61,"tag":108,"props":136,"children":138},{"style":137},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[139],{"type":67,"value":140},"  question",{"type":61,"tag":108,"props":142,"children":143},{"style":127},[144],{"type":67,"value":145},":",{"type":61,"tag":108,"props":147,"children":148},{"style":121},[149],{"type":67,"value":150}," string\n",{"type":61,"tag":108,"props":152,"children":154},{"class":110,"line":153},3,[155,160,164],{"type":61,"tag":108,"props":156,"children":157},{"style":137},[158],{"type":67,"value":159},"  decision",{"type":61,"tag":108,"props":161,"children":162},{"style":127},[163],{"type":67,"value":145},{"type":61,"tag":108,"props":165,"children":166},{"style":121},[167],{"type":67,"value":150},{"type":61,"tag":108,"props":169,"children":171},{"class":110,"line":170},4,[172,177,181],{"type":61,"tag":108,"props":173,"children":174},{"style":137},[175],{"type":67,"value":176},"  observation",{"type":61,"tag":108,"props":178,"children":179},{"style":127},[180],{"type":67,"value":145},{"type":61,"tag":108,"props":182,"children":183},{"style":121},[184],{"type":67,"value":150},{"type":61,"tag":108,"props":186,"children":188},{"class":110,"line":187},5,[189,194,198,203,208,212,217,222,227,231,235,239,244,249,253],{"type":61,"tag":108,"props":190,"children":191},{"style":137},[192],{"type":67,"value":193},"  metric",{"type":61,"tag":108,"props":195,"children":196},{"style":127},[197],{"type":67,"value":145},{"type":61,"tag":108,"props":199,"children":200},{"style":127},[201],{"type":67,"value":202}," {",{"type":61,"tag":108,"props":204,"children":205},{"style":137},[206],{"type":67,"value":207}," value",{"type":61,"tag":108,"props":209,"children":210},{"style":127},[211],{"type":67,"value":145},{"type":61,"tag":108,"props":213,"children":214},{"style":121},[215],{"type":67,"value":216}," string",{"type":61,"tag":108,"props":218,"children":219},{"style":127},[220],{"type":67,"value":221},";",{"type":61,"tag":108,"props":223,"children":224},{"style":137},[225],{"type":67,"value":226}," unit",{"type":61,"tag":108,"props":228,"children":229},{"style":127},[230],{"type":67,"value":145},{"type":61,"tag":108,"props":232,"children":233},{"style":121},[234],{"type":67,"value":216},{"type":61,"tag":108,"props":236,"children":237},{"style":127},[238],{"type":67,"value":221},{"type":61,"tag":108,"props":240,"children":241},{"style":137},[242],{"type":67,"value":243}," denominator",{"type":61,"tag":108,"props":245,"children":246},{"style":127},[247],{"type":67,"value":248},"?:",{"type":61,"tag":108,"props":250,"children":251},{"style":121},[252],{"type":67,"value":216},{"type":61,"tag":108,"props":254,"children":255},{"style":127},[256],{"type":67,"value":257}," }\n",{"type":61,"tag":108,"props":259,"children":261},{"class":110,"line":260},6,[262,267],{"type":61,"tag":108,"props":263,"children":264},{"style":137},[265],{"type":67,"value":266},"  comparison",{"type":61,"tag":108,"props":268,"children":269},{"style":127},[270],{"type":67,"value":271},":\n",{"type":61,"tag":108,"props":273,"children":275},{"class":110,"line":274},7,[276,281,287,292,297,302,307,311,315,319,324,328,332,336,341,345,349,353,358],{"type":61,"tag":108,"props":277,"children":278},{"style":127},[279],{"type":67,"value":280},"    '",{"type":61,"tag":108,"props":282,"children":284},{"style":283},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[285],{"type":67,"value":286},"time",{"type":61,"tag":108,"props":288,"children":289},{"style":127},[290],{"type":67,"value":291},"'",{"type":61,"tag":108,"props":293,"children":294},{"style":127},[295],{"type":67,"value":296}," |",{"type":61,"tag":108,"props":298,"children":299},{"style":127},[300],{"type":67,"value":301}," '",{"type":61,"tag":108,"props":303,"children":304},{"style":283},[305],{"type":67,"value":306},"category",{"type":61,"tag":108,"props":308,"children":309},{"style":127},[310],{"type":67,"value":291},{"type":61,"tag":108,"props":312,"children":313},{"style":127},[314],{"type":67,"value":296},{"type":61,"tag":108,"props":316,"children":317},{"style":127},[318],{"type":67,"value":301},{"type":61,"tag":108,"props":320,"children":321},{"style":283},[322],{"type":67,"value":323},"distribution",{"type":61,"tag":108,"props":325,"children":326},{"style":127},[327],{"type":67,"value":291},{"type":61,"tag":108,"props":329,"children":330},{"style":127},[331],{"type":67,"value":296},{"type":61,"tag":108,"props":333,"children":334},{"style":127},[335],{"type":67,"value":301},{"type":61,"tag":108,"props":337,"children":338},{"style":283},[339],{"type":67,"value":340},"relationship",{"type":61,"tag":108,"props":342,"children":343},{"style":127},[344],{"type":67,"value":291},{"type":61,"tag":108,"props":346,"children":347},{"style":127},[348],{"type":67,"value":296},{"type":61,"tag":108,"props":350,"children":351},{"style":127},[352],{"type":67,"value":301},{"type":61,"tag":108,"props":354,"children":355},{"style":283},[356],{"type":67,"value":357},"composition",{"type":61,"tag":108,"props":359,"children":360},{"style":127},[361],{"type":67,"value":362},"'\n",{"type":61,"tag":108,"props":364,"children":366},{"class":110,"line":365},8,[367,372,376,381,385],{"type":61,"tag":108,"props":368,"children":369},{"style":121},[370],{"type":67,"value":371},"  evidence",{"type":61,"tag":108,"props":373,"children":374},{"style":127},[375],{"type":67,"value":145},{"type":61,"tag":108,"props":377,"children":378},{"style":115},[379],{"type":67,"value":380}," readonly",{"type":61,"tag":108,"props":382,"children":383},{"style":121},[384],{"type":67,"value":216},{"type":61,"tag":108,"props":386,"children":388},{"style":387},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[389],{"type":67,"value":390},"[]\n",{"type":61,"tag":108,"props":392,"children":394},{"class":110,"line":393},9,[395],{"type":61,"tag":108,"props":396,"children":397},{"style":127},[398],{"type":67,"value":399},"}\n",{"type":61,"tag":108,"props":401,"children":403},{"class":110,"line":402},10,[404],{"type":61,"tag":108,"props":405,"children":407},{"emptyLinePlaceholder":406},true,[408],{"type":67,"value":409},"\n",{"type":61,"tag":108,"props":411,"children":413},{"class":110,"line":412},11,[414,420,425,430,434,438,443],{"type":61,"tag":108,"props":415,"children":417},{"style":416},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[418],{"type":67,"value":419},"export",{"type":61,"tag":108,"props":421,"children":422},{"style":115},[423],{"type":67,"value":424}," const",{"type":61,"tag":108,"props":426,"children":427},{"style":387},[428],{"type":67,"value":429}," brief",{"type":61,"tag":108,"props":431,"children":432},{"style":127},[433],{"type":67,"value":145},{"type":61,"tag":108,"props":435,"children":436},{"style":121},[437],{"type":67,"value":124},{"type":61,"tag":108,"props":439,"children":440},{"style":127},[441],{"type":67,"value":442}," =",{"type":61,"tag":108,"props":444,"children":445},{"style":127},[446],{"type":67,"value":130},{"type":61,"tag":108,"props":448,"children":450},{"class":110,"line":449},12,[451,455],{"type":61,"tag":108,"props":452,"children":453},{"style":137},[454],{"type":67,"value":140},{"type":61,"tag":108,"props":456,"children":457},{"style":127},[458],{"type":67,"value":271},{"type":61,"tag":108,"props":460,"children":462},{"class":110,"line":461},13,[463,467,472,476],{"type":61,"tag":108,"props":464,"children":465},{"style":127},[466],{"type":67,"value":280},{"type":61,"tag":108,"props":468,"children":469},{"style":283},[470],{"type":67,"value":471},"Which acquisition channel improved conversion without losing volume?",{"type":61,"tag":108,"props":473,"children":474},{"style":127},[475],{"type":67,"value":291},{"type":61,"tag":108,"props":477,"children":478},{"style":127},[479],{"type":67,"value":480},",\n",{"type":61,"tag":108,"props":482,"children":484},{"class":110,"line":483},14,[485,489,493,497,502,506],{"type":61,"tag":108,"props":486,"children":487},{"style":137},[488],{"type":67,"value":159},{"type":61,"tag":108,"props":490,"children":491},{"style":127},[492],{"type":67,"value":145},{"type":61,"tag":108,"props":494,"children":495},{"style":127},[496],{"type":67,"value":301},{"type":61,"tag":108,"props":498,"children":499},{"style":283},[500],{"type":67,"value":501},"Choose where to increase next-month spend",{"type":61,"tag":108,"props":503,"children":504},{"style":127},[505],{"type":67,"value":291},{"type":61,"tag":108,"props":507,"children":508},{"style":127},[509],{"type":67,"value":480},{"type":61,"tag":108,"props":511,"children":513},{"class":110,"line":512},15,[514,518,522,526,531,535],{"type":61,"tag":108,"props":515,"children":516},{"style":137},[517],{"type":67,"value":176},{"type":61,"tag":108,"props":519,"children":520},{"style":127},[521],{"type":67,"value":145},{"type":61,"tag":108,"props":523,"children":524},{"style":127},[525],{"type":67,"value":301},{"type":61,"tag":108,"props":527,"children":528},{"style":283},[529],{"type":67,"value":530},"one row per channel and month",{"type":61,"tag":108,"props":532,"children":533},{"style":127},[534],{"type":67,"value":291},{"type":61,"tag":108,"props":536,"children":537},{"style":127},[538],{"type":67,"value":480},{"type":61,"tag":108,"props":540,"children":542},{"class":110,"line":541},16,[543,547,551,555,559,563,567,572,576,581,585,589,593,598,602,606,610,614,618,623,627],{"type":61,"tag":108,"props":544,"children":545},{"style":137},[546],{"type":67,"value":193},{"type":61,"tag":108,"props":548,"children":549},{"style":127},[550],{"type":67,"value":145},{"type":61,"tag":108,"props":552,"children":553},{"style":127},[554],{"type":67,"value":202},{"type":61,"tag":108,"props":556,"children":557},{"style":137},[558],{"type":67,"value":207},{"type":61,"tag":108,"props":560,"children":561},{"style":127},[562],{"type":67,"value":145},{"type":61,"tag":108,"props":564,"children":565},{"style":127},[566],{"type":67,"value":301},{"type":61,"tag":108,"props":568,"children":569},{"style":283},[570],{"type":67,"value":571},"conversionRate",{"type":61,"tag":108,"props":573,"children":574},{"style":127},[575],{"type":67,"value":291},{"type":61,"tag":108,"props":577,"children":578},{"style":127},[579],{"type":67,"value":580},",",{"type":61,"tag":108,"props":582,"children":583},{"style":137},[584],{"type":67,"value":226},{"type":61,"tag":108,"props":586,"children":587},{"style":127},[588],{"type":67,"value":145},{"type":61,"tag":108,"props":590,"children":591},{"style":127},[592],{"type":67,"value":301},{"type":61,"tag":108,"props":594,"children":595},{"style":283},[596],{"type":67,"value":597},"%",{"type":61,"tag":108,"props":599,"children":600},{"style":127},[601],{"type":67,"value":291},{"type":61,"tag":108,"props":603,"children":604},{"style":127},[605],{"type":67,"value":580},{"type":61,"tag":108,"props":607,"children":608},{"style":137},[609],{"type":67,"value":243},{"type":61,"tag":108,"props":611,"children":612},{"style":127},[613],{"type":67,"value":145},{"type":61,"tag":108,"props":615,"children":616},{"style":127},[617],{"type":67,"value":301},{"type":61,"tag":108,"props":619,"children":620},{"style":283},[621],{"type":67,"value":622},"sessions",{"type":61,"tag":108,"props":624,"children":625},{"style":127},[626],{"type":67,"value":291},{"type":61,"tag":108,"props":628,"children":629},{"style":127},[630],{"type":67,"value":631}," },\n",{"type":61,"tag":108,"props":633,"children":635},{"class":110,"line":634},17,[636,640,644,648,652,656],{"type":61,"tag":108,"props":637,"children":638},{"style":137},[639],{"type":67,"value":266},{"type":61,"tag":108,"props":641,"children":642},{"style":127},[643],{"type":67,"value":145},{"type":61,"tag":108,"props":645,"children":646},{"style":127},[647],{"type":67,"value":301},{"type":61,"tag":108,"props":649,"children":650},{"style":283},[651],{"type":67,"value":286},{"type":61,"tag":108,"props":653,"children":654},{"style":127},[655],{"type":67,"value":291},{"type":61,"tag":108,"props":657,"children":658},{"style":127},[659],{"type":67,"value":480},{"type":61,"tag":108,"props":661,"children":663},{"class":110,"line":662},18,[664,668,672,677,681,686,690,694,698,702,706,710,714,719,723,727,731,736,740,745],{"type":61,"tag":108,"props":665,"children":666},{"style":137},[667],{"type":67,"value":371},{"type":61,"tag":108,"props":669,"children":670},{"style":127},[671],{"type":67,"value":145},{"type":61,"tag":108,"props":673,"children":674},{"style":387},[675],{"type":67,"value":676}," [",{"type":61,"tag":108,"props":678,"children":679},{"style":127},[680],{"type":67,"value":291},{"type":61,"tag":108,"props":682,"children":683},{"style":283},[684],{"type":67,"value":685},"conversion rate",{"type":61,"tag":108,"props":687,"children":688},{"style":127},[689],{"type":67,"value":291},{"type":61,"tag":108,"props":691,"children":692},{"style":127},[693],{"type":67,"value":580},{"type":61,"tag":108,"props":695,"children":696},{"style":127},[697],{"type":67,"value":301},{"type":61,"tag":108,"props":699,"children":700},{"style":283},[701],{"type":67,"value":622},{"type":61,"tag":108,"props":703,"children":704},{"style":127},[705],{"type":67,"value":291},{"type":61,"tag":108,"props":707,"children":708},{"style":127},[709],{"type":67,"value":580},{"type":61,"tag":108,"props":711,"children":712},{"style":127},[713],{"type":67,"value":301},{"type":61,"tag":108,"props":715,"children":716},{"style":283},[717],{"type":67,"value":718},"month",{"type":61,"tag":108,"props":720,"children":721},{"style":127},[722],{"type":67,"value":291},{"type":61,"tag":108,"props":724,"children":725},{"style":127},[726],{"type":67,"value":580},{"type":61,"tag":108,"props":728,"children":729},{"style":127},[730],{"type":67,"value":301},{"type":61,"tag":108,"props":732,"children":733},{"style":283},[734],{"type":67,"value":735},"channel",{"type":61,"tag":108,"props":737,"children":738},{"style":127},[739],{"type":67,"value":291},{"type":61,"tag":108,"props":741,"children":742},{"style":387},[743],{"type":67,"value":744},"]",{"type":61,"tag":108,"props":746,"children":747},{"style":127},[748],{"type":67,"value":480},{"type":61,"tag":108,"props":750,"children":752},{"class":110,"line":751},19,[753],{"type":61,"tag":108,"props":754,"children":755},{"style":127},[756],{"type":67,"value":399},{"type":61,"tag":70,"props":758,"children":759},{},[760],{"type":67,"value":761},"If the question, observation, unit, denominator, or decision is unknown, inspect the data and surrounding product before choosing marks.",{"type":61,"tag":84,"props":763,"children":765},{"id":764},"core-patterns",[766],{"type":67,"value":767},"Core Patterns",{"type":61,"tag":769,"props":770,"children":772},"h3",{"id":771},"match-the-form-to-the-readers-comparison",[773],{"type":67,"value":774},"Match the form to the reader's comparison",{"type":61,"tag":776,"props":777,"children":778},"ul",{},[779,785,790,795,800,805],{"type":61,"tag":780,"props":781,"children":782},"li",{},[783],{"type":67,"value":784},"Change over ordered time → line; discrete periods → bars.",{"type":61,"tag":780,"props":786,"children":787},{},[788],{"type":67,"value":789},"Named-category magnitude → sorted horizontal bars or dots.",{"type":61,"tag":780,"props":791,"children":792},{},[793],{"type":67,"value":794},"Distribution → histogram, ECDF, box, violin, or faceted histograms.",{"type":61,"tag":780,"props":796,"children":797},{},[798],{"type":67,"value":799},"Relationship → scatterplot; add size only for a meaningful third quantity.",{"type":61,"tag":780,"props":801,"children":802},{},[803],{"type":67,"value":804},"Composition → stack for totals, normalized stack for proportions, mosaic for two categorical dimensions.",{"type":61,"tag":780,"props":806,"children":807},{},[808],{"type":67,"value":809},"Flow, hierarchy, network, or spatial questions → use their first-party layouts only when topology is the question.",{"type":61,"tag":70,"props":811,"children":812},{},[813,815,822],{"type":67,"value":814},"Read ",{"type":61,"tag":816,"props":817,"children":819},"a",{"href":818},"references\u002Fvisual-task-matrix.md",[820],{"type":67,"value":821},"the visual-task matrix",{"type":67,"value":823}," for the full routing table.",{"type":61,"tag":769,"props":825,"children":827},{"id":826},"separate-observed-target-and-projected-values",[828],{"type":67,"value":829},"Separate observed, target, and projected values",{"type":61,"tag":96,"props":831,"children":833},{"className":98,"code":832,"language":100,"meta":101,"style":101},"import { areaY, defineChart, lineY, ruleY } from '@tanstack\u002Fcharts'\nimport { scaleLinear } from '@tanstack\u002Fcharts\u002Fscales\u002Flinear'\nimport { scalePoint } from '@tanstack\u002Fcharts\u002Fscales\u002Fpoint'\n\nconst rows = [\n  { month: 'Jan', actual: 82, forecast: null, low: null, high: null },\n  { month: 'Feb', actual: 91, forecast: null, low: null, high: null },\n  { month: 'Mar', actual: null, forecast: 96, low: 88, high: 106 },\n  { month: 'Apr', actual: null, forecast: 103, low: 90, high: 119 },\n]\n\nexport const chart = defineChart({\n  marks: [\n    areaY(rows, { x: 'month', y1: 'low', y2: 'high', fillOpacity: 0.15 }),\n    lineY(rows, { x: 'month', y: 'actual', strokeWidth: 2.5 }),\n    lineY(rows, { x: 'month', y: 'forecast', strokeDasharray: '5 4' }),\n    ruleY([100], { strokeDasharray: '2 3' }),\n  ],\n  x: { scale: scalePoint },\n  y: { scale: scaleLinear, axis: { label: 'Indexed revenue' } },\n})\n",[834],{"type":61,"tag":104,"props":835,"children":836},{"__ignoreMap":101},[837,903,940,977,984,1007,1105,1194,1289,1384,1392,1399,1434,1450,1575,1671,1773,1836,1848,1883,1959],{"type":61,"tag":108,"props":838,"children":839},{"class":110,"line":111},[840,845,849,854,858,863,867,872,876,881,886,891,895,899],{"type":61,"tag":108,"props":841,"children":842},{"style":416},[843],{"type":67,"value":844},"import",{"type":61,"tag":108,"props":846,"children":847},{"style":127},[848],{"type":67,"value":202},{"type":61,"tag":108,"props":850,"children":851},{"style":387},[852],{"type":67,"value":853}," areaY",{"type":61,"tag":108,"props":855,"children":856},{"style":127},[857],{"type":67,"value":580},{"type":61,"tag":108,"props":859,"children":860},{"style":387},[861],{"type":67,"value":862}," defineChart",{"type":61,"tag":108,"props":864,"children":865},{"style":127},[866],{"type":67,"value":580},{"type":61,"tag":108,"props":868,"children":869},{"style":387},[870],{"type":67,"value":871}," lineY",{"type":61,"tag":108,"props":873,"children":874},{"style":127},[875],{"type":67,"value":580},{"type":61,"tag":108,"props":877,"children":878},{"style":387},[879],{"type":67,"value":880}," ruleY",{"type":61,"tag":108,"props":882,"children":883},{"style":127},[884],{"type":67,"value":885}," }",{"type":61,"tag":108,"props":887,"children":888},{"style":416},[889],{"type":67,"value":890}," from",{"type":61,"tag":108,"props":892,"children":893},{"style":127},[894],{"type":67,"value":301},{"type":61,"tag":108,"props":896,"children":897},{"style":283},[898],{"type":67,"value":51},{"type":61,"tag":108,"props":900,"children":901},{"style":127},[902],{"type":67,"value":362},{"type":61,"tag":108,"props":904,"children":905},{"class":110,"line":133},[906,910,914,919,923,927,931,936],{"type":61,"tag":108,"props":907,"children":908},{"style":416},[909],{"type":67,"value":844},{"type":61,"tag":108,"props":911,"children":912},{"style":127},[913],{"type":67,"value":202},{"type":61,"tag":108,"props":915,"children":916},{"style":387},[917],{"type":67,"value":918}," scaleLinear",{"type":61,"tag":108,"props":920,"children":921},{"style":127},[922],{"type":67,"value":885},{"type":61,"tag":108,"props":924,"children":925},{"style":416},[926],{"type":67,"value":890},{"type":61,"tag":108,"props":928,"children":929},{"style":127},[930],{"type":67,"value":301},{"type":61,"tag":108,"props":932,"children":933},{"style":283},[934],{"type":67,"value":935},"@tanstack\u002Fcharts\u002Fscales\u002Flinear",{"type":61,"tag":108,"props":937,"children":938},{"style":127},[939],{"type":67,"value":362},{"type":61,"tag":108,"props":941,"children":942},{"class":110,"line":153},[943,947,951,956,960,964,968,973],{"type":61,"tag":108,"props":944,"children":945},{"style":416},[946],{"type":67,"value":844},{"type":61,"tag":108,"props":948,"children":949},{"style":127},[950],{"type":67,"value":202},{"type":61,"tag":108,"props":952,"children":953},{"style":387},[954],{"type":67,"value":955}," scalePoint",{"type":61,"tag":108,"props":957,"children":958},{"style":127},[959],{"type":67,"value":885},{"type":61,"tag":108,"props":961,"children":962},{"style":416},[963],{"type":67,"value":890},{"type":61,"tag":108,"props":965,"children":966},{"style":127},[967],{"type":67,"value":301},{"type":61,"tag":108,"props":969,"children":970},{"style":283},[971],{"type":67,"value":972},"@tanstack\u002Fcharts\u002Fscales\u002Fpoint",{"type":61,"tag":108,"props":974,"children":975},{"style":127},[976],{"type":67,"value":362},{"type":61,"tag":108,"props":978,"children":979},{"class":110,"line":170},[980],{"type":61,"tag":108,"props":981,"children":982},{"emptyLinePlaceholder":406},[983],{"type":67,"value":409},{"type":61,"tag":108,"props":985,"children":986},{"class":110,"line":187},[987,992,997,1002],{"type":61,"tag":108,"props":988,"children":989},{"style":115},[990],{"type":67,"value":991},"const",{"type":61,"tag":108,"props":993,"children":994},{"style":387},[995],{"type":67,"value":996}," rows ",{"type":61,"tag":108,"props":998,"children":999},{"style":127},[1000],{"type":67,"value":1001},"=",{"type":61,"tag":108,"props":1003,"children":1004},{"style":387},[1005],{"type":67,"value":1006}," [\n",{"type":61,"tag":108,"props":1008,"children":1009},{"class":110,"line":260},[1010,1015,1020,1024,1028,1033,1037,1041,1046,1050,1056,1060,1065,1069,1074,1079,1083,1087,1092,1096,1101],{"type":61,"tag":108,"props":1011,"children":1012},{"style":127},[1013],{"type":67,"value":1014},"  {",{"type":61,"tag":108,"props":1016,"children":1017},{"style":137},[1018],{"type":67,"value":1019}," month",{"type":61,"tag":108,"props":1021,"children":1022},{"style":127},[1023],{"type":67,"value":145},{"type":61,"tag":108,"props":1025,"children":1026},{"style":127},[1027],{"type":67,"value":301},{"type":61,"tag":108,"props":1029,"children":1030},{"style":283},[1031],{"type":67,"value":1032},"Jan",{"type":61,"tag":108,"props":1034,"children":1035},{"style":127},[1036],{"type":67,"value":291},{"type":61,"tag":108,"props":1038,"children":1039},{"style":127},[1040],{"type":67,"value":580},{"type":61,"tag":108,"props":1042,"children":1043},{"style":137},[1044],{"type":67,"value":1045}," actual",{"type":61,"tag":108,"props":1047,"children":1048},{"style":127},[1049],{"type":67,"value":145},{"type":61,"tag":108,"props":1051,"children":1053},{"style":1052},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[1054],{"type":67,"value":1055}," 82",{"type":61,"tag":108,"props":1057,"children":1058},{"style":127},[1059],{"type":67,"value":580},{"type":61,"tag":108,"props":1061,"children":1062},{"style":137},[1063],{"type":67,"value":1064}," forecast",{"type":61,"tag":108,"props":1066,"children":1067},{"style":127},[1068],{"type":67,"value":145},{"type":61,"tag":108,"props":1070,"children":1071},{"style":127},[1072],{"type":67,"value":1073}," null,",{"type":61,"tag":108,"props":1075,"children":1076},{"style":137},[1077],{"type":67,"value":1078}," low",{"type":61,"tag":108,"props":1080,"children":1081},{"style":127},[1082],{"type":67,"value":145},{"type":61,"tag":108,"props":1084,"children":1085},{"style":127},[1086],{"type":67,"value":1073},{"type":61,"tag":108,"props":1088,"children":1089},{"style":137},[1090],{"type":67,"value":1091}," high",{"type":61,"tag":108,"props":1093,"children":1094},{"style":127},[1095],{"type":67,"value":145},{"type":61,"tag":108,"props":1097,"children":1098},{"style":127},[1099],{"type":67,"value":1100}," null",{"type":61,"tag":108,"props":1102,"children":1103},{"style":127},[1104],{"type":67,"value":631},{"type":61,"tag":108,"props":1106,"children":1107},{"class":110,"line":274},[1108,1112,1116,1120,1124,1129,1133,1137,1141,1145,1150,1154,1158,1162,1166,1170,1174,1178,1182,1186,1190],{"type":61,"tag":108,"props":1109,"children":1110},{"style":127},[1111],{"type":67,"value":1014},{"type":61,"tag":108,"props":1113,"children":1114},{"style":137},[1115],{"type":67,"value":1019},{"type":61,"tag":108,"props":1117,"children":1118},{"style":127},[1119],{"type":67,"value":145},{"type":61,"tag":108,"props":1121,"children":1122},{"style":127},[1123],{"type":67,"value":301},{"type":61,"tag":108,"props":1125,"children":1126},{"style":283},[1127],{"type":67,"value":1128},"Feb",{"type":61,"tag":108,"props":1130,"children":1131},{"style":127},[1132],{"type":67,"value":291},{"type":61,"tag":108,"props":1134,"children":1135},{"style":127},[1136],{"type":67,"value":580},{"type":61,"tag":108,"props":1138,"children":1139},{"style":137},[1140],{"type":67,"value":1045},{"type":61,"tag":108,"props":1142,"children":1143},{"style":127},[1144],{"type":67,"value":145},{"type":61,"tag":108,"props":1146,"children":1147},{"style":1052},[1148],{"type":67,"value":1149}," 91",{"type":61,"tag":108,"props":1151,"children":1152},{"style":127},[1153],{"type":67,"value":580},{"type":61,"tag":108,"props":1155,"children":1156},{"style":137},[1157],{"type":67,"value":1064},{"type":61,"tag":108,"props":1159,"children":1160},{"style":127},[1161],{"type":67,"value":145},{"type":61,"tag":108,"props":1163,"children":1164},{"style":127},[1165],{"type":67,"value":1073},{"type":61,"tag":108,"props":1167,"children":1168},{"style":137},[1169],{"type":67,"value":1078},{"type":61,"tag":108,"props":1171,"children":1172},{"style":127},[1173],{"type":67,"value":145},{"type":61,"tag":108,"props":1175,"children":1176},{"style":127},[1177],{"type":67,"value":1073},{"type":61,"tag":108,"props":1179,"children":1180},{"style":137},[1181],{"type":67,"value":1091},{"type":61,"tag":108,"props":1183,"children":1184},{"style":127},[1185],{"type":67,"value":145},{"type":61,"tag":108,"props":1187,"children":1188},{"style":127},[1189],{"type":67,"value":1100},{"type":61,"tag":108,"props":1191,"children":1192},{"style":127},[1193],{"type":67,"value":631},{"type":61,"tag":108,"props":1195,"children":1196},{"class":110,"line":365},[1197,1201,1205,1209,1213,1218,1222,1226,1230,1234,1238,1242,1246,1251,1255,1259,1263,1268,1272,1276,1280,1285],{"type":61,"tag":108,"props":1198,"children":1199},{"style":127},[1200],{"type":67,"value":1014},{"type":61,"tag":108,"props":1202,"children":1203},{"style":137},[1204],{"type":67,"value":1019},{"type":61,"tag":108,"props":1206,"children":1207},{"style":127},[1208],{"type":67,"value":145},{"type":61,"tag":108,"props":1210,"children":1211},{"style":127},[1212],{"type":67,"value":301},{"type":61,"tag":108,"props":1214,"children":1215},{"style":283},[1216],{"type":67,"value":1217},"Mar",{"type":61,"tag":108,"props":1219,"children":1220},{"style":127},[1221],{"type":67,"value":291},{"type":61,"tag":108,"props":1223,"children":1224},{"style":127},[1225],{"type":67,"value":580},{"type":61,"tag":108,"props":1227,"children":1228},{"style":137},[1229],{"type":67,"value":1045},{"type":61,"tag":108,"props":1231,"children":1232},{"style":127},[1233],{"type":67,"value":145},{"type":61,"tag":108,"props":1235,"children":1236},{"style":127},[1237],{"type":67,"value":1073},{"type":61,"tag":108,"props":1239,"children":1240},{"style":137},[1241],{"type":67,"value":1064},{"type":61,"tag":108,"props":1243,"children":1244},{"style":127},[1245],{"type":67,"value":145},{"type":61,"tag":108,"props":1247,"children":1248},{"style":1052},[1249],{"type":67,"value":1250}," 96",{"type":61,"tag":108,"props":1252,"children":1253},{"style":127},[1254],{"type":67,"value":580},{"type":61,"tag":108,"props":1256,"children":1257},{"style":137},[1258],{"type":67,"value":1078},{"type":61,"tag":108,"props":1260,"children":1261},{"style":127},[1262],{"type":67,"value":145},{"type":61,"tag":108,"props":1264,"children":1265},{"style":1052},[1266],{"type":67,"value":1267}," 88",{"type":61,"tag":108,"props":1269,"children":1270},{"style":127},[1271],{"type":67,"value":580},{"type":61,"tag":108,"props":1273,"children":1274},{"style":137},[1275],{"type":67,"value":1091},{"type":61,"tag":108,"props":1277,"children":1278},{"style":127},[1279],{"type":67,"value":145},{"type":61,"tag":108,"props":1281,"children":1282},{"style":1052},[1283],{"type":67,"value":1284}," 106",{"type":61,"tag":108,"props":1286,"children":1287},{"style":127},[1288],{"type":67,"value":631},{"type":61,"tag":108,"props":1290,"children":1291},{"class":110,"line":393},[1292,1296,1300,1304,1308,1313,1317,1321,1325,1329,1333,1337,1341,1346,1350,1354,1358,1363,1367,1371,1375,1380],{"type":61,"tag":108,"props":1293,"children":1294},{"style":127},[1295],{"type":67,"value":1014},{"type":61,"tag":108,"props":1297,"children":1298},{"style":137},[1299],{"type":67,"value":1019},{"type":61,"tag":108,"props":1301,"children":1302},{"style":127},[1303],{"type":67,"value":145},{"type":61,"tag":108,"props":1305,"children":1306},{"style":127},[1307],{"type":67,"value":301},{"type":61,"tag":108,"props":1309,"children":1310},{"style":283},[1311],{"type":67,"value":1312},"Apr",{"type":61,"tag":108,"props":1314,"children":1315},{"style":127},[1316],{"type":67,"value":291},{"type":61,"tag":108,"props":1318,"children":1319},{"style":127},[1320],{"type":67,"value":580},{"type":61,"tag":108,"props":1322,"children":1323},{"style":137},[1324],{"type":67,"value":1045},{"type":61,"tag":108,"props":1326,"children":1327},{"style":127},[1328],{"type":67,"value":145},{"type":61,"tag":108,"props":1330,"children":1331},{"style":127},[1332],{"type":67,"value":1073},{"type":61,"tag":108,"props":1334,"children":1335},{"style":137},[1336],{"type":67,"value":1064},{"type":61,"tag":108,"props":1338,"children":1339},{"style":127},[1340],{"type":67,"value":145},{"type":61,"tag":108,"props":1342,"children":1343},{"style":1052},[1344],{"type":67,"value":1345}," 103",{"type":61,"tag":108,"props":1347,"children":1348},{"style":127},[1349],{"type":67,"value":580},{"type":61,"tag":108,"props":1351,"children":1352},{"style":137},[1353],{"type":67,"value":1078},{"type":61,"tag":108,"props":1355,"children":1356},{"style":127},[1357],{"type":67,"value":145},{"type":61,"tag":108,"props":1359,"children":1360},{"style":1052},[1361],{"type":67,"value":1362}," 90",{"type":61,"tag":108,"props":1364,"children":1365},{"style":127},[1366],{"type":67,"value":580},{"type":61,"tag":108,"props":1368,"children":1369},{"style":137},[1370],{"type":67,"value":1091},{"type":61,"tag":108,"props":1372,"children":1373},{"style":127},[1374],{"type":67,"value":145},{"type":61,"tag":108,"props":1376,"children":1377},{"style":1052},[1378],{"type":67,"value":1379}," 119",{"type":61,"tag":108,"props":1381,"children":1382},{"style":127},[1383],{"type":67,"value":631},{"type":61,"tag":108,"props":1385,"children":1386},{"class":110,"line":402},[1387],{"type":61,"tag":108,"props":1388,"children":1389},{"style":387},[1390],{"type":67,"value":1391},"]\n",{"type":61,"tag":108,"props":1393,"children":1394},{"class":110,"line":412},[1395],{"type":61,"tag":108,"props":1396,"children":1397},{"emptyLinePlaceholder":406},[1398],{"type":67,"value":409},{"type":61,"tag":108,"props":1400,"children":1401},{"class":110,"line":449},[1402,1406,1410,1415,1419,1424,1429],{"type":61,"tag":108,"props":1403,"children":1404},{"style":416},[1405],{"type":67,"value":419},{"type":61,"tag":108,"props":1407,"children":1408},{"style":115},[1409],{"type":67,"value":424},{"type":61,"tag":108,"props":1411,"children":1412},{"style":387},[1413],{"type":67,"value":1414}," chart ",{"type":61,"tag":108,"props":1416,"children":1417},{"style":127},[1418],{"type":67,"value":1001},{"type":61,"tag":108,"props":1420,"children":1422},{"style":1421},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[1423],{"type":67,"value":862},{"type":61,"tag":108,"props":1425,"children":1426},{"style":387},[1427],{"type":67,"value":1428},"(",{"type":61,"tag":108,"props":1430,"children":1431},{"style":127},[1432],{"type":67,"value":1433},"{\n",{"type":61,"tag":108,"props":1435,"children":1436},{"class":110,"line":461},[1437,1442,1446],{"type":61,"tag":108,"props":1438,"children":1439},{"style":137},[1440],{"type":67,"value":1441},"  marks",{"type":61,"tag":108,"props":1443,"children":1444},{"style":127},[1445],{"type":67,"value":145},{"type":61,"tag":108,"props":1447,"children":1448},{"style":387},[1449],{"type":67,"value":1006},{"type":61,"tag":108,"props":1451,"children":1452},{"class":110,"line":483},[1453,1458,1463,1467,1471,1476,1480,1484,1488,1492,1496,1501,1505,1509,1514,1518,1522,1527,1531,1535,1540,1544,1548,1553,1557,1562,1566,1571],{"type":61,"tag":108,"props":1454,"children":1455},{"style":1421},[1456],{"type":67,"value":1457},"    areaY",{"type":61,"tag":108,"props":1459,"children":1460},{"style":387},[1461],{"type":67,"value":1462},"(rows",{"type":61,"tag":108,"props":1464,"children":1465},{"style":127},[1466],{"type":67,"value":580},{"type":61,"tag":108,"props":1468,"children":1469},{"style":127},[1470],{"type":67,"value":202},{"type":61,"tag":108,"props":1472,"children":1473},{"style":137},[1474],{"type":67,"value":1475}," x",{"type":61,"tag":108,"props":1477,"children":1478},{"style":127},[1479],{"type":67,"value":145},{"type":61,"tag":108,"props":1481,"children":1482},{"style":127},[1483],{"type":67,"value":301},{"type":61,"tag":108,"props":1485,"children":1486},{"style":283},[1487],{"type":67,"value":718},{"type":61,"tag":108,"props":1489,"children":1490},{"style":127},[1491],{"type":67,"value":291},{"type":61,"tag":108,"props":1493,"children":1494},{"style":127},[1495],{"type":67,"value":580},{"type":61,"tag":108,"props":1497,"children":1498},{"style":137},[1499],{"type":67,"value":1500}," y1",{"type":61,"tag":108,"props":1502,"children":1503},{"style":127},[1504],{"type":67,"value":145},{"type":61,"tag":108,"props":1506,"children":1507},{"style":127},[1508],{"type":67,"value":301},{"type":61,"tag":108,"props":1510,"children":1511},{"style":283},[1512],{"type":67,"value":1513},"low",{"type":61,"tag":108,"props":1515,"children":1516},{"style":127},[1517],{"type":67,"value":291},{"type":61,"tag":108,"props":1519,"children":1520},{"style":127},[1521],{"type":67,"value":580},{"type":61,"tag":108,"props":1523,"children":1524},{"style":137},[1525],{"type":67,"value":1526}," y2",{"type":61,"tag":108,"props":1528,"children":1529},{"style":127},[1530],{"type":67,"value":145},{"type":61,"tag":108,"props":1532,"children":1533},{"style":127},[1534],{"type":67,"value":301},{"type":61,"tag":108,"props":1536,"children":1537},{"style":283},[1538],{"type":67,"value":1539},"high",{"type":61,"tag":108,"props":1541,"children":1542},{"style":127},[1543],{"type":67,"value":291},{"type":61,"tag":108,"props":1545,"children":1546},{"style":127},[1547],{"type":67,"value":580},{"type":61,"tag":108,"props":1549,"children":1550},{"style":137},[1551],{"type":67,"value":1552}," fillOpacity",{"type":61,"tag":108,"props":1554,"children":1555},{"style":127},[1556],{"type":67,"value":145},{"type":61,"tag":108,"props":1558,"children":1559},{"style":1052},[1560],{"type":67,"value":1561}," 0.15",{"type":61,"tag":108,"props":1563,"children":1564},{"style":127},[1565],{"type":67,"value":885},{"type":61,"tag":108,"props":1567,"children":1568},{"style":387},[1569],{"type":67,"value":1570},")",{"type":61,"tag":108,"props":1572,"children":1573},{"style":127},[1574],{"type":67,"value":480},{"type":61,"tag":108,"props":1576,"children":1577},{"class":110,"line":512},[1578,1583,1587,1591,1595,1599,1603,1607,1611,1615,1619,1624,1628,1632,1637,1641,1645,1650,1654,1659,1663,1667],{"type":61,"tag":108,"props":1579,"children":1580},{"style":1421},[1581],{"type":67,"value":1582},"    lineY",{"type":61,"tag":108,"props":1584,"children":1585},{"style":387},[1586],{"type":67,"value":1462},{"type":61,"tag":108,"props":1588,"children":1589},{"style":127},[1590],{"type":67,"value":580},{"type":61,"tag":108,"props":1592,"children":1593},{"style":127},[1594],{"type":67,"value":202},{"type":61,"tag":108,"props":1596,"children":1597},{"style":137},[1598],{"type":67,"value":1475},{"type":61,"tag":108,"props":1600,"children":1601},{"style":127},[1602],{"type":67,"value":145},{"type":61,"tag":108,"props":1604,"children":1605},{"style":127},[1606],{"type":67,"value":301},{"type":61,"tag":108,"props":1608,"children":1609},{"style":283},[1610],{"type":67,"value":718},{"type":61,"tag":108,"props":1612,"children":1613},{"style":127},[1614],{"type":67,"value":291},{"type":61,"tag":108,"props":1616,"children":1617},{"style":127},[1618],{"type":67,"value":580},{"type":61,"tag":108,"props":1620,"children":1621},{"style":137},[1622],{"type":67,"value":1623}," y",{"type":61,"tag":108,"props":1625,"children":1626},{"style":127},[1627],{"type":67,"value":145},{"type":61,"tag":108,"props":1629,"children":1630},{"style":127},[1631],{"type":67,"value":301},{"type":61,"tag":108,"props":1633,"children":1634},{"style":283},[1635],{"type":67,"value":1636},"actual",{"type":61,"tag":108,"props":1638,"children":1639},{"style":127},[1640],{"type":67,"value":291},{"type":61,"tag":108,"props":1642,"children":1643},{"style":127},[1644],{"type":67,"value":580},{"type":61,"tag":108,"props":1646,"children":1647},{"style":137},[1648],{"type":67,"value":1649}," strokeWidth",{"type":61,"tag":108,"props":1651,"children":1652},{"style":127},[1653],{"type":67,"value":145},{"type":61,"tag":108,"props":1655,"children":1656},{"style":1052},[1657],{"type":67,"value":1658}," 2.5",{"type":61,"tag":108,"props":1660,"children":1661},{"style":127},[1662],{"type":67,"value":885},{"type":61,"tag":108,"props":1664,"children":1665},{"style":387},[1666],{"type":67,"value":1570},{"type":61,"tag":108,"props":1668,"children":1669},{"style":127},[1670],{"type":67,"value":480},{"type":61,"tag":108,"props":1672,"children":1673},{"class":110,"line":541},[1674,1678,1682,1686,1690,1694,1698,1702,1706,1710,1714,1718,1722,1726,1731,1735,1739,1744,1748,1752,1757,1761,1765,1769],{"type":61,"tag":108,"props":1675,"children":1676},{"style":1421},[1677],{"type":67,"value":1582},{"type":61,"tag":108,"props":1679,"children":1680},{"style":387},[1681],{"type":67,"value":1462},{"type":61,"tag":108,"props":1683,"children":1684},{"style":127},[1685],{"type":67,"value":580},{"type":61,"tag":108,"props":1687,"children":1688},{"style":127},[1689],{"type":67,"value":202},{"type":61,"tag":108,"props":1691,"children":1692},{"style":137},[1693],{"type":67,"value":1475},{"type":61,"tag":108,"props":1695,"children":1696},{"style":127},[1697],{"type":67,"value":145},{"type":61,"tag":108,"props":1699,"children":1700},{"style":127},[1701],{"type":67,"value":301},{"type":61,"tag":108,"props":1703,"children":1704},{"style":283},[1705],{"type":67,"value":718},{"type":61,"tag":108,"props":1707,"children":1708},{"style":127},[1709],{"type":67,"value":291},{"type":61,"tag":108,"props":1711,"children":1712},{"style":127},[1713],{"type":67,"value":580},{"type":61,"tag":108,"props":1715,"children":1716},{"style":137},[1717],{"type":67,"value":1623},{"type":61,"tag":108,"props":1719,"children":1720},{"style":127},[1721],{"type":67,"value":145},{"type":61,"tag":108,"props":1723,"children":1724},{"style":127},[1725],{"type":67,"value":301},{"type":61,"tag":108,"props":1727,"children":1728},{"style":283},[1729],{"type":67,"value":1730},"forecast",{"type":61,"tag":108,"props":1732,"children":1733},{"style":127},[1734],{"type":67,"value":291},{"type":61,"tag":108,"props":1736,"children":1737},{"style":127},[1738],{"type":67,"value":580},{"type":61,"tag":108,"props":1740,"children":1741},{"style":137},[1742],{"type":67,"value":1743}," strokeDasharray",{"type":61,"tag":108,"props":1745,"children":1746},{"style":127},[1747],{"type":67,"value":145},{"type":61,"tag":108,"props":1749,"children":1750},{"style":127},[1751],{"type":67,"value":301},{"type":61,"tag":108,"props":1753,"children":1754},{"style":283},[1755],{"type":67,"value":1756},"5 4",{"type":61,"tag":108,"props":1758,"children":1759},{"style":127},[1760],{"type":67,"value":291},{"type":61,"tag":108,"props":1762,"children":1763},{"style":127},[1764],{"type":67,"value":885},{"type":61,"tag":108,"props":1766,"children":1767},{"style":387},[1768],{"type":67,"value":1570},{"type":61,"tag":108,"props":1770,"children":1771},{"style":127},[1772],{"type":67,"value":480},{"type":61,"tag":108,"props":1774,"children":1775},{"class":110,"line":634},[1776,1781,1786,1791,1795,1799,1803,1807,1811,1815,1820,1824,1828,1832],{"type":61,"tag":108,"props":1777,"children":1778},{"style":1421},[1779],{"type":67,"value":1780},"    ruleY",{"type":61,"tag":108,"props":1782,"children":1783},{"style":387},[1784],{"type":67,"value":1785},"([",{"type":61,"tag":108,"props":1787,"children":1788},{"style":1052},[1789],{"type":67,"value":1790},"100",{"type":61,"tag":108,"props":1792,"children":1793},{"style":387},[1794],{"type":67,"value":744},{"type":61,"tag":108,"props":1796,"children":1797},{"style":127},[1798],{"type":67,"value":580},{"type":61,"tag":108,"props":1800,"children":1801},{"style":127},[1802],{"type":67,"value":202},{"type":61,"tag":108,"props":1804,"children":1805},{"style":137},[1806],{"type":67,"value":1743},{"type":61,"tag":108,"props":1808,"children":1809},{"style":127},[1810],{"type":67,"value":145},{"type":61,"tag":108,"props":1812,"children":1813},{"style":127},[1814],{"type":67,"value":301},{"type":61,"tag":108,"props":1816,"children":1817},{"style":283},[1818],{"type":67,"value":1819},"2 3",{"type":61,"tag":108,"props":1821,"children":1822},{"style":127},[1823],{"type":67,"value":291},{"type":61,"tag":108,"props":1825,"children":1826},{"style":127},[1827],{"type":67,"value":885},{"type":61,"tag":108,"props":1829,"children":1830},{"style":387},[1831],{"type":67,"value":1570},{"type":61,"tag":108,"props":1833,"children":1834},{"style":127},[1835],{"type":67,"value":480},{"type":61,"tag":108,"props":1837,"children":1838},{"class":110,"line":662},[1839,1844],{"type":61,"tag":108,"props":1840,"children":1841},{"style":387},[1842],{"type":67,"value":1843},"  ]",{"type":61,"tag":108,"props":1845,"children":1846},{"style":127},[1847],{"type":67,"value":480},{"type":61,"tag":108,"props":1849,"children":1850},{"class":110,"line":751},[1851,1856,1860,1864,1869,1873,1878],{"type":61,"tag":108,"props":1852,"children":1853},{"style":137},[1854],{"type":67,"value":1855},"  x",{"type":61,"tag":108,"props":1857,"children":1858},{"style":127},[1859],{"type":67,"value":145},{"type":61,"tag":108,"props":1861,"children":1862},{"style":127},[1863],{"type":67,"value":202},{"type":61,"tag":108,"props":1865,"children":1866},{"style":137},[1867],{"type":67,"value":1868}," scale",{"type":61,"tag":108,"props":1870,"children":1871},{"style":127},[1872],{"type":67,"value":145},{"type":61,"tag":108,"props":1874,"children":1875},{"style":387},[1876],{"type":67,"value":1877}," scalePoint ",{"type":61,"tag":108,"props":1879,"children":1880},{"style":127},[1881],{"type":67,"value":1882},"},\n",{"type":61,"tag":108,"props":1884,"children":1886},{"class":110,"line":1885},20,[1887,1892,1896,1900,1904,1908,1912,1916,1921,1925,1929,1934,1938,1942,1947,1951,1955],{"type":61,"tag":108,"props":1888,"children":1889},{"style":137},[1890],{"type":67,"value":1891},"  y",{"type":61,"tag":108,"props":1893,"children":1894},{"style":127},[1895],{"type":67,"value":145},{"type":61,"tag":108,"props":1897,"children":1898},{"style":127},[1899],{"type":67,"value":202},{"type":61,"tag":108,"props":1901,"children":1902},{"style":137},[1903],{"type":67,"value":1868},{"type":61,"tag":108,"props":1905,"children":1906},{"style":127},[1907],{"type":67,"value":145},{"type":61,"tag":108,"props":1909,"children":1910},{"style":387},[1911],{"type":67,"value":918},{"type":61,"tag":108,"props":1913,"children":1914},{"style":127},[1915],{"type":67,"value":580},{"type":61,"tag":108,"props":1917,"children":1918},{"style":137},[1919],{"type":67,"value":1920}," axis",{"type":61,"tag":108,"props":1922,"children":1923},{"style":127},[1924],{"type":67,"value":145},{"type":61,"tag":108,"props":1926,"children":1927},{"style":127},[1928],{"type":67,"value":202},{"type":61,"tag":108,"props":1930,"children":1931},{"style":137},[1932],{"type":67,"value":1933}," label",{"type":61,"tag":108,"props":1935,"children":1936},{"style":127},[1937],{"type":67,"value":145},{"type":61,"tag":108,"props":1939,"children":1940},{"style":127},[1941],{"type":67,"value":301},{"type":61,"tag":108,"props":1943,"children":1944},{"style":283},[1945],{"type":67,"value":1946},"Indexed revenue",{"type":61,"tag":108,"props":1948,"children":1949},{"style":127},[1950],{"type":67,"value":291},{"type":61,"tag":108,"props":1952,"children":1953},{"style":127},[1954],{"type":67,"value":885},{"type":61,"tag":108,"props":1956,"children":1957},{"style":127},[1958],{"type":67,"value":631},{"type":61,"tag":108,"props":1960,"children":1962},{"class":110,"line":1961},21,[1963,1968],{"type":61,"tag":108,"props":1964,"children":1965},{"style":127},[1966],{"type":67,"value":1967},"}",{"type":61,"tag":108,"props":1969,"children":1970},{"style":387},[1971],{"type":67,"value":1972},")\n",{"type":61,"tag":70,"props":1974,"children":1975},{},[1976],{"type":67,"value":1977},"Use different channels for status and uncertainty. A continuous unqualified line implies equal epistemic status.",{"type":61,"tag":769,"props":1979,"children":1981},{"id":1980},"define-proof-before-polish",[1982],{"type":67,"value":1983},"Define proof before polish",{"type":61,"tag":70,"props":1985,"children":1986},{},[1987],{"type":67,"value":1988},"For every chart, verify:",{"type":61,"tag":776,"props":1990,"children":1991},{},[1992,1997,2002,2007,2012,2017],{"type":61,"tag":780,"props":1993,"children":1994},{},[1995],{"type":67,"value":1996},"the visual answers the stated question;",{"type":61,"tag":780,"props":1998,"children":1999},{},[2000],{"type":67,"value":2001},"axes, legend, title, or adjacent copy identify units and comparison;",{"type":61,"tag":780,"props":2003,"children":2004},{},[2005],{"type":67,"value":2006},"ordering, aggregation, missing-value policy, and baseline are deliberate;",{"type":61,"tag":780,"props":2008,"children":2009},{},[2010],{"type":67,"value":2011},"exact-value tasks have a table or textual equivalent;",{"type":61,"tag":780,"props":2013,"children":2014},{},[2015],{"type":67,"value":2016},"the smallest supported container preserves the important comparison;",{"type":61,"tag":780,"props":2018,"children":2019},{},[2020],{"type":67,"value":2021},"pointer, keyboard, updates, and empty states tell the same story.",{"type":61,"tag":84,"props":2023,"children":2025},{"id":2024},"common-mistakes",[2026],{"type":67,"value":2027},"Common Mistakes",{"type":61,"tag":769,"props":2029,"children":2031},{"id":2030},"critical-starting-with-the-requested-chart-type",[2032],{"type":67,"value":2033},"CRITICAL Starting with the requested chart type",{"type":61,"tag":70,"props":2035,"children":2036},{},[2037],{"type":67,"value":2038},"Wrong: implement “make this a pie chart” before identifying the comparison.",{"type":61,"tag":70,"props":2040,"children":2041},{},[2042],{"type":67,"value":2043},"Correct: restate the decision and recommend the form that makes that comparison perceptually direct. If the user retains a weaker form, state its analytical limitation and preserve the underlying semantics.",{"type":61,"tag":70,"props":2045,"children":2046},{},[2047],{"type":67,"value":2048},"A familiar chart can answer a different question than the user needs.",{"type":61,"tag":70,"props":2050,"children":2051},{},[2052,2054],{"type":67,"value":2053},"Source: ",{"type":61,"tag":104,"props":2055,"children":2057},{"className":2056},[],[2058],{"type":67,"value":2059},"docs\u002Fguides\u002Fchoosing-a-chart.md",{"type":61,"tag":769,"props":2061,"children":2063},{"id":2062},"high-showing-a-rate-without-its-denominator",[2064],{"type":67,"value":2065},"HIGH Showing a rate without its denominator",{"type":61,"tag":70,"props":2067,"children":2068},{},[2069],{"type":67,"value":2070},"Wrong: show conversion rate alone.",{"type":61,"tag":70,"props":2072,"children":2073},{},[2074],{"type":67,"value":2075},"Correct: keep sessions or eligible population in the prepared row and expose it beside the rate or in the tooltip.",{"type":61,"tag":70,"props":2077,"children":2078},{},[2079],{"type":67,"value":2080},"Normalized values can reverse interpretation when volume changes.",{"type":61,"tag":70,"props":2082,"children":2083},{},[2084,2085,2091,2093],{"type":67,"value":2053},{"type":61,"tag":104,"props":2086,"children":2088},{"className":2087},[],[2089],{"type":67,"value":2090},"API-FRICTION.md",{"type":67,"value":2092}," F-217; ",{"type":61,"tag":104,"props":2094,"children":2096},{"className":2095},[],[2097],{"type":67,"value":2098},"docs\u002Freference\u002Ftransforms.md",{"type":61,"tag":769,"props":2100,"children":2102},{"id":2101},"critical-rendering-projections-as-observed-history",[2103],{"type":67,"value":2104},"CRITICAL Rendering projections as observed history",{"type":61,"tag":70,"props":2106,"children":2107},{},[2108],{"type":67,"value":2109},"Wrong: connect actuals and forecasts with one undifferentiated line.",{"type":61,"tag":70,"props":2111,"children":2112},{},[2113],{"type":67,"value":2114},"Correct: encode the forecast boundary, projected segment, and uncertainty explicitly.",{"type":61,"tag":70,"props":2116,"children":2117},{},[2118],{"type":67,"value":2119},"Continuous treatment implies equal certainty.",{"type":61,"tag":70,"props":2121,"children":2122},{},[2123,2124,2130,2132],{"type":67,"value":2053},{"type":61,"tag":104,"props":2125,"children":2127},{"className":2126},[],[2128],{"type":67,"value":2129},"docs\u002Fexamples\u002Flines-and-areas.md",{"type":67,"value":2131},"; ",{"type":61,"tag":104,"props":2133,"children":2135},{"className":2134},[],[2136],{"type":67,"value":2137},"docs\u002Freference\u002Fmarks\u002Fdifference.md",{"type":61,"tag":769,"props":2139,"children":2141},{"id":2140},"high-choosing-area-or-angle-for-precise-ranking",[2142],{"type":67,"value":2143},"HIGH Choosing area or angle for precise ranking",{"type":61,"tag":70,"props":2145,"children":2146},{},[2147],{"type":67,"value":2148},"Wrong: rank close values with wedges, bubbles, or interior stack layers.",{"type":61,"tag":70,"props":2150,"children":2151},{},[2152],{"type":67,"value":2153},"Correct: use aligned position or length when exact ordering is the reader's task.",{"type":61,"tag":70,"props":2155,"children":2156},{},[2157],{"type":67,"value":2158},"Area and angle emphasize shape or part-to-whole relationships, not precise rank.",{"type":61,"tag":70,"props":2160,"children":2161},{},[2162,2163,2168,2169],{"type":67,"value":2053},{"type":61,"tag":104,"props":2164,"children":2166},{"className":2165},[],[2167],{"type":67,"value":2059},{"type":67,"value":2131},{"type":61,"tag":104,"props":2170,"children":2172},{"className":2171},[],[2173],{"type":67,"value":2174},"docs\u002Fexamples\u002Fbars-and-rankings.md",{"type":61,"tag":769,"props":2176,"children":2178},{"id":2177},"high-tension-analytical-honesty-versus-visual-simplicity",[2179],{"type":67,"value":2180},"HIGH Tension: analytical honesty versus visual simplicity",{"type":61,"tag":70,"props":2182,"children":2183},{},[2184],{"type":67,"value":2185},"Simplifying aggregation can hide denominators, lineage, uncertainty, or missing-value policy. Preserve the evidence needed to interpret the result before reducing visual detail.",{"type":61,"tag":70,"props":2187,"children":2188},{},[2189,2191,2197],{"type":67,"value":2190},"See also: ",{"type":61,"tag":104,"props":2192,"children":2194},{"className":2193},[],[2195],{"type":67,"value":2196},"prepare-chart-data\u002FSKILL.md",{"type":67,"value":2198}," § Common Mistakes",{"type":61,"tag":84,"props":2200,"children":2202},{"id":2201},"references",[2203],{"type":67,"value":2204},"References",{"type":61,"tag":776,"props":2206,"children":2207},{},[2208],{"type":61,"tag":780,"props":2209,"children":2210},{},[2211],{"type":61,"tag":816,"props":2212,"children":2213},{"href":818},[2214],{"type":67,"value":2215},"Analytical task and visual-form matrix",{"type":61,"tag":70,"props":2217,"children":2218},{},[2219,2220,2225,2227,2233],{"type":67,"value":2190},{"type":61,"tag":104,"props":2221,"children":2223},{"className":2222},[],[2224],{"type":67,"value":2196},{"type":67,"value":2226}," and ",{"type":61,"tag":104,"props":2228,"children":2230},{"className":2229},[],[2231],{"type":67,"value":2232},"compose-marks-and-views\u002FSKILL.md",{"type":67,"value":2234}," — the analytical task determines both the transform and mark composition.",{"type":61,"tag":2236,"props":2237,"children":2238},"style",{},[2239],{"type":67,"value":2240},"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":2242,"total":449},[2243,2256,2269,2280,2296,2309,2316],{"slug":2244,"name":2244,"fn":2245,"description":2246,"org":2247,"tags":2248,"stars":23,"repoUrl":24,"updatedAt":2255},"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},[2249,2250,2251,2254],{"name":17,"slug":18,"type":15},{"name":21,"slug":22,"type":15},{"name":2252,"slug":2253,"type":15},"Interaction","interaction",{"name":9,"slug":8,"type":15},"2026-08-15T03:47:32.82085",{"slug":2257,"name":2257,"fn":2258,"description":2259,"org":2260,"tags":2261,"stars":23,"repoUrl":24,"updatedAt":2268},"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},[2262,2263,2264,2265],{"name":17,"slug":18,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":2266,"slug":2267,"type":15},"UI Components","ui-components","2026-08-15T03:47:30.035164",{"slug":2270,"name":2270,"fn":2271,"description":2272,"org":2273,"tags":2274,"stars":23,"repoUrl":24,"updatedAt":2279},"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},[2275,2276,2277,2278],{"name":17,"slug":18,"type":15},{"name":13,"slug":14,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-08-15T03:47:40.802271",{"slug":2281,"name":2281,"fn":2282,"description":2283,"org":2284,"tags":2285,"stars":23,"repoUrl":24,"updatedAt":2295},"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},[2286,2287,2290,2293,2294],{"name":17,"slug":18,"type":15},{"name":2288,"slug":2289,"type":15},"Data Analysis","data-analysis",{"name":2291,"slug":2292,"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":2297,"name":2297,"fn":2298,"description":2299,"org":2300,"tags":2301,"stars":23,"repoUrl":24,"updatedAt":2308},"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},[2302,2303,2306,2307],{"name":17,"slug":18,"type":15},{"name":2304,"slug":2305,"type":15},"Debugging","debugging",{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-08-15T03:47:33.503153",{"slug":4,"name":4,"fn":5,"description":6,"org":2310,"tags":2311,"stars":23,"repoUrl":24,"updatedAt":25},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[2312,2313,2314,2315],{"name":17,"slug":18,"type":15},{"name":13,"slug":14,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"slug":2317,"name":2317,"fn":2318,"description":2319,"org":2320,"tags":2321,"stars":23,"repoUrl":24,"updatedAt":2328},"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},[2322,2323,2324,2325,2327],{"name":17,"slug":18,"type":15},{"name":13,"slug":14,"type":15},{"name":21,"slug":22,"type":15},{"name":2326,"slug":38,"type":15},"SSR",{"name":9,"slug":8,"type":15},"2026-08-15T03:47:36.306971",{"items":2330,"total":2463},[2331,2343,2353,2363,2374,2389,2399,2409,2419,2432,2442,2453],{"slug":2332,"name":2332,"fn":2333,"description":2334,"org":2335,"tags":2336,"stars":2340,"repoUrl":2341,"updatedAt":2342},"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},[2337,2338,2339],{"name":2288,"slug":2289,"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":2344,"name":2344,"fn":2345,"description":2346,"org":2347,"tags":2348,"stars":2340,"repoUrl":2341,"updatedAt":2352},"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},[2349,2350,2351],{"name":2304,"slug":2305,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-08-11T04:05:45.454347",{"slug":2354,"name":2354,"fn":2355,"description":2356,"org":2357,"tags":2358,"stars":2340,"repoUrl":2341,"updatedAt":2362},"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},[2359,2360,2361],{"name":2288,"slug":2289,"type":15},{"name":9,"slug":8,"type":15},{"name":2266,"slug":2267,"type":15},"2026-08-11T04:05:18.454719",{"slug":2364,"name":2364,"fn":2365,"description":2366,"org":2367,"tags":2368,"stars":2340,"repoUrl":2341,"updatedAt":2373},"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},[2369,2370,2371,2372],{"name":13,"slug":14,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":2266,"slug":2267,"type":15},"2026-08-11T04:05:16.471567",{"slug":2375,"name":2375,"fn":2376,"description":2377,"org":2378,"tags":2379,"stars":2340,"repoUrl":2341,"updatedAt":2388},"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},[2380,2383,2384,2387],{"name":2381,"slug":2382,"type":15},"Data Pipeline","data-pipeline",{"name":21,"slug":22,"type":15},{"name":2385,"slug":2386,"type":15},"Performance","performance",{"name":9,"slug":8,"type":15},"2026-08-11T04:05:25.45112",{"slug":2390,"name":2390,"fn":2391,"description":2392,"org":2393,"tags":2394,"stars":2340,"repoUrl":2341,"updatedAt":2398},"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},[2395,2396,2397],{"name":13,"slug":14,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-08-11T04:05:21.505333",{"slug":2400,"name":2400,"fn":2401,"description":2402,"org":2403,"tags":2404,"stars":2340,"repoUrl":2341,"updatedAt":2408},"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},[2405,2406,2407],{"name":2288,"slug":2289,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},"2026-08-11T04:05:33.684468",{"slug":2410,"name":2410,"fn":2411,"description":2412,"org":2413,"tags":2414,"stars":2340,"repoUrl":2341,"updatedAt":2418},"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},[2415,2416,2417],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":2266,"slug":2267,"type":15},"2026-08-11T04:05:43.445905",{"slug":2420,"name":2420,"fn":2421,"description":2422,"org":2423,"tags":2424,"stars":2340,"repoUrl":2341,"updatedAt":2431},"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},[2425,2428,2429,2430],{"name":2426,"slug":2427,"type":15},"CSS","css",{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":2266,"slug":2267,"type":15},"2026-08-11T04:05:35.453858",{"slug":2433,"name":2433,"fn":2434,"description":2435,"org":2436,"tags":2437,"stars":2340,"repoUrl":2341,"updatedAt":2441},"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},[2438,2439,2440],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":2266,"slug":2267,"type":15},"2026-08-11T04:05:31.46447",{"slug":2443,"name":2443,"fn":2444,"description":2445,"org":2446,"tags":2447,"stars":2340,"repoUrl":2341,"updatedAt":2452},"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},[2448,2449,2450,2451],{"name":2426,"slug":2427,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":2266,"slug":2267,"type":15},"2026-08-11T04:05:28.559861",{"slug":2454,"name":2454,"fn":2455,"description":2456,"org":2457,"tags":2458,"stars":2340,"repoUrl":2341,"updatedAt":2462},"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},[2459,2460,2461],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":2266,"slug":2267,"type":15},"2026-08-11T04:05:27.479925",139]