[{"data":1,"prerenderedAt":1891},["ShallowReactive",2],{"design-doc:chart-foundations":3},{"data":4,"body":7,"toc":1873},{"title":5,"description":6},"Chart foundations","",{"type":8,"children":9},"root",[10,18,66,94,98,119,137,350,358,430,435,441,454,509,695,737,744,824,830,862,886,892,897,1013,1018,1024,1043,1061,1073,1079,1084,1099,1139,1152,1176,1194,1200,1205,1230,1258,1264,1269,1401,1418,1424,1434,1502,1515,1526,1538,1566,1571,1574,1580,1788,1793,1796,1802,1815,1820,1867],{"type":11,"tag":12,"props":13,"children":15},"element","h1",{"id":14},"chart-foundations",[16],{"type":17,"value":5},"text",{"type":11,"tag":19,"props":20,"children":21},"blockquote",{},[22],{"type":11,"tag":23,"props":24,"children":25},"p",{},[26,32,34,41,43,49,51,57,58,64],{"type":11,"tag":27,"props":28,"children":29},"strong",{},[30],{"type":17,"value":31},"Status:",{"type":17,"value":33}," skeleton (2026-05-21). Captures the doctrine that the\nupcoming Priority B chart components — ",{"type":11,"tag":35,"props":36,"children":38},"code",{"className":37},[],[39],{"type":17,"value":40},"TuxChartLine",{"type":17,"value":42},", ",{"type":11,"tag":35,"props":44,"children":46},{"className":45},[],[47],{"type":17,"value":48},"TuxChartBar",{"type":17,"value":50},",\n",{"type":11,"tag":35,"props":52,"children":54},{"className":53},[],[55],{"type":17,"value":56},"TuxChartArea",{"type":17,"value":42},{"type":11,"tag":35,"props":59,"children":61},{"className":60},[],[62],{"type":17,"value":63},"TuxChartScatter",{"type":17,"value":65}," — will follow. Fills in with worked\nexamples as each component ships.",{"type":11,"tag":23,"props":67,"children":68},{},[69,71,77,79,85,86,92],{"type":17,"value":70},"Reading this before building any chart component is the point. The\npatterns here are absorbed from the 2026-05 Figma sweep (Charts UI\nKit, Data Visualization Graphs \u002F Charts Kit, Snow Dashboard) and from\nTUX's existing ",{"type":11,"tag":35,"props":72,"children":74},{"className":73},[],[75],{"type":17,"value":76},"TuxSparkline",{"type":17,"value":78}," \u002F ",{"type":11,"tag":35,"props":80,"children":82},{"className":81},[],[83],{"type":17,"value":84},"TuxChartGeographic",{"type":17,"value":78},{"type":11,"tag":35,"props":87,"children":89},{"className":88},[],[90],{"type":17,"value":91},"TuxChartSunburst",{"type":17,"value":93},"\nshipping experience.",{"type":11,"tag":95,"props":96,"children":97},"hr",{},[],{"type":11,"tag":99,"props":100,"children":102},"h2",{"id":101},"_1-palette-chart-1-through-chart-8",[103,105,111,113],{"type":17,"value":104},"1. Palette — ",{"type":11,"tag":35,"props":106,"children":108},{"className":107},[],[109],{"type":17,"value":110},"--chart-1",{"type":17,"value":112}," through ",{"type":11,"tag":35,"props":114,"children":116},{"className":115},[],[117],{"type":17,"value":118},"--chart-8",{"type":11,"tag":23,"props":120,"children":121},{},[122,124,135],{"type":17,"value":123},"Eight categorical hues, maroon-anchored, defined in\n",{"type":11,"tag":125,"props":126,"children":128},"a",{"href":127},"..\u002Fapp\u002Fassets\u002Fcss\u002Ftokens.css",[129],{"type":11,"tag":35,"props":130,"children":132},{"className":131},[],[133],{"type":17,"value":134},"app\u002Fassets\u002Fcss\u002Ftokens.css",{"type":17,"value":136}," and re-\nremapped per theme (light \u002F dark \u002F high-contrast):",{"type":11,"tag":138,"props":139,"children":140},"table",{},[141,165],{"type":11,"tag":142,"props":143,"children":144},"thead",{},[145],{"type":11,"tag":146,"props":147,"children":148},"tr",{},[149,155,160],{"type":11,"tag":150,"props":151,"children":152},"th",{},[153],{"type":17,"value":154},"Token",{"type":11,"tag":150,"props":156,"children":157},{},[158],{"type":17,"value":159},"Light (default)",{"type":11,"tag":150,"props":161,"children":162},{},[163],{"type":17,"value":164},"Hue family",{"type":11,"tag":166,"props":167,"children":168},"tbody",{},[169,197,219,241,263,285,307,329],{"type":11,"tag":146,"props":170,"children":171},{},[172,181,192],{"type":11,"tag":173,"props":174,"children":175},"td",{},[176],{"type":11,"tag":35,"props":177,"children":179},{"className":178},[],[180],{"type":17,"value":110},{"type":11,"tag":173,"props":182,"children":183},{},[184,190],{"type":11,"tag":35,"props":185,"children":187},{"className":186},[],[188],{"type":17,"value":189},"var(--brand-primary)",{"type":17,"value":191}," (#5C0025 maroon)",{"type":11,"tag":173,"props":193,"children":194},{},[195],{"type":17,"value":196},"brand anchor",{"type":11,"tag":146,"props":198,"children":199},{},[200,209,214],{"type":11,"tag":173,"props":201,"children":202},{},[203],{"type":11,"tag":35,"props":204,"children":206},{"className":205},[],[207],{"type":17,"value":208},"--chart-2",{"type":11,"tag":173,"props":210,"children":211},{},[212],{"type":17,"value":213},"#3F5A6F",{"type":11,"tag":173,"props":215,"children":216},{},[217],{"type":17,"value":218},"slate teal",{"type":11,"tag":146,"props":220,"children":221},{},[222,231,236],{"type":11,"tag":173,"props":223,"children":224},{},[225],{"type":11,"tag":35,"props":226,"children":228},{"className":227},[],[229],{"type":17,"value":230},"--chart-3",{"type":11,"tag":173,"props":232,"children":233},{},[234],{"type":17,"value":235},"#C7973C",{"type":11,"tag":173,"props":237,"children":238},{},[239],{"type":17,"value":240},"wheat",{"type":11,"tag":146,"props":242,"children":243},{},[244,253,258],{"type":11,"tag":173,"props":245,"children":246},{},[247],{"type":11,"tag":35,"props":248,"children":250},{"className":249},[],[251],{"type":17,"value":252},"--chart-4",{"type":11,"tag":173,"props":254,"children":255},{},[256],{"type":17,"value":257},"#6B8E5A",{"type":11,"tag":173,"props":259,"children":260},{},[261],{"type":17,"value":262},"sage",{"type":11,"tag":146,"props":264,"children":265},{},[266,275,280],{"type":11,"tag":173,"props":267,"children":268},{},[269],{"type":11,"tag":35,"props":270,"children":272},{"className":271},[],[273],{"type":17,"value":274},"--chart-5",{"type":11,"tag":173,"props":276,"children":277},{},[278],{"type":17,"value":279},"#8C5A3C",{"type":11,"tag":173,"props":281,"children":282},{},[283],{"type":17,"value":284},"clay",{"type":11,"tag":146,"props":286,"children":287},{},[288,297,302],{"type":11,"tag":173,"props":289,"children":290},{},[291],{"type":11,"tag":35,"props":292,"children":294},{"className":293},[],[295],{"type":17,"value":296},"--chart-6",{"type":11,"tag":173,"props":298,"children":299},{},[300],{"type":17,"value":301},"#5C7080",{"type":11,"tag":173,"props":303,"children":304},{},[305],{"type":17,"value":306},"fog",{"type":11,"tag":146,"props":308,"children":309},{},[310,319,324],{"type":11,"tag":173,"props":311,"children":312},{},[313],{"type":11,"tag":35,"props":314,"children":316},{"className":315},[],[317],{"type":17,"value":318},"--chart-7",{"type":11,"tag":173,"props":320,"children":321},{},[322],{"type":17,"value":323},"#A33A3A",{"type":11,"tag":173,"props":325,"children":326},{},[327],{"type":17,"value":328},"rust red",{"type":11,"tag":146,"props":330,"children":331},{},[332,340,345],{"type":11,"tag":173,"props":333,"children":334},{},[335],{"type":11,"tag":35,"props":336,"children":338},{"className":337},[],[339],{"type":17,"value":118},{"type":11,"tag":173,"props":341,"children":342},{},[343],{"type":17,"value":344},"#3C5A87",{"type":11,"tag":173,"props":346,"children":347},{},[348],{"type":17,"value":349},"deep blue",{"type":11,"tag":23,"props":351,"children":352},{},[353],{"type":11,"tag":27,"props":354,"children":355},{},[356],{"type":17,"value":357},"Rules:",{"type":11,"tag":359,"props":360,"children":361},"ul",{},[362,378,395,420],{"type":11,"tag":363,"props":364,"children":365},"li",{},[366,376],{"type":11,"tag":27,"props":367,"children":368},{},[369,371],{"type":17,"value":370},"Always start at ",{"type":11,"tag":35,"props":372,"children":374},{"className":373},[],[375],{"type":17,"value":110},{"type":17,"value":377}," for the primary series. The brand\nanchor leads.",{"type":11,"tag":363,"props":379,"children":380},{},[381,393],{"type":11,"tag":27,"props":382,"children":383},{},[384,386,391],{"type":17,"value":385},"Don't reuse ",{"type":11,"tag":35,"props":387,"children":389},{"className":388},[],[390],{"type":17,"value":110},{"type":17,"value":392}," for a secondary \"previous-period\" overlay\non the same chart.",{"type":17,"value":394}," Overlays use a muted variant (see §5).",{"type":11,"tag":363,"props":396,"children":397},{},[398,403,405,411,413,418],{"type":11,"tag":27,"props":399,"children":400},{},[401],{"type":17,"value":402},"Don't expand beyond 8 series.",{"type":17,"value":404}," If a chart needs 9+, the data\nbelongs in a table, a small-multiples grid (",{"type":11,"tag":35,"props":406,"children":408},{"className":407},[],[409],{"type":17,"value":410},"TuxVizGrid",{"type":17,"value":412},"), or a\nsunburst (",{"type":11,"tag":35,"props":414,"children":416},{"className":415},[],[417],{"type":17,"value":91},{"type":17,"value":419},") — not a single overcrowded chart.",{"type":11,"tag":363,"props":421,"children":422},{},[423,428],{"type":11,"tag":27,"props":424,"children":425},{},[426],{"type":17,"value":427},"Color is not the only encoder.",{"type":17,"value":429}," Always pair color with one of:\nshape (markers), thickness (stroke), or text (end-of-line label).\nSee §3 + §6.",{"type":11,"tag":23,"props":431,"children":432},{},[433],{"type":17,"value":434},"The 8-hue × 3-theme matrix was reaffirmed twice in the medium-signal\npass (Charts UI Kit + Data Viz Graphs both converge on this shape).\nDon't re-tune.",{"type":11,"tag":99,"props":436,"children":438},{"id":437},"_2-axis-grid-and-legend-tokens",[439],{"type":17,"value":440},"2. Axis, grid, and legend tokens",{"type":11,"tag":23,"props":442,"children":443},{},[444,446,452],{"type":17,"value":445},"Settled 2026-09-01, after the charts shipped and the Power BI emitter\n(",{"type":11,"tag":35,"props":447,"children":449},{"className":448},[],[450],{"type":17,"value":451},"scripts\u002Fbuild-powerbi-theme.mjs",{"type":17,"value":453},") forced every one of these choices to\nbecome a literal. Two systems now have to agree on them, which is what\nturned the guesses below into decisions.",{"type":11,"tag":23,"props":455,"children":456},{},[457,470,472,478,479,485,486,492,493,499,501,507],{"type":11,"tag":27,"props":458,"children":459},{},[460,462,468],{"type":17,"value":461},"No ",{"type":11,"tag":35,"props":463,"children":465},{"className":464},[],[466],{"type":17,"value":467},"--chart-*",{"type":17,"value":469}," tokens were minted.",{"type":17,"value":471}," The 2026-05 skeleton expected\nfour new anchors (",{"type":11,"tag":35,"props":473,"children":475},{"className":474},[],[476],{"type":17,"value":477},"--chart-axis",{"type":17,"value":42},{"type":11,"tag":35,"props":480,"children":482},{"className":481},[],[483],{"type":17,"value":484},"--chart-gridline",{"type":17,"value":42},{"type":11,"tag":35,"props":487,"children":489},{"className":488},[],[490],{"type":17,"value":491},"--chart-label",{"type":17,"value":50},{"type":11,"tag":35,"props":494,"children":496},{"className":495},[],[497],{"type":17,"value":498},"--chart-legend",{"type":17,"value":500},"). Building both consumers showed they aren't needed —\nthe surface and text ramps already carry these roles, and aliasing them\nwould create two names for one value, which ",{"type":11,"tag":35,"props":502,"children":504},{"className":503},[],[505],{"type":17,"value":506},"audit:tokens",{"type":17,"value":508}," flags. Use\nthe anchors directly:",{"type":11,"tag":138,"props":510,"children":511},{},[512,533],{"type":11,"tag":142,"props":513,"children":514},{},[515],{"type":11,"tag":146,"props":516,"children":517},{},[518,523,528],{"type":11,"tag":150,"props":519,"children":520},{},[521],{"type":17,"value":522},"Role",{"type":11,"tag":150,"props":524,"children":525},{},[526],{"type":17,"value":527},"Web token",{"type":11,"tag":150,"props":529,"children":530},{},[531],{"type":17,"value":532},"Power BI theme",{"type":11,"tag":166,"props":534,"children":535},{},[536,562,603,645,670],{"type":11,"tag":146,"props":537,"children":538},{},[539,544,553],{"type":11,"tag":173,"props":540,"children":541},{},[542],{"type":17,"value":543},"Axis line",{"type":11,"tag":173,"props":545,"children":546},{},[547],{"type":11,"tag":35,"props":548,"children":550},{"className":549},[],[551],{"type":17,"value":552},"--surface-border",{"type":11,"tag":173,"props":554,"children":555},{},[556],{"type":11,"tag":35,"props":557,"children":559},{"className":558},[],[560],{"type":17,"value":561},"thirdLevelElements",{"type":11,"tag":146,"props":563,"children":564},{},[565,570,586],{"type":11,"tag":173,"props":566,"children":567},{},[568],{"type":17,"value":569},"Gridline",{"type":11,"tag":173,"props":571,"children":572},{},[573,578,580],{"type":11,"tag":35,"props":574,"children":576},{"className":575},[],[577],{"type":17,"value":552},{"type":17,"value":579}," @ ",{"type":11,"tag":35,"props":581,"children":583},{"className":582},[],[584],{"type":17,"value":585},"opacity: 0.5",{"type":11,"tag":173,"props":587,"children":588},{},[589,595,597],{"type":11,"tag":35,"props":590,"children":592},{"className":591},[],[593],{"type":17,"value":594},"gridlineColor",{"type":17,"value":596}," ← ",{"type":11,"tag":35,"props":598,"children":600},{"className":599},[],[601],{"type":17,"value":602},"surface.border-subtle",{"type":11,"tag":146,"props":604,"children":605},{},[606,611,620],{"type":11,"tag":173,"props":607,"children":608},{},[609],{"type":17,"value":610},"Axis tick text",{"type":11,"tag":173,"props":612,"children":613},{},[614],{"type":11,"tag":35,"props":615,"children":617},{"className":616},[],[618],{"type":17,"value":619},"--text-secondary",{"type":11,"tag":173,"props":621,"children":622},{},[623,629,631,637,639],{"type":11,"tag":35,"props":624,"children":626},{"className":625},[],[627],{"type":17,"value":628},"categoryAxis",{"type":17,"value":630},"\u002F",{"type":11,"tag":35,"props":632,"children":634},{"className":633},[],[635],{"type":17,"value":636},"valueAxis",{"type":17,"value":638}," ",{"type":11,"tag":35,"props":640,"children":642},{"className":641},[],[643],{"type":17,"value":644},"fontColor",{"type":11,"tag":146,"props":646,"children":647},{},[648,653,661],{"type":11,"tag":173,"props":649,"children":650},{},[651],{"type":17,"value":652},"Legend text",{"type":11,"tag":173,"props":654,"children":655},{},[656],{"type":11,"tag":35,"props":657,"children":659},{"className":658},[],[660],{"type":17,"value":619},{"type":11,"tag":173,"props":662,"children":663},{},[664],{"type":11,"tag":35,"props":665,"children":667},{"className":666},[],[668],{"type":17,"value":669},"legend.labelColor",{"type":11,"tag":146,"props":671,"children":672},{},[673,678,686],{"type":11,"tag":173,"props":674,"children":675},{},[676],{"type":17,"value":677},"Data labels",{"type":11,"tag":173,"props":679,"children":680},{},[681],{"type":11,"tag":35,"props":682,"children":684},{"className":683},[],[685],{"type":17,"value":619},{"type":11,"tag":173,"props":687,"children":688},{},[689],{"type":11,"tag":35,"props":690,"children":692},{"className":691},[],[693],{"type":17,"value":694},"labels.color",{"type":11,"tag":23,"props":696,"children":697},{},[698,700,705,707,712,714,719,721,727,729,735],{"type":17,"value":699},"The gridline row is the one deliberate divergence. The web charts render\n",{"type":11,"tag":35,"props":701,"children":703},{"className":702},[],[704],{"type":17,"value":552},{"type":17,"value":706}," at half opacity; a Power BI theme has no opacity\nchannel on ",{"type":11,"tag":35,"props":708,"children":710},{"className":709},[],[711],{"type":17,"value":594},{"type":17,"value":713},", so it uses ",{"type":11,"tag":35,"props":715,"children":717},{"className":716},[],[718],{"type":17,"value":602},{"type":17,"value":720}," instead —\n",{"type":11,"tag":35,"props":722,"children":724},{"className":723},[],[725],{"type":17,"value":726},"#EFEEED",{"type":17,"value":728},", which is within a hair of ",{"type":11,"tag":35,"props":730,"children":732},{"className":731},[],[733],{"type":17,"value":734},"#E7E6E6",{"type":17,"value":736}," composited at 50% on\nwhite. Same intent, two mechanisms, because one of them can't express\nalpha.",{"type":11,"tag":738,"props":739,"children":741},"h3",{"id":740},"rules",[742],{"type":17,"value":743},"Rules",{"type":11,"tag":359,"props":745,"children":746},{},[747,786,796,806],{"type":11,"tag":363,"props":748,"children":749},{},[750,755,757,763,765,770,771,777,779,784],{"type":11,"tag":27,"props":751,"children":752},{},[753],{"type":17,"value":754},"Gridlines on the value axis only.",{"type":17,"value":756}," One horizontal rule per value\nstep is enough to read a bar or point against; category-axis gridlines\nadd ink without adding information. (",{"type":11,"tag":35,"props":758,"children":760},{"className":759},[],[761],{"type":17,"value":762},"gridlineShow: false",{"type":17,"value":764}," on\n",{"type":11,"tag":35,"props":766,"children":768},{"className":767},[],[769],{"type":17,"value":628},{"type":17,"value":42},{"type":11,"tag":35,"props":772,"children":774},{"className":773},[],[775],{"type":17,"value":776},"true",{"type":17,"value":778}," on ",{"type":11,"tag":35,"props":780,"children":782},{"className":781},[],[783],{"type":17,"value":636},{"type":17,"value":785},".)",{"type":11,"tag":363,"props":787,"children":788},{},[789,794],{"type":11,"tag":27,"props":790,"children":791},{},[792],{"type":17,"value":793},"Axis titles off by default.",{"type":17,"value":795}," The field name is nearly always\nredundant with the visual's own title. Fluent 2 defaults them off too,\nso this is now the platform default rather than a house deviation.",{"type":11,"tag":363,"props":797,"children":798},{},[799,804],{"type":11,"tag":27,"props":800,"children":801},{},[802],{"type":17,"value":803},"Legend on top, no legend title",{"type":17,"value":805},", for the same redundancy reason.",{"type":11,"tag":363,"props":807,"children":808},{},[809,814,816,822],{"type":11,"tag":27,"props":810,"children":811},{},[812],{"type":17,"value":813},"Tabular numerals",{"type":17,"value":815}," (",{"type":11,"tag":35,"props":817,"children":819},{"className":818},[],[820],{"type":17,"value":821},"font-variant-numeric: tabular-nums",{"type":17,"value":823},") on axis\nticks and value labels everywhere — aligns with the rest of TUX's data\ndensity.",{"type":11,"tag":738,"props":825,"children":827},{"id":826},"known-deviation-reconcile-before-the-next-chart-batch",[828],{"type":17,"value":829},"Known deviation — reconcile before the next chart batch",{"type":11,"tag":23,"props":831,"children":832},{},[833,838,840,846,848,853,855,860],{"type":11,"tag":35,"props":834,"children":836},{"className":835},[],[837],{"type":17,"value":40},{"type":17,"value":839}," styles its x\u002Fy tick labels ",{"type":11,"tag":35,"props":841,"children":843},{"className":842},[],[844],{"type":17,"value":845},"--text-muted",{"type":17,"value":847},", while\n",{"type":11,"tag":35,"props":849,"children":851},{"className":850},[],[852],{"type":17,"value":48},{"type":17,"value":854}," uses ",{"type":11,"tag":35,"props":856,"children":858},{"className":857},[],[859],{"type":17,"value":619},{"type":17,"value":861},". Both clear WCAG 2.2 AAA on white\n(tokens.json holds them both to 7:1), so this is a consistency defect,\nnot an accessibility one — but the two charts genuinely render axis text\nat different weights of grey today.",{"type":11,"tag":23,"props":863,"children":864},{},[865,870,872,877,879,884],{"type":11,"tag":35,"props":866,"children":868},{"className":867},[],[869],{"type":17,"value":619},{"type":17,"value":871}," is canonical, on three grounds: ",{"type":11,"tag":35,"props":873,"children":875},{"className":874},[],[876],{"type":17,"value":48},{"type":17,"value":878}," already\nuses it, the Power BI theme emits it, and axis ticks carry real\ninformation rather than being de-emphasised chrome. ",{"type":11,"tag":35,"props":880,"children":882},{"className":881},[],[883],{"type":17,"value":40},{"type":17,"value":885}," is\nthe outlier and should move — as its own change with the chart family,\nnot folded into a doc edit, since it is a visible change to a shipped\ncomponent.",{"type":11,"tag":99,"props":887,"children":889},{"id":888},"_3-value-label-placement-in-bar-vs-above",[890],{"type":17,"value":891},"3. Value-label placement — in-bar vs above",{"type":11,"tag":23,"props":893,"children":894},{},[895],{"type":17,"value":896},"Absorbed from the Data Viz Graphs kit, which documents the choice as\ntwo distinct text styles (\"Percent In-bar\" \u002F \"Percent Out-bar\"):",{"type":11,"tag":138,"props":898,"children":899},{},[900,921],{"type":11,"tag":142,"props":901,"children":902},{},[903],{"type":11,"tag":146,"props":904,"children":905},{},[906,911,916],{"type":11,"tag":150,"props":907,"children":908},{},[909],{"type":17,"value":910},"Placement",{"type":11,"tag":150,"props":912,"children":913},{},[914],{"type":17,"value":915},"When",{"type":11,"tag":150,"props":917,"children":918},{},[919],{"type":17,"value":920},"Style",{"type":11,"tag":166,"props":922,"children":923},{},[924,945,979],{"type":11,"tag":146,"props":925,"children":926},{},[927,935,940],{"type":11,"tag":173,"props":928,"children":929},{},[930],{"type":11,"tag":27,"props":931,"children":932},{},[933],{"type":17,"value":934},"In-bar",{"type":11,"tag":173,"props":936,"children":937},{},[938],{"type":17,"value":939},"Bar pixel-height ≥ 24px. Label fits inside the bar without truncation.",{"type":11,"tag":173,"props":941,"children":942},{},[943],{"type":17,"value":944},"White on the bar fill (contrast-checked at AA against the darkest chart hue). Tabular-nums.",{"type":11,"tag":146,"props":946,"children":947},{},[948,956,961],{"type":11,"tag":173,"props":949,"children":950},{},[951],{"type":11,"tag":27,"props":952,"children":953},{},[954],{"type":17,"value":955},"Above",{"type":11,"tag":173,"props":957,"children":958},{},[959],{"type":17,"value":960},"Bar pixel-height \u003C 24px, OR consumer wants prose-rhythm alignment.",{"type":11,"tag":173,"props":962,"children":963},{},[964,970,971,977],{"type":11,"tag":35,"props":965,"children":967},{"className":966},[],[968],{"type":17,"value":969},"--text-primary",{"type":17,"value":778},{"type":11,"tag":35,"props":972,"children":974},{"className":973},[],[975],{"type":17,"value":976},"--surface-page",{"type":17,"value":978},". Anchored to the bar top with 4px gap.",{"type":11,"tag":146,"props":980,"children":981},{},[982,990,995],{"type":11,"tag":173,"props":983,"children":984},{},[985],{"type":11,"tag":27,"props":986,"children":987},{},[988],{"type":17,"value":989},"Auto (recommended default)",{"type":11,"tag":173,"props":991,"children":992},{},[993],{"type":17,"value":994},"Let the component pick at render time using the 24px rule.",{"type":11,"tag":173,"props":996,"children":997},{},[998,1004,1006,1011],{"type":11,"tag":35,"props":999,"children":1001},{"className":1000},[],[1002],{"type":17,"value":1003},"valuePlacement=\"auto\"",{"type":17,"value":1005}," on the future ",{"type":11,"tag":35,"props":1007,"children":1009},{"className":1008},[],[1010],{"type":17,"value":48},{"type":17,"value":1012},".",{"type":11,"tag":23,"props":1014,"children":1015},{},[1016],{"type":17,"value":1017},"The 24px threshold is the inflection point where in-bar labels start\nto feel cramped — verified visually against the kit's reference frames.",{"type":11,"tag":99,"props":1019,"children":1021},{"id":1020},"_4-end-of-line-labels-on-line-charts",[1022],{"type":17,"value":1023},"4. End-of-line labels on line charts",{"type":11,"tag":23,"props":1025,"children":1026},{},[1027,1029,1034,1036,1041],{"type":17,"value":1028},"Absorbed from Data Viz Graphs. ",{"type":11,"tag":27,"props":1030,"children":1031},{},[1032],{"type":17,"value":1033},"The default behavior",{"type":17,"value":1035}," for\n",{"type":11,"tag":35,"props":1037,"children":1039},{"className":1038},[],[1040],{"type":17,"value":40},{"type":17,"value":1042},", not opt-in:",{"type":11,"tag":359,"props":1044,"children":1045},{},[1046,1051,1056],{"type":11,"tag":363,"props":1047,"children":1048},{},[1049],{"type":17,"value":1050},"For each series, render the final value at the right end of the\nline, colored to match the series stroke.",{"type":11,"tag":363,"props":1052,"children":1053},{},[1054],{"type":17,"value":1055},"Below a width threshold (~480px container), hide the labels and\nfall back to the legend.",{"type":11,"tag":363,"props":1057,"children":1058},{},[1059],{"type":17,"value":1060},"Screen-reader summary should always include the final values\nregardless of label visibility.",{"type":11,"tag":23,"props":1062,"children":1063},{},[1064,1066,1071],{"type":17,"value":1065},"This is ",{"type":11,"tag":27,"props":1067,"children":1068},{},[1069],{"type":17,"value":1070},"a real accessibility win",{"type":17,"value":1072}," — color-blind users get series\nidentity from both color AND adjacent text, no legend round-trip\nneeded. The pattern transfers cleanly from the kit's dark-canvas\ntreatment to TUX's white paper-grain default.",{"type":11,"tag":99,"props":1074,"children":1076},{"id":1075},"_5-comparison-series-current-vs-previous",[1077],{"type":17,"value":1078},"5. Comparison series (current vs previous)",{"type":11,"tag":23,"props":1080,"children":1081},{},[1082],{"type":17,"value":1083},"Absorbed from Snow Dashboard. The pattern: render the previous-period\nseries as a muted\u002Fdashed companion to the primary line or bar.",{"type":11,"tag":23,"props":1085,"children":1086},{},[1087],{"type":11,"tag":27,"props":1088,"children":1089},{},[1090,1092,1097],{"type":17,"value":1091},"For ",{"type":11,"tag":35,"props":1093,"children":1095},{"className":1094},[],[1096],{"type":17,"value":40},{"type":17,"value":1098},":",{"type":11,"tag":359,"props":1100,"children":1101},{},[1102,1121,1134],{"type":11,"tag":363,"props":1103,"children":1104},{},[1105,1111,1113,1119],{"type":11,"tag":35,"props":1106,"children":1108},{"className":1107},[],[1109],{"type":17,"value":1110},"series.previous",{"type":17,"value":1112}," data array of the same length as the primary\nseries (or ",{"type":11,"tag":35,"props":1114,"children":1116},{"className":1115},[],[1117],{"type":17,"value":1118},"null",{"type":17,"value":1120}," if not provided).",{"type":11,"tag":363,"props":1122,"children":1123},{},[1124,1126,1132],{"type":17,"value":1125},"Render: same hue family, 60% opacity, dashed stroke (",{"type":11,"tag":35,"props":1127,"children":1129},{"className":1128},[],[1130],{"type":17,"value":1131},"4 4",{"type":17,"value":1133},").",{"type":11,"tag":363,"props":1135,"children":1136},{},[1137],{"type":17,"value":1138},"Tooltip shows current + previous + delta when both are present.",{"type":11,"tag":23,"props":1140,"children":1141},{},[1142],{"type":11,"tag":27,"props":1143,"children":1144},{},[1145,1146,1151],{"type":17,"value":1091},{"type":11,"tag":35,"props":1147,"children":1149},{"className":1148},[],[1150],{"type":17,"value":48},{"type":17,"value":1098},{"type":11,"tag":359,"props":1153,"children":1154},{},[1155,1166,1171],{"type":11,"tag":363,"props":1156,"children":1157},{},[1158,1164],{"type":11,"tag":35,"props":1159,"children":1161},{"className":1160},[],[1162],{"type":17,"value":1163},"series.comparison",{"type":17,"value":1165}," data array per category.",{"type":11,"tag":363,"props":1167,"children":1168},{},[1169],{"type":17,"value":1170},"Render: same hue family, 40% opacity, drawn behind the primary bar\nwith 4px wider footprint, no fill border — the primary bar sits in\nfront like a darker silhouette.",{"type":11,"tag":363,"props":1172,"children":1173},{},[1174],{"type":17,"value":1175},"Use case: \"projection vs actual,\" \"target vs realized.\"",{"type":11,"tag":23,"props":1177,"children":1178},{},[1179,1184,1186,1192],{"type":11,"tag":27,"props":1180,"children":1181},{},[1182],{"type":17,"value":1183},"Anti-pattern:",{"type":17,"value":1185}," don't use a ",{"type":11,"tag":1187,"props":1188,"children":1189},"em",{},[1190],{"type":17,"value":1191},"different",{"type":17,"value":1193}," hue for the previous-period\nseries. Same hue, muted — that's the visual cue that says \"this is\nthe same metric, prior window.\" A different hue reads as a different\nmetric.",{"type":11,"tag":99,"props":1195,"children":1197},{"id":1196},"_6-brush-range-selector-on-time-series",[1198],{"type":17,"value":1199},"6. Brush \u002F range selector on time-series",{"type":11,"tag":23,"props":1201,"children":1202},{},[1203],{"type":17,"value":1204},"Absorbed from Charts UI Kit. When a time-series spans a long window\nand the user needs to scrub:",{"type":11,"tag":359,"props":1206,"children":1207},{},[1208,1213,1218],{"type":11,"tag":363,"props":1209,"children":1210},{},[1211],{"type":17,"value":1212},"A secondary, dimmed strip of the full series renders below the\nprimary chart.",{"type":11,"tag":363,"props":1214,"children":1215},{},[1216],{"type":17,"value":1217},"Two draggable handles bracket the active window; the primary\nchart re-renders to the brushed range.",{"type":11,"tag":363,"props":1219,"children":1220},{},[1221,1223,1229],{"type":17,"value":1222},"The strip is ~64px tall; the brushed window is highlighted with\n",{"type":11,"tag":35,"props":1224,"children":1226},{"className":1225},[],[1227],{"type":17,"value":1228},"color-mix(in srgb, var(--brand-primary) 6%, transparent)",{"type":17,"value":1012},{"type":11,"tag":23,"props":1231,"children":1232},{},[1233,1235,1241,1243,1248,1250,1256],{"type":17,"value":1234},"Shipped via either a ",{"type":11,"tag":35,"props":1236,"children":1238},{"className":1237},[],[1239],{"type":17,"value":1240},"withBrush",{"type":17,"value":1242}," boolean prop on ",{"type":11,"tag":35,"props":1244,"children":1246},{"className":1245},[],[1247],{"type":17,"value":40},{"type":17,"value":1249}," or a\nnamed slot (",{"type":11,"tag":35,"props":1251,"children":1253},{"className":1252},[],[1254],{"type":17,"value":1255},"#range",{"type":17,"value":1257},") so consumers can drop a custom strip. Final\nchoice deferred to build time.",{"type":11,"tag":99,"props":1259,"children":1261},{"id":1260},"_7-kpi-strip-composition",[1262],{"type":17,"value":1263},"7. KPI strip composition",{"type":11,"tag":23,"props":1265,"children":1266},{},[1267],{"type":17,"value":1268},"Absorbed from Snow Dashboard + Charts UI Kit. When a chart anchors a\nsection, the parent template composes a KPI strip above:",{"type":11,"tag":1270,"props":1271,"children":1275},"pre",{"className":1272,"code":1273,"language":1274,"meta":6,"style":6},"language-vue shiki shiki-themes material-theme-lighter github-light github-dark","\u003Csection>\n  \u003CTuxFactoid\n    density=\"3\"\n    :items=\"[\n      { value: 89_529, label: 'Total · this week' },\n      { value: 83_529, suffix: ' (-7%)', label: 'Previous week' },\n      { value: 5_000,  label: 'Δ delta' },\n    ]\"\n  \u002F>\n  \u003CTuxChartArea :series=\"series\" stacked \u002F>\n\u003C\u002Fsection>\n","vue",[1276],{"type":11,"tag":35,"props":1277,"children":1278},{"__ignoreMap":6},[1279,1302,1312,1321,1330,1339,1348,1357,1366,1375,1384],{"type":11,"tag":1280,"props":1281,"children":1284},"span",{"class":1282,"line":1283},"line",1,[1285,1291,1297],{"type":11,"tag":1280,"props":1286,"children":1288},{"style":1287},"--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8",[1289],{"type":17,"value":1290},"\u003C",{"type":11,"tag":1280,"props":1292,"children":1294},{"style":1293},"--shiki-light:#E53935;--shiki-default:#22863A;--shiki-dark:#85E89D",[1295],{"type":17,"value":1296},"section",{"type":11,"tag":1280,"props":1298,"children":1299},{"style":1287},[1300],{"type":17,"value":1301},">\n",{"type":11,"tag":1280,"props":1303,"children":1305},{"class":1282,"line":1304},2,[1306],{"type":11,"tag":1280,"props":1307,"children":1309},{"style":1308},"--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8",[1310],{"type":17,"value":1311},"  \u003CTuxFactoid\n",{"type":11,"tag":1280,"props":1313,"children":1315},{"class":1282,"line":1314},3,[1316],{"type":11,"tag":1280,"props":1317,"children":1318},{"style":1308},[1319],{"type":17,"value":1320},"    density=\"3\"\n",{"type":11,"tag":1280,"props":1322,"children":1324},{"class":1282,"line":1323},4,[1325],{"type":11,"tag":1280,"props":1326,"children":1327},{"style":1308},[1328],{"type":17,"value":1329},"    :items=\"[\n",{"type":11,"tag":1280,"props":1331,"children":1333},{"class":1282,"line":1332},5,[1334],{"type":11,"tag":1280,"props":1335,"children":1336},{"style":1308},[1337],{"type":17,"value":1338},"      { value: 89_529, label: 'Total · this week' },\n",{"type":11,"tag":1280,"props":1340,"children":1342},{"class":1282,"line":1341},6,[1343],{"type":11,"tag":1280,"props":1344,"children":1345},{"style":1308},[1346],{"type":17,"value":1347},"      { value: 83_529, suffix: ' (-7%)', label: 'Previous week' },\n",{"type":11,"tag":1280,"props":1349,"children":1351},{"class":1282,"line":1350},7,[1352],{"type":11,"tag":1280,"props":1353,"children":1354},{"style":1308},[1355],{"type":17,"value":1356},"      { value: 5_000,  label: 'Δ delta' },\n",{"type":11,"tag":1280,"props":1358,"children":1360},{"class":1282,"line":1359},8,[1361],{"type":11,"tag":1280,"props":1362,"children":1363},{"style":1308},[1364],{"type":17,"value":1365},"    ]\"\n",{"type":11,"tag":1280,"props":1367,"children":1369},{"class":1282,"line":1368},9,[1370],{"type":11,"tag":1280,"props":1371,"children":1372},{"style":1308},[1373],{"type":17,"value":1374},"  \u002F>\n",{"type":11,"tag":1280,"props":1376,"children":1378},{"class":1282,"line":1377},10,[1379],{"type":11,"tag":1280,"props":1380,"children":1381},{"style":1308},[1382],{"type":17,"value":1383},"  \u003CTuxChartArea :series=\"series\" stacked \u002F>\n",{"type":11,"tag":1280,"props":1385,"children":1387},{"class":1282,"line":1386},11,[1388,1393,1397],{"type":11,"tag":1280,"props":1389,"children":1390},{"style":1287},[1391],{"type":17,"value":1392},"\u003C\u002F",{"type":11,"tag":1280,"props":1394,"children":1395},{"style":1293},[1396],{"type":17,"value":1296},{"type":11,"tag":1280,"props":1398,"children":1399},{"style":1287},[1400],{"type":17,"value":1301},{"type":11,"tag":23,"props":1402,"children":1403},{},[1404,1409,1411,1416],{"type":11,"tag":27,"props":1405,"children":1406},{},[1407],{"type":17,"value":1408},"The KPIs and the chart are siblings",{"type":17,"value":1410},", not nested inside a\nsingle component. The chart doesn't bake KPI math; the parent reads\nthe data once, exposes summary stats, and hands the chart the same\ndata. This keeps ",{"type":11,"tag":35,"props":1412,"children":1414},{"className":1413},[],[1415],{"type":17,"value":56},{"type":17,"value":1417}," honest about its job (renders shapes)\nand lets the consumer swap KPI affordances (BigStat \u002F Factoid \u002F\nsingle-stat) without forking the chart.",{"type":11,"tag":99,"props":1419,"children":1421},{"id":1420},"_8-accessibility-alt-text-screen-reader-summaries",[1422],{"type":17,"value":1423},"8. Accessibility — alt-text + screen-reader summaries",{"type":11,"tag":23,"props":1425,"children":1426},{},[1427,1432],{"type":11,"tag":35,"props":1428,"children":1430},{"className":1429},[],[1431],{"type":17,"value":76},{"type":17,"value":1433}," already ships the pattern; future chart components\nfollow:",{"type":11,"tag":359,"props":1435,"children":1436},{},[1437,1447,1463,1492],{"type":11,"tag":363,"props":1438,"children":1439},{},[1440,1445],{"type":11,"tag":27,"props":1441,"children":1442},{},[1443],{"type":17,"value":1444},"SR-only summary",{"type":17,"value":1446}," derived from the data: \"Trend: 12 points,\nlow 18.2, high 24.7, last 23.1 (up 4.9 from first).\"",{"type":11,"tag":363,"props":1448,"children":1449},{},[1450,1461],{"type":11,"tag":27,"props":1451,"children":1452},{},[1453,1459],{"type":11,"tag":35,"props":1454,"children":1456},{"className":1455},[],[1457],{"type":17,"value":1458},"\u003Ctitle>",{"type":17,"value":1460}," inside the SVG",{"type":17,"value":1462}," for hover\u002FSR readouts.",{"type":11,"tag":363,"props":1464,"children":1465},{},[1466,1483,1485,1491],{"type":11,"tag":27,"props":1467,"children":1468},{},[1469,1475,1477],{"type":11,"tag":35,"props":1470,"children":1472},{"className":1471},[],[1473],{"type":17,"value":1474},"aria-labelledby",{"type":17,"value":1476}," + ",{"type":11,"tag":35,"props":1478,"children":1480},{"className":1479},[],[1481],{"type":17,"value":1482},"aria-describedby",{"type":17,"value":1484}," wiring when the chart\nships an external caption (e.g. inside ",{"type":11,"tag":35,"props":1486,"children":1488},{"className":1487},[],[1489],{"type":17,"value":1490},"TuxChartFrame",{"type":17,"value":1133},{"type":11,"tag":363,"props":1493,"children":1494},{},[1495,1500],{"type":11,"tag":27,"props":1496,"children":1497},{},[1498],{"type":17,"value":1499},"No relying on color alone",{"type":17,"value":1501}," — see §1 rule \"Color is not the only\nencoder.\"",{"type":11,"tag":23,"props":1503,"children":1504},{},[1505,1507,1513],{"type":17,"value":1506},"For chart kinds where the SR summary is non-obvious (sunburst, geo\nchoropleth), components ship an ",{"type":11,"tag":35,"props":1508,"children":1510},{"className":1509},[],[1511],{"type":17,"value":1512},"ariaSummary",{"type":17,"value":1514}," prop the consumer can\noverride with a curated sentence.",{"type":11,"tag":99,"props":1516,"children":1518},{"id":1517},"_9-editorial-framing-tuxchartframe",[1519,1521],{"type":17,"value":1520},"9. Editorial framing — ",{"type":11,"tag":35,"props":1522,"children":1524},{"className":1523},[],[1525],{"type":17,"value":1490},{"type":11,"tag":23,"props":1527,"children":1528},{},[1529,1531,1536],{"type":17,"value":1530},"When a chart appears in a report or paper context, wrap it in\n",{"type":11,"tag":35,"props":1532,"children":1534},{"className":1533},[],[1535],{"type":17,"value":1490},{"type":17,"value":1537}," to inherit the editorial chrome:",{"type":11,"tag":359,"props":1539,"children":1540},{},[1541,1546,1551,1556,1561],{"type":11,"tag":363,"props":1542,"children":1543},{},[1544],{"type":17,"value":1545},"Uppercase tracked eyebrow (\"Exhibit 11.04\")",{"type":11,"tag":363,"props":1547,"children":1548},{},[1549],{"type":17,"value":1550},"Display-face title (Oswald)",{"type":11,"tag":363,"props":1552,"children":1553},{},[1554],{"type":17,"value":1555},"2px maroon signature rule",{"type":11,"tag":363,"props":1557,"children":1558},{},[1559],{"type":17,"value":1560},"Chart body (the slotted chart component)",{"type":11,"tag":363,"props":1562,"children":1563},{},[1564],{"type":17,"value":1565},"Footnote + source citation lines",{"type":11,"tag":23,"props":1567,"children":1568},{},[1569],{"type":17,"value":1570},"In dashboard tiles, drop the frame — the surrounding TuxCard\nprovides equivalent chrome.",{"type":11,"tag":95,"props":1572,"children":1573},{},[],{"type":11,"tag":99,"props":1575,"children":1577},{"id":1576},"status-by-component",[1578],{"type":17,"value":1579},"Status by component",{"type":11,"tag":138,"props":1581,"children":1582},{},[1583,1599],{"type":11,"tag":142,"props":1584,"children":1585},{},[1586],{"type":11,"tag":146,"props":1587,"children":1588},{},[1589,1594],{"type":11,"tag":150,"props":1590,"children":1591},{},[1592],{"type":17,"value":1593},"Component",{"type":11,"tag":150,"props":1595,"children":1596},{},[1597],{"type":17,"value":1598},"Status",{"type":11,"tag":166,"props":1600,"children":1601},{},[1602,1618,1634,1650,1666,1691,1724,1740,1756,1772],{"type":11,"tag":146,"props":1603,"children":1604},{},[1605,1613],{"type":11,"tag":173,"props":1606,"children":1607},{},[1608],{"type":11,"tag":35,"props":1609,"children":1611},{"className":1610},[],[1612],{"type":17,"value":76},{"type":11,"tag":173,"props":1614,"children":1615},{},[1616],{"type":17,"value":1617},"Shipped — inline mini-trend; native SVG; SR summary; tone-aware",{"type":11,"tag":146,"props":1619,"children":1620},{},[1621,1629],{"type":11,"tag":173,"props":1622,"children":1623},{},[1624],{"type":11,"tag":35,"props":1625,"children":1627},{"className":1626},[],[1628],{"type":17,"value":84},{"type":11,"tag":173,"props":1630,"children":1631},{},[1632],{"type":17,"value":1633},"Shipped — Texas-flavored maps; 5 kinds (county \u002F districts \u002F states \u002F dot \u002F OD)",{"type":11,"tag":146,"props":1635,"children":1636},{},[1637,1645],{"type":11,"tag":173,"props":1638,"children":1639},{},[1640],{"type":11,"tag":35,"props":1641,"children":1643},{"className":1642},[],[1644],{"type":17,"value":91},{"type":11,"tag":173,"props":1646,"children":1647},{},[1648],{"type":17,"value":1649},"Shipped — two-ring radial",{"type":11,"tag":146,"props":1651,"children":1652},{},[1653,1661],{"type":11,"tag":173,"props":1654,"children":1655},{},[1656],{"type":11,"tag":35,"props":1657,"children":1659},{"className":1658},[],[1660],{"type":17,"value":1490},{"type":11,"tag":173,"props":1662,"children":1663},{},[1664],{"type":17,"value":1665},"Shipped — editorial wrapper",{"type":11,"tag":146,"props":1667,"children":1668},{},[1669,1678],{"type":11,"tag":173,"props":1670,"children":1671},{},[1672],{"type":11,"tag":35,"props":1673,"children":1675},{"className":1674},[],[1676],{"type":17,"value":1677},"TuxChartHeatmap",{"type":11,"tag":173,"props":1679,"children":1680},{},[1681,1683,1689],{"type":17,"value":1682},"Shipped — matrix heatmap on the 5-stop sequential map ramps; equal-interval bins (",{"type":11,"tag":35,"props":1684,"children":1686},{"className":1685},[],[1687],{"type":17,"value":1688},"tuxQuantizeBin",{"type":17,"value":1690},"); 2-D keyboard cursor; honest null cells",{"type":11,"tag":146,"props":1692,"children":1693},{},[1694,1703],{"type":11,"tag":173,"props":1695,"children":1696},{},[1697],{"type":11,"tag":35,"props":1698,"children":1700},{"className":1699},[],[1701],{"type":17,"value":1702},"TuxChartHistogram",{"type":11,"tag":173,"props":1704,"children":1705},{},[1706,1708,1714,1716,1722],{"type":17,"value":1707},"Shipped — raw-sample distribution; nice 1\u002F2\u002F5 bin edges (",{"type":11,"tag":35,"props":1709,"children":1711},{"className":1710},[],[1712],{"type":17,"value":1713},"tuxBinEdges",{"type":17,"value":1715},"); dashed gold percentile rules (",{"type":11,"tag":35,"props":1717,"children":1719},{"className":1718},[],[1720],{"type":17,"value":1721},"tuxQuantile",{"type":17,"value":1723},"); normalize-to-share mode",{"type":11,"tag":146,"props":1725,"children":1726},{},[1727,1735],{"type":11,"tag":173,"props":1728,"children":1729},{},[1730],{"type":11,"tag":35,"props":1731,"children":1733},{"className":1732},[],[1734],{"type":17,"value":40},{"type":11,"tag":173,"props":1736,"children":1737},{},[1738],{"type":17,"value":1739},"Roadmap Priority B — see §4, §5, §6",{"type":11,"tag":146,"props":1741,"children":1742},{},[1743,1751],{"type":11,"tag":173,"props":1744,"children":1745},{},[1746],{"type":11,"tag":35,"props":1747,"children":1749},{"className":1748},[],[1750],{"type":17,"value":48},{"type":11,"tag":173,"props":1752,"children":1753},{},[1754],{"type":17,"value":1755},"Roadmap Priority B — see §3, §5",{"type":11,"tag":146,"props":1757,"children":1758},{},[1759,1767],{"type":11,"tag":173,"props":1760,"children":1761},{},[1762],{"type":11,"tag":35,"props":1763,"children":1765},{"className":1764},[],[1766],{"type":17,"value":56},{"type":11,"tag":173,"props":1768,"children":1769},{},[1770],{"type":17,"value":1771},"Roadmap Priority B — see §7",{"type":11,"tag":146,"props":1773,"children":1774},{},[1775,1783],{"type":11,"tag":173,"props":1776,"children":1777},{},[1778],{"type":11,"tag":35,"props":1779,"children":1781},{"className":1780},[],[1782],{"type":17,"value":63},{"type":11,"tag":173,"props":1784,"children":1785},{},[1786],{"type":17,"value":1787},"Roadmap Priority B",{"type":11,"tag":23,"props":1789,"children":1790},{},[1791],{"type":17,"value":1792},"Build order is roughly Line → Bar → Area → Scatter, but consumer\npressure (Landscape dashboard data shape) may re-order.",{"type":11,"tag":95,"props":1794,"children":1795},{},[],{"type":11,"tag":99,"props":1797,"children":1799},{"id":1798},"how-this-doc-evolves",[1800],{"type":17,"value":1801},"How this doc evolves",{"type":11,"tag":23,"props":1803,"children":1804},{},[1805,1807,1813],{"type":17,"value":1806},"When a ",{"type":11,"tag":35,"props":1808,"children":1810},{"className":1809},[],[1811],{"type":17,"value":1812},"TuxChart*",{"type":17,"value":1814}," component ships, expand its §section above with\nthe worked code example and the actual prop shape. The skeleton's\njob is to set doctrine; ship-time fills the body.",{"type":11,"tag":23,"props":1816,"children":1817},{},[1818],{"type":17,"value":1819},"Cross-references:",{"type":11,"tag":359,"props":1821,"children":1822},{},[1823,1832,1841],{"type":11,"tag":363,"props":1824,"children":1825},{},[1826],{"type":11,"tag":125,"props":1827,"children":1829},{"href":1828},"components.md",[1830],{"type":17,"value":1831},"Components map",{"type":11,"tag":363,"props":1833,"children":1834},{},[1835],{"type":11,"tag":125,"props":1836,"children":1838},{"href":1837},"roadmap.md#charts--data-viz",[1839],{"type":17,"value":1840},"Roadmap — Priority B charts",{"type":11,"tag":363,"props":1842,"children":1843},{},[1844,1846,1852,1854,1860,1861],{"type":17,"value":1845},"Figma absorption notes:\n",{"type":11,"tag":125,"props":1847,"children":1849},{"href":1848},"..\u002Freference\u002Ffigma-cache\u002Fcharts-ui-kit\u002FNOTES.md",[1850],{"type":17,"value":1851},"Charts UI Kit",{"type":17,"value":1853}," ·\n",{"type":11,"tag":125,"props":1855,"children":1857},{"href":1856},"..\u002Freference\u002Ffigma-cache\u002Fdata-visualization-graphs-charts-kit\u002FNOTES.md",[1858],{"type":17,"value":1859},"Data Viz Graphs",{"type":17,"value":1853},{"type":11,"tag":125,"props":1862,"children":1864},{"href":1863},"..\u002Freference\u002Ffigma-cache\u002Fsnow-dashboard-ui-kit\u002FNOTES.md",[1865],{"type":17,"value":1866},"Snow Dashboard",{"type":11,"tag":1868,"props":1869,"children":1870},"style",{},[1871],{"type":17,"value":1872},"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);}",{"title":6,"searchDepth":1304,"depth":1304,"links":1874},[1875,1877,1881,1882,1883,1884,1885,1886,1887,1889,1890],{"id":101,"depth":1304,"text":1876},"1. Palette — --chart-1 through --chart-8",{"id":437,"depth":1304,"text":440,"children":1878},[1879,1880],{"id":740,"depth":1314,"text":743},{"id":826,"depth":1314,"text":829},{"id":888,"depth":1304,"text":891},{"id":1020,"depth":1304,"text":1023},{"id":1075,"depth":1304,"text":1078},{"id":1196,"depth":1304,"text":1199},{"id":1260,"depth":1304,"text":1263},{"id":1420,"depth":1304,"text":1423},{"id":1517,"depth":1304,"text":1888},"9. Editorial framing — TuxChartFrame",{"id":1576,"depth":1304,"text":1579},{"id":1798,"depth":1304,"text":1801},1788285300508]