[{"data":1,"prerenderedAt":733},["ShallowReactive",2],{"navigation_docs":3,"-charts-funnel-chart":177,"-charts-funnel-chart-surround":728},[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":129,"body":179,"description":721,"extension":722,"links":723,"meta":724,"navigation":725,"path":130,"seo":726,"stem":131,"__hash__":727},"docs/3.charts/8.funnel-chart.md",{"type":180,"value":181,"toc":709},"minimark",[182,186,191,199,204,208,219,223,227,234,239,243,249,254,258,268,272,276,336,340,649,653],[183,184,185],"p",{},"Funnel charts display data as stacked trapezoids that narrow progressively, ideal for conversion funnels.",[187,188,190],"h2",{"id":189},"simple-funnel-chart","Simple Funnel Chart",[183,192,193,194,198],{},"A basic funnel chart with colored segments using ",[195,196,197],"code",{},"\u003CCell>",".",[200,201],"chart-demo",{"description":202,"name":190,"src":203},"A conversion funnel with four stages.","funnel-charts/simple-funnel-chart",[187,205,207],{"id":206},"funnel-chart-with-labels","Funnel Chart with Labels",[183,209,210,211,214,215,218],{},"Place ",[195,212,213],{},"\u003CLabelList>"," as a child inside ",[195,216,217],{},"\u003CFunnel>",". Labels appear after the entrance animation completes.",[200,220],{"description":221,"name":207,"src":222},"A funnel chart with value labels inside each segment.","funnel-charts/label-funnel-chart",[187,224,226],{"id":225},"rectangle-last-shape","Rectangle Last Shape",[183,228,229,230,233],{},"Set ",[195,231,232],{},"lastShapeType=\"rectangle\""," so the last segment keeps its width instead of narrowing to a point.",[200,235],{"description":236,"name":237,"src":238},"A funnel chart where the bottom segment is a rectangle.","Rectangle Funnel Chart","funnel-charts/rectangle-funnel-chart",[187,240,242],{"id":241},"reversed-funnel","Reversed Funnel",[183,244,229,245,248],{},[195,246,247],{},":reversed=\"true\""," to flip the funnel — narrowest at the top, widest at the bottom.",[200,250],{"description":251,"name":252,"src":253},"An inverted funnel with the smallest segment at the top.","Reversed Funnel Chart","funnel-charts/reversed-funnel-chart",[187,255,257],{"id":256},"funnel-chart-with-legend","Funnel Chart with Legend",[183,259,260,261,264,265,267],{},"Add ",[195,262,263],{},"\u003CLegend>"," alongside ",[195,266,217],{}," to show a legend keyed by data names.",[200,269],{"description":270,"name":257,"src":271},"A funnel chart with a legend component.","funnel-charts/legend-funnel-chart",[187,273,275],{"id":274},"funnelchart-props","FunnelChart props",[277,278,279,298],"table",{},[280,281,282],"thead",{},[283,284,285,289,292,295],"tr",{},[286,287,288],"th",{},"Prop",[286,290,291],{},"Type",[286,293,294],{},"Default",[286,296,297],{},"Description",[299,300,301,320],"tbody",{},[283,302,303,309,314,317],{},[304,305,306],"td",{},[195,307,308],{},"width",[304,310,311],{},[195,312,313],{},"number",[304,315,316],{},"—",[304,318,319],{},"Chart width",[283,321,322,327,331,333],{},[304,323,324],{},[195,325,326],{},"height",[304,328,329],{},[195,330,313],{},[304,332,316],{},[304,334,335],{},"Chart height",[187,337,339],{"id":338},"funnel-props","Funnel props",[277,341,342,354],{},[280,343,344],{},[283,345,346,348,350,352],{},[286,347,288],{},[286,349,291],{},[286,351,294],{},[286,353,297],{},[299,355,356,377,394,414,434,454,473,492,508,526,545,565,582,598,617,633],{},[283,357,358,363,368,374],{},[304,359,360],{},[195,361,362],{},"dataKey",[304,364,365],{},[195,366,367],{},"string | number | Function",[304,369,370],{},[371,372,373],"strong",{},"required",[304,375,376],{},"Key from data for values",[283,378,379,384,389,391],{},[304,380,381],{},[195,382,383],{},"data",[304,385,386],{},[195,387,388],{},"Array",[304,390,316],{},[304,392,393],{},"Funnel data array",[283,395,396,401,406,411],{},[304,397,398],{},[195,399,400],{},"nameKey",[304,402,403],{},[195,404,405],{},"string",[304,407,408],{},[195,409,410],{},"'name'",[304,412,413],{},"Key for segment names",[283,415,416,421,426,431],{},[304,417,418],{},[195,419,420],{},"lastShapeType",[304,422,423],{},[195,424,425],{},"'triangle' | 'rectangle'",[304,427,428],{},[195,429,430],{},"'triangle'",[304,432,433],{},"Shape of last segment",[283,435,436,441,446,451],{},[304,437,438],{},[195,439,440],{},"reversed",[304,442,443],{},[195,444,445],{},"boolean",[304,447,448],{},[195,449,450],{},"false",[304,452,453],{},"Flip funnel orientation",[283,455,456,461,465,470],{},[304,457,458],{},[195,459,460],{},"fill",[304,462,463],{},[195,464,405],{},[304,466,467],{},[195,468,469],{},"'#808080'",[304,471,472],{},"Default fill color",[283,474,475,480,484,489],{},[304,476,477],{},[195,478,479],{},"stroke",[304,481,482],{},[195,483,405],{},[304,485,486],{},[195,487,488],{},"'#fff'",[304,490,491],{},"Stroke color",[283,493,494,498,503,505],{},[304,495,496],{},[195,497,308],{},[304,499,500],{},[195,501,502],{},"number | string",[304,504,316],{},[304,506,507],{},"Custom funnel width",[283,509,510,515,519,523],{},[304,511,512],{},[195,513,514],{},"hide",[304,516,517],{},[195,518,445],{},[304,520,521],{},[195,522,450],{},[304,524,525],{},"Hide the funnel",[283,527,528,533,537,542],{},[304,529,530],{},[195,531,532],{},"isAnimationActive",[304,534,535],{},[195,536,445],{},[304,538,539],{},[195,540,541],{},"true",[304,543,544],{},"Enable entrance animation",[283,546,547,552,557,562],{},[304,548,549],{},[195,550,551],{},"transition",[304,553,554],{},[195,555,556],{},"AnimationOptions",[304,558,559],{},[195,560,561],{},"{ duration: 0.8, ease: 'easeOut' }",[304,563,564],{},"Animation timing config (motion-v)",[283,566,567,572,577,579],{},[304,568,569],{},[195,570,571],{},"onAnimationStart",[304,573,574],{},[195,575,576],{},"() => void",[304,578,316],{},[304,580,581],{},"Callback when animation starts",[283,583,584,589,593,595],{},[304,585,586],{},[195,587,588],{},"onAnimationEnd",[304,590,591],{},[195,592,576],{},[304,594,316],{},[304,596,597],{},"Callback when animation ends",[283,599,600,605,609,614],{},[304,601,602],{},[195,603,604],{},"legendType",[304,606,607],{},[195,608,405],{},[304,610,611],{},[195,612,613],{},"'rect'",[304,615,616],{},"Legend icon type",[283,618,619,624,628,630],{},[304,620,621],{},[195,622,623],{},"tooltipType",[304,625,626],{},[195,627,405],{},[304,629,316],{},[304,631,632],{},"Tooltip type",[283,634,635,640,644,646],{},[304,636,637],{},[195,638,639],{},"class",[304,641,642],{},[195,643,405],{},[304,645,316],{},[304,647,648],{},"Additional CSS class",[187,650,652],{"id":651},"slots","Slots",[277,654,655,667],{},[280,656,657],{},[283,658,659,662,665],{},[286,660,661],{},"Slot",[286,663,664],{},"Props",[286,666,297],{},[299,668,669,692],{},[283,670,671,676,681],{},[304,672,673],{},[195,674,675],{},"#shape",[304,677,678],{},[195,679,680],{},"FunnelTrapezoidItem & { animationProgress }",[304,682,683,684,687,688,691],{},"Custom trapezoid rendering. ",[195,685,686],{},"animationProgress"," goes from 0 to 1; use ",[195,689,690],{},"v-if=\"props.animationProgress >= 1\""," to show labels only after animation.",[283,693,694,699,701],{},[304,695,696],{},[195,697,698],{},"default",[304,700,316],{},[304,702,703,705,706,708],{},[195,704,197],{}," for per-segment colors, ",[195,707,213],{}," for labels",{"title":710,"searchDepth":711,"depth":711,"links":712},"",2,[713,714,715,716,717,718,719,720],{"id":189,"depth":711,"text":190},{"id":206,"depth":711,"text":207},{"id":225,"depth":711,"text":226},{"id":241,"depth":711,"text":242},{"id":256,"depth":711,"text":257},{"id":274,"depth":711,"text":275},{"id":338,"depth":711,"text":339},{"id":651,"depth":711,"text":652},"Build funnel charts for conversion and drop-off visualization","md",null,{},{"icon":132},{"title":129,"description":721},"Ud-eZnkkSdbhHAFSzGh3j63ciB6nGAB84oL_tw6OzRY",[729,731],{"title":124,"path":125,"stem":126,"description":730,"icon":127,"children":-1},"Plot data points on an X-Y plane to visualize relationships",{"title":134,"path":135,"stem":136,"description":732,"icon":56,"children":-1},"Combine Area, Bar, and Line series in a single chart",1775929455907]