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