[{"data":1,"prerenderedAt":830},["ShallowReactive",2],{"navigation_docs":3,"-charts-sankey":177,"-charts-sankey-surround":825},[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":94,"body":179,"description":818,"extension":819,"links":820,"meta":821,"navigation":822,"path":95,"seo":823,"stem":96,"__hash__":824},"docs/3.charts/11.sankey.md",{"type":180,"value":181,"toc":811},"minimark",[182,186,191,199,204,208,215,220,224,519,523,585,589,791,807],[183,184,185],"p",{},"Sankey diagrams visualize flow quantities between a set of nodes, where the width of each link is proportional to its value. They are ideal for showing energy flows, user journeys, budget allocations, and similar many-to-many relationships.",[187,188,190],"h2",{"id":189},"simple-sankey","Simple Sankey",[183,192,193,194,198],{},"A basic Sankey diagram with nodes and weighted links. The layout is computed by ",[195,196,197],"code",{},"d3-sankey",".",[200,201],"chart-demo",{"description":202,"name":190,"src":203},"A Sankey diagram of a user funnel flow.","sankey-charts/simple-sankey-chart",[187,205,207],{"id":206},"custom-node","Custom Node",[183,209,210,211,214],{},"Use the ",[195,212,213],{},"#node"," slot to fully customize how each node is rendered. The slot receives coordinates, dimensions, and the node payload.",[200,216],{"description":217,"name":218,"src":219},"A Sankey diagram with custom node rendering showing labels.","Custom Node Sankey","sankey-charts/custom-node-sankey-chart",[187,221,223],{"id":222},"sankey-props","Sankey props",[225,226,227,246],"table",{},[228,229,230],"thead",{},[231,232,233,237,240,243],"tr",{},[234,235,236],"th",{},"Prop",[234,238,239],{},"Type",[234,241,242],{},"Default",[234,244,245],{},"Description",[247,248,249,290,309,327,346,364,383,403,423,442,460,479,499],"tbody",{},[231,250,251,257,262,268],{},[252,253,254],"td",{},[195,255,256],{},"data",[252,258,259],{},[195,260,261],{},"{ nodes, links }",[252,263,264],{},[265,266,267],"strong",{},"required",[252,269,270,271,274,275,278,279,282,283,286,287,198],{},"Graph data with ",[195,272,273],{},"nodes"," and ",[195,276,277],{},"links"," arrays. Links use numeric ",[195,280,281],{},"source","/",[195,284,285],{},"target"," indices and a ",[195,288,289],{},"value",[231,291,292,297,302,306],{},[252,293,294],{},[195,295,296],{},"width",[252,298,299],{},[195,300,301],{},"number",[252,303,304],{},[265,305,267],{},[252,307,308],{},"Chart width in pixels",[231,310,311,316,320,324],{},[252,312,313],{},[195,314,315],{},"height",[252,317,318],{},[195,319,301],{},[252,321,322],{},[265,323,267],{},[252,325,326],{},"Chart height in pixels",[231,328,329,334,338,343],{},[252,330,331],{},[195,332,333],{},"nodeWidth",[252,335,336],{},[195,337,301],{},[252,339,340],{},[195,341,342],{},"10",[252,344,345],{},"Width of each node rectangle",[231,347,348,353,357,361],{},[252,349,350],{},[195,351,352],{},"nodePadding",[252,354,355],{},[195,356,301],{},[252,358,359],{},[195,360,342],{},[252,362,363],{},"Vertical padding between nodes in the same column",[231,365,366,371,375,380],{},[252,367,368],{},[195,369,370],{},"iterations",[252,372,373],{},[195,374,301],{},[252,376,377],{},[195,378,379],{},"32",[252,381,382],{},"Number of d3-sankey layout iterations for relaxation",[231,384,385,390,395,400],{},[252,386,387],{},[195,388,389],{},"margin",[252,391,392],{},[195,393,394],{},"{ top, right, bottom, left }",[252,396,397],{},[195,398,399],{},"{ top: 5, right: 5, bottom: 5, left: 5 }",[252,401,402],{},"Chart margins",[231,404,405,410,415,420],{},[252,406,407],{},[195,408,409],{},"nodeFill",[252,411,412],{},[195,413,414],{},"string",[252,416,417],{},[195,418,419],{},"'#0088fe'",[252,421,422],{},"Default fill color for node rectangles",[231,424,425,430,434,439],{},[252,426,427],{},[195,428,429],{},"nodeStroke",[252,431,432],{},[195,433,414],{},[252,435,436],{},[195,437,438],{},"'#fff'",[252,440,441],{},"Stroke color for node rectangles",[231,443,444,449,453,457],{},[252,445,446],{},[195,447,448],{},"linkFill",[252,450,451],{},[195,452,414],{},[252,454,455],{},[195,456,419],{},[252,458,459],{},"Default fill color for link paths",[231,461,462,467,471,476],{},[252,463,464],{},[195,465,466],{},"linkStroke",[252,468,469],{},[195,470,414],{},[252,472,473],{},[195,474,475],{},"'none'",[252,477,478],{},"Stroke color for link paths",[231,480,481,486,491,496],{},[252,482,483],{},[195,484,485],{},"isAnimationActive",[252,487,488],{},[195,489,490],{},"boolean",[252,492,493],{},[195,494,495],{},"true",[252,497,498],{},"Enable entrance animation",[231,500,501,506,511,516],{},[252,502,503],{},[195,504,505],{},"transition",[252,507,508],{},[195,509,510],{},"AnimationOptions",[252,512,513],{},[195,514,515],{},"{ duration: 0.8, ease: 'easeOut' }",[252,517,518],{},"Animation timing (motion-v)",[187,520,522],{"id":521},"slots","Slots",[225,524,525,537],{},[228,526,527],{},[231,528,529,532,535],{},[234,530,531],{},"Slot",[234,533,534],{},"Props",[234,536,245],{},[247,538,539,553,568],{},[231,540,541,545,550],{},[252,542,543],{},[195,544,213],{},[252,546,547],{},[195,548,549],{},"{ x, y, width, height, index, payload }",[252,551,552],{},"Custom node rendering",[231,554,555,560,565],{},[252,556,557],{},[195,558,559],{},"#link",[252,561,562],{},[195,563,564],{},"{ d, sourceX, targetX, sourceY, targetY, linkWidth, index, payload }",[252,566,567],{},"Custom link path rendering",[231,569,570,575,578],{},[252,571,572],{},[195,573,574],{},"default",[252,576,577],{},"—",[252,579,580,581,584],{},"Place ",[195,582,583],{},"\u003CTooltip>"," or other child components here.",[187,586,588],{"id":587},"data-structure","Data structure",[590,591,596],"pre",{"className":592,"code":593,"language":594,"meta":595,"style":595},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const data = {\n  nodes: [\n    { name: 'A' },\n    { name: 'B' },\n    { name: 'C' },\n  ],\n  links: [\n    { source: 0, target: 1, value: 10 },\n    { source: 1, target: 2, value: 6 },\n  ],\n}\n","ts","",[195,597,598,618,631,655,673,691,700,710,747,778,785],{"__ignoreMap":595},[599,600,603,607,611,615],"span",{"class":601,"line":602},"line",1,[599,604,606],{"class":605},"spNyl","const",[599,608,610],{"class":609},"sTEyZ"," data ",[599,612,614],{"class":613},"sMK4o","=",[599,616,617],{"class":613}," {\n",[599,619,621,625,628],{"class":601,"line":620},2,[599,622,624],{"class":623},"swJcz","  nodes",[599,626,627],{"class":613},":",[599,629,630],{"class":609}," [\n",[599,632,634,637,640,642,645,649,652],{"class":601,"line":633},3,[599,635,636],{"class":613},"    {",[599,638,639],{"class":623}," name",[599,641,627],{"class":613},[599,643,644],{"class":613}," '",[599,646,648],{"class":647},"sfazB","A",[599,650,651],{"class":613},"'",[599,653,654],{"class":613}," },\n",[599,656,658,660,662,664,666,669,671],{"class":601,"line":657},4,[599,659,636],{"class":613},[599,661,639],{"class":623},[599,663,627],{"class":613},[599,665,644],{"class":613},[599,667,668],{"class":647},"B",[599,670,651],{"class":613},[599,672,654],{"class":613},[599,674,676,678,680,682,684,687,689],{"class":601,"line":675},5,[599,677,636],{"class":613},[599,679,639],{"class":623},[599,681,627],{"class":613},[599,683,644],{"class":613},[599,685,686],{"class":647},"C",[599,688,651],{"class":613},[599,690,654],{"class":613},[599,692,694,697],{"class":601,"line":693},6,[599,695,696],{"class":609},"  ]",[599,698,699],{"class":613},",\n",[599,701,703,706,708],{"class":601,"line":702},7,[599,704,705],{"class":623},"  links",[599,707,627],{"class":613},[599,709,630],{"class":609},[599,711,713,715,718,720,724,727,730,732,735,737,740,742,745],{"class":601,"line":712},8,[599,714,636],{"class":613},[599,716,717],{"class":623}," source",[599,719,627],{"class":613},[599,721,723],{"class":722},"sbssI"," 0",[599,725,726],{"class":613},",",[599,728,729],{"class":623}," target",[599,731,627],{"class":613},[599,733,734],{"class":722}," 1",[599,736,726],{"class":613},[599,738,739],{"class":623}," value",[599,741,627],{"class":613},[599,743,744],{"class":722}," 10",[599,746,654],{"class":613},[599,748,750,752,754,756,758,760,762,764,767,769,771,773,776],{"class":601,"line":749},9,[599,751,636],{"class":613},[599,753,717],{"class":623},[599,755,627],{"class":613},[599,757,734],{"class":722},[599,759,726],{"class":613},[599,761,729],{"class":623},[599,763,627],{"class":613},[599,765,766],{"class":722}," 2",[599,768,726],{"class":613},[599,770,739],{"class":623},[599,772,627],{"class":613},[599,774,775],{"class":722}," 6",[599,777,654],{"class":613},[599,779,781,783],{"class":601,"line":780},10,[599,782,696],{"class":609},[599,784,699],{"class":613},[599,786,788],{"class":601,"line":787},11,[599,789,790],{"class":613},"}\n",[183,792,793,274,795,797,798,800,801,803,804,806],{},[195,794,281],{},[195,796,285],{}," are numeric indices into the ",[195,799,273],{}," array. ",[195,802,289],{}," determines the link width. Both nodes and links support ",[195,805,583],{}," hover interaction.",[808,809,810],"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":595,"searchDepth":620,"depth":620,"links":812},[813,814,815,816,817],{"id":189,"depth":620,"text":190},{"id":206,"depth":620,"text":207},{"id":222,"depth":620,"text":223},{"id":521,"depth":620,"text":522},{"id":587,"depth":620,"text":588},"Flow diagrams showing the magnitude of flow between nodes","md",null,{},{"icon":97},{"title":94,"description":818},"RHt2BiHQp-7zNgC7Tz7jExBMuD2U_Xu6XWOTOGBzE6U",[826,828],{"title":89,"path":90,"stem":91,"description":827,"icon":92,"children":-1},"Visualize hierarchical data as nested rectangles",{"title":99,"path":100,"stem":101,"description":829,"icon":102,"children":-1},"Build bar charts with stacking, labels, and custom shapes",1775929453605]