[{"data":1,"prerenderedAt":866},["ShallowReactive",2],{"navigation_docs":3,"-charts-treemap":177,"-charts-treemap-surround":861},[4,21,77,137],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":20},"Getting Started","i-lucide-rocket","/getting-started","1.getting-started",[10,15],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","/getting-started/introduction","1.getting-started/1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","/getting-started/installation","1.getting-started/2.installation","i-lucide-download",false,{"title":22,"icon":23,"path":24,"stem":25,"children":26,"page":20},"Guides","i-lucide-book-open","/guides","2.guides",[27,32,37,42,47,52,57,62,67,72],{"title":28,"path":29,"stem":30,"icon":31},"Customize","/guides/customize","2.guides/01.customize","i-lucide-paintbrush",{"title":33,"path":34,"stem":35,"icon":36},"Active Index","/guides/active-state","2.guides/02.active-state","i-lucide-mouse-pointer",{"title":38,"path":39,"stem":40,"icon":41},"Domain and Ticks","/guides/domain-and-ticks","2.guides/03.domain-and-ticks","i-lucide-ruler",{"title":43,"path":44,"stem":45,"icon":46},"Axis Ticks","/guides/axis-ticks","2.guides/04.axis-ticks","i-lucide-hash",{"title":48,"path":49,"stem":50,"icon":51},"Chart Size","/guides/chart-size","2.guides/05.chart-size","i-lucide-maximize",{"title":53,"path":54,"stem":55,"icon":56},"Z-Index and Layers","/guides/z-order-and-layers","2.guides/06.z-order-and-layers","i-lucide-layers",{"title":58,"path":59,"stem":60,"icon":61},"Coordinate Systems","/guides/coordinate-systems","2.guides/07.coordinate-systems","i-lucide-crosshair",{"title":63,"path":64,"stem":65,"icon":66},"Performance","/guides/performance","2.guides/08.performance","i-lucide-zap",{"title":68,"path":69,"stem":70,"icon":71},"Rounded Bar Corners","/guides/rounded-bar-corners","2.guides/09.rounded-bar-corners","i-lucide-square",{"title":73,"path":74,"stem":75,"icon":76},"Bar Alignment","/guides/bar-alignment","2.guides/10.bar-alignment","i-lucide-align-center",{"title":78,"icon":79,"path":80,"stem":81,"children":82,"page":20},"Charts","i-lucide-bar-chart-3","/charts","3.charts",[83,88,93,98,103,108,113,118,123,128,133],{"title":84,"path":85,"stem":86,"icon":87},"Area Chart","/charts/area-chart","3.charts/1.area-chart","i-lucide-area-chart",{"title":89,"path":90,"stem":91,"icon":92},"Treemap","/charts/treemap","3.charts/10.treemap","i-lucide-layout-grid",{"title":94,"path":95,"stem":96,"icon":97},"Sankey","/charts/sankey","3.charts/11.sankey","i-lucide-git-fork",{"title":99,"path":100,"stem":101,"icon":102},"Bar Chart","/charts/bar-chart","3.charts/2.bar-chart","i-lucide-bar-chart",{"title":104,"path":105,"stem":106,"icon":107},"Line Chart","/charts/line-chart","3.charts/3.line-chart","i-lucide-trending-up",{"title":109,"path":110,"stem":111,"icon":112},"Pie Chart","/charts/pie-chart","3.charts/4.pie-chart","i-lucide-pie-chart",{"title":114,"path":115,"stem":116,"icon":117},"Radar Chart","/charts/radar-chart","3.charts/5.radar-chart","i-lucide-radar",{"title":119,"path":120,"stem":121,"icon":122},"Radial Bar Chart","/charts/radial-bar-chart","3.charts/6.radial-bar-chart","i-lucide-circle-dot",{"title":124,"path":125,"stem":126,"icon":127},"Scatter Chart","/charts/scatter-chart","3.charts/7.scatter-chart","i-lucide-scatter-chart",{"title":129,"path":130,"stem":131,"icon":132},"Funnel Chart","/charts/funnel-chart","3.charts/8.funnel-chart","i-lucide-filter",{"title":134,"path":135,"stem":136,"icon":56},"Composed Chart","/charts/composed-chart","3.charts/9.composed-chart",{"title":138,"icon":139,"path":140,"stem":141,"children":142,"page":20},"Components","i-lucide-code","/components","4.components",[143,148,153,158,163,167,172],{"title":144,"path":145,"stem":146,"icon":147},"Tooltip","/components/tooltip","4.components/1.tooltip","i-lucide-message-square",{"title":149,"path":150,"stem":151,"icon":152},"Legend","/components/legend","4.components/2.legend","i-lucide-list",{"title":154,"path":155,"stem":156,"icon":157},"CartesianGrid","/components/cartesian-grid","4.components/3.cartesian-grid","i-lucide-grid-3x3",{"title":159,"path":160,"stem":161,"icon":162},"Axes","/components/axis","4.components/4.axis","i-lucide-move",{"title":164,"path":165,"stem":166,"icon":61},"Reference Elements","/components/reference-elements","4.components/5.reference-elements",{"title":168,"path":169,"stem":170,"icon":171},"Text","/components/text","4.components/6.text","i-lucide-type",{"title":173,"path":174,"stem":175,"icon":176},"Customized","/components/customized","4.components/7.customized","i-lucide-pencil-ruler",{"id":178,"title":89,"body":179,"description":854,"extension":855,"links":856,"meta":857,"navigation":858,"path":90,"seo":859,"stem":91,"__hash__":860},"docs/3.charts/10.treemap.md",{"type":180,"value":181,"toc":846},"minimark",[182,186,191,199,204,208,215,220,224,231,236,240,558,562,611,615,832,842],[183,184,185],"p",{},"Treemap displays hierarchical data as nested rectangles where the area of each rectangle is proportional to its value.",[187,188,190],"h2",{"id":189},"simple-treemap","Simple Treemap",[183,192,193,194,198],{},"A basic treemap with nested data groups. Each group gets a distinct color from the ",[195,196,197],"code",{},"colorPanel",".",[200,201],"chart-demo",{"description":202,"name":190,"src":203},"A treemap of hierarchical data with four groups.","treemap-charts/simple-treemap-chart",[187,205,207],{"id":206},"custom-content","Custom Content",[183,209,210,211,214],{},"Use the ",[195,212,213],{},"#content"," slot to fully customize how each node is rendered. The slot receives coordinates, dimensions, name, value, and fill color.",[200,216],{"description":217,"name":218,"src":219},"A treemap with custom node rendering showing name and value.","Custom Content Treemap","treemap-charts/custom-content-treemap-chart",[187,221,223],{"id":222},"nest-mode","Nest Mode",[183,225,226,227,230],{},"Set ",[195,228,229],{},"type=\"nest\""," for interactive drill-down. Click a group to zoom into its children. A breadcrumb trail appears for navigating back.",[200,232],{"description":233,"name":234,"src":235},"An interactive treemap with drill-down navigation.","Nest Mode Treemap","treemap-charts/nest-treemap-chart",[187,237,239],{"id":238},"treemap-props","Treemap props",[241,242,243,262],"table",{},[244,245,246],"thead",{},[247,248,249,253,256,259],"tr",{},[250,251,252],"th",{},"Prop",[250,254,255],{},"Type",[250,257,258],{},"Default",[250,260,261],{},"Description",[263,264,265,291,311,330,349,367,386,413,432,451,468,488,508,526,542],"tbody",{},[247,266,267,273,278,284],{},[268,269,270],"td",{},[195,271,272],{},"data",[268,274,275],{},[195,276,277],{},"Array",[268,279,280],{},[281,282,283],"strong",{},"required",[268,285,286,287,290],{},"Hierarchical data with optional ",[195,288,289],{},"children"," arrays",[247,292,293,298,303,308],{},[268,294,295],{},[195,296,297],{},"dataKey",[268,299,300],{},[195,301,302],{},"string",[268,304,305],{},[195,306,307],{},"'value'",[268,309,310],{},"Property name for numeric values",[247,312,313,318,322,327],{},[268,314,315],{},[195,316,317],{},"nameKey",[268,319,320],{},[195,321,302],{},[268,323,324],{},[195,325,326],{},"'name'",[268,328,329],{},"Property name for node labels",[247,331,332,337,342,346],{},[268,333,334],{},[195,335,336],{},"width",[268,338,339],{},[195,340,341],{},"number",[268,343,344],{},[281,345,283],{},[268,347,348],{},"Chart width in pixels",[247,350,351,356,360,364],{},[268,352,353],{},[195,354,355],{},"height",[268,357,358],{},[195,359,341],{},[268,361,362],{},[281,363,283],{},[268,365,366],{},"Chart height in pixels",[247,368,369,374,378,383],{},[268,370,371],{},[195,372,373],{},"aspectRatio",[268,375,376],{},[195,377,341],{},[268,379,380],{},[195,381,382],{},"4/3",[268,384,385],{},"Target rectangle aspect ratio for squarify layout",[247,387,388,393,398,403],{},[268,389,390],{},[195,391,392],{},"type",[268,394,395],{},[195,396,397],{},"'flat' | 'nest'",[268,399,400],{},[195,401,402],{},"'flat'",[268,404,405,408,409,412],{},[195,406,407],{},"flat"," shows all leaves; ",[195,410,411],{},"nest"," enables drill-down",[247,414,415,420,424,429],{},[268,416,417],{},[195,418,419],{},"fill",[268,421,422],{},[195,423,302],{},[268,425,426],{},[195,427,428],{},"'#808080'",[268,430,431],{},"Default fill color",[247,433,434,439,443,448],{},[268,435,436],{},[195,437,438],{},"stroke",[268,440,441],{},[195,442,302],{},[268,444,445],{},[195,446,447],{},"'#fff'",[268,449,450],{},"Rectangle border color",[247,452,453,457,462,465],{},[268,454,455],{},[195,456,197],{},[268,458,459],{},[195,460,461],{},"string[]",[268,463,464],{},"8-color default",[268,466,467],{},"Color palette assigned by top-level group",[247,469,470,475,480,485],{},[268,471,472],{},[195,473,474],{},"isAnimationActive",[268,476,477],{},[195,478,479],{},"boolean",[268,481,482],{},[195,483,484],{},"true",[268,486,487],{},"Enable entrance animation",[247,489,490,495,500,505],{},[268,491,492],{},[195,493,494],{},"transition",[268,496,497],{},[195,498,499],{},"AnimationOptions",[268,501,502],{},[195,503,504],{},"{ duration: 0.8, ease: 'easeOut' }",[268,506,507],{},"Animation timing (motion-v)",[247,509,510,515,520,523],{},[268,511,512],{},[195,513,514],{},"onClick",[268,516,517],{},[195,518,519],{},"(node, event) => void",[268,521,522],{},"—",[268,524,525],{},"Click event handler",[247,527,528,533,537,539],{},[268,529,530],{},[195,531,532],{},"onMouseEnter",[268,534,535],{},[195,536,519],{},[268,538,522],{},[268,540,541],{},"Mouse enter handler; activates tooltip at node center",[247,543,544,549,553,555],{},[268,545,546],{},[195,547,548],{},"onMouseLeave",[268,550,551],{},[195,552,519],{},[268,554,522],{},[268,556,557],{},"Mouse leave handler; clears tooltip hover state",[187,559,561],{"id":560},"slots","Slots",[241,563,564,576],{},[244,565,566],{},[247,567,568,571,574],{},[250,569,570],{},"Slot",[250,572,573],{},"Props",[250,575,261],{},[263,577,578,595],{},[247,579,580,584,589],{},[268,581,582],{},[195,583,213],{},[268,585,586],{},[195,587,588],{},"TreemapContentSlotProps",[268,590,591,592,198],{},"Custom node rendering. Receives ",[195,593,594],{},"{ x, y, width, height, depth, name, value, index, fill, stroke, payload, root, color }",[247,596,597,602,604],{},[268,598,599],{},[195,600,601],{},"default",[268,603,522],{},[268,605,606,607,610],{},"Place ",[195,608,609],{},"\u003CTooltip>"," or other child components here.",[187,612,614],{"id":613},"data-structure","Data structure",[616,617,622],"pre",{"className":618,"code":619,"language":620,"meta":621,"style":621},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const data = [\n  {\n    name: 'Group A',\n    children: [\n      { name: 'Item 1', value: 100 },\n      { name: 'Item 2', value: 200 },\n    ],\n  },\n  {\n    name: 'Group B',\n    children: [\n      { name: 'Item 3', value: 300 },\n    ],\n  },\n]\n","ts","",[195,623,624,644,650,673,683,716,743,751,757,762,778,787,814,821,826],{"__ignoreMap":621},[625,626,629,633,637,641],"span",{"class":627,"line":628},"line",1,[625,630,632],{"class":631},"spNyl","const",[625,634,636],{"class":635},"sTEyZ"," data ",[625,638,640],{"class":639},"sMK4o","=",[625,642,643],{"class":635}," [\n",[625,645,647],{"class":627,"line":646},2,[625,648,649],{"class":639},"  {\n",[625,651,653,657,660,663,667,670],{"class":627,"line":652},3,[625,654,656],{"class":655},"swJcz","    name",[625,658,659],{"class":639},":",[625,661,662],{"class":639}," '",[625,664,666],{"class":665},"sfazB","Group A",[625,668,669],{"class":639},"'",[625,671,672],{"class":639},",\n",[625,674,676,679,681],{"class":627,"line":675},4,[625,677,678],{"class":655},"    children",[625,680,659],{"class":639},[625,682,643],{"class":635},[625,684,686,689,692,694,696,699,701,704,707,709,713],{"class":627,"line":685},5,[625,687,688],{"class":639},"      {",[625,690,691],{"class":655}," name",[625,693,659],{"class":639},[625,695,662],{"class":639},[625,697,698],{"class":665},"Item 1",[625,700,669],{"class":639},[625,702,703],{"class":639},",",[625,705,706],{"class":655}," value",[625,708,659],{"class":639},[625,710,712],{"class":711},"sbssI"," 100",[625,714,715],{"class":639}," },\n",[625,717,719,721,723,725,727,730,732,734,736,738,741],{"class":627,"line":718},6,[625,720,688],{"class":639},[625,722,691],{"class":655},[625,724,659],{"class":639},[625,726,662],{"class":639},[625,728,729],{"class":665},"Item 2",[625,731,669],{"class":639},[625,733,703],{"class":639},[625,735,706],{"class":655},[625,737,659],{"class":639},[625,739,740],{"class":711}," 200",[625,742,715],{"class":639},[625,744,746,749],{"class":627,"line":745},7,[625,747,748],{"class":635},"    ]",[625,750,672],{"class":639},[625,752,754],{"class":627,"line":753},8,[625,755,756],{"class":639},"  },\n",[625,758,760],{"class":627,"line":759},9,[625,761,649],{"class":639},[625,763,765,767,769,771,774,776],{"class":627,"line":764},10,[625,766,656],{"class":655},[625,768,659],{"class":639},[625,770,662],{"class":639},[625,772,773],{"class":665},"Group B",[625,775,669],{"class":639},[625,777,672],{"class":639},[625,779,781,783,785],{"class":627,"line":780},11,[625,782,678],{"class":655},[625,784,659],{"class":639},[625,786,643],{"class":635},[625,788,790,792,794,796,798,801,803,805,807,809,812],{"class":627,"line":789},12,[625,791,688],{"class":639},[625,793,691],{"class":655},[625,795,659],{"class":639},[625,797,662],{"class":639},[625,799,800],{"class":665},"Item 3",[625,802,669],{"class":639},[625,804,703],{"class":639},[625,806,706],{"class":655},[625,808,659],{"class":639},[625,810,811],{"class":711}," 300",[625,813,715],{"class":639},[625,815,817,819],{"class":627,"line":816},13,[625,818,748],{"class":635},[625,820,672],{"class":639},[625,822,824],{"class":627,"line":823},14,[625,825,756],{"class":639},[625,827,829],{"class":627,"line":828},15,[625,830,831],{"class":635},"]\n",[183,833,834,835,838,839,841],{},"Leaf nodes must have a numeric ",[195,836,837],{},"value"," (or whatever ",[195,840,297],{}," specifies). Parent nodes derive their value by summing all descendants.",[843,844,845],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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":621,"searchDepth":646,"depth":646,"links":847},[848,849,850,851,852,853],{"id":189,"depth":646,"text":190},{"id":206,"depth":646,"text":207},{"id":222,"depth":646,"text":223},{"id":238,"depth":646,"text":239},{"id":560,"depth":646,"text":561},{"id":613,"depth":646,"text":614},"Visualize hierarchical data as nested rectangles","md",null,{},{"icon":92},{"title":89,"description":854},"7D0Cbe79r-ryNqz-Jf61p6lqGd1gw7vkVq8pf1VznNU",[862,864],{"title":84,"path":85,"stem":86,"description":863,"icon":87,"children":-1},"Build area charts to display quantitative data with filled regions",{"title":94,"path":95,"stem":96,"description":865,"icon":97,"children":-1},"Flow diagrams showing the magnitude of flow between nodes",1775929453605]