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