[{"data":1,"prerenderedAt":809},["ShallowReactive",2],{"navigation_docs":3,"-charts-funnel-chart":284,"-charts-funnel-chart-surround":804},[4,31,117,216],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":30},"Getting Started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15,20,25],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Migrate from 0.6","\u002Fgetting-started\u002Fmigration","1.getting-started\u002F3.migration","i-lucide-arrow-up-circle",{"title":26,"path":27,"stem":28,"icon":29},"Why vccs","\u002Fgetting-started\u002Fwhy-vccs","1.getting-started\u002F4.why-vccs","i-lucide-scale",false,{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":30},"Guides","i-lucide-book-open","\u002Fguides","2.guides",[37,42,47,52,57,62,67,72,77,82,87,92,97,102,107,112],{"title":38,"path":39,"stem":40,"icon":41},"Customize","\u002Fguides\u002Fcustomize","2.guides\u002F01.customize","i-lucide-paintbrush",{"title":43,"path":44,"stem":45,"icon":46},"Axis Domain and Ticks","\u002Fguides\u002Faxis-domain-and-ticks","2.guides\u002F03.axis-domain-and-ticks","i-lucide-ruler",{"title":48,"path":49,"stem":50,"icon":51},"Chart Size","\u002Fguides\u002Fchart-size","2.guides\u002F05.chart-size","i-lucide-maximize",{"title":53,"path":54,"stem":55,"icon":56},"Z-Order and Layers","\u002Fguides\u002Fz-order-and-layers","2.guides\u002F06.z-order-and-layers","i-lucide-layers",{"title":58,"path":59,"stem":60,"icon":61},"Coordinate Systems","\u002Fguides\u002Fcoordinate-systems","2.guides\u002F07.coordinate-systems","i-lucide-crosshair",{"title":63,"path":64,"stem":65,"icon":66},"Performance","\u002Fguides\u002Fperformance","2.guides\u002F08.performance","i-lucide-zap",{"title":68,"path":69,"stem":70,"icon":71},"Rounded Bar Corners","\u002Fguides\u002Frounded-bar-corners","2.guides\u002F09.rounded-bar-corners","i-lucide-square",{"title":73,"path":74,"stem":75,"icon":76},"Bar Alignment","\u002Fguides\u002Fbar-alignment","2.guides\u002F10.bar-alignment","i-lucide-align-center",{"title":78,"path":79,"stem":80,"icon":81},"Nuxt and SSR","\u002Fguides\u002Fnuxt-and-ssr","2.guides\u002F11.nuxt-and-ssr","i-lucide-server",{"title":83,"path":84,"stem":85,"icon":86},"Animation","\u002Fguides\u002Fanimation","2.guides\u002F12.animation","i-lucide-sparkles",{"title":88,"path":89,"stem":90,"icon":91},"Events and v-model","\u002Fguides\u002Fevents-and-models","2.guides\u002F13.events-and-models","i-lucide-mouse-pointer-click",{"title":93,"path":94,"stem":95,"icon":96},"TypeScript","\u002Fguides\u002Ftypescript","2.guides\u002F14.typescript","i-lucide-file-code",{"title":98,"path":99,"stem":100,"icon":101},"Theming and dark mode","\u002Fguides\u002Ftheming","2.guides\u002F15.theming","i-lucide-palette",{"title":103,"path":104,"stem":105,"icon":106},"shadcn-vue","\u002Fguides\u002Fshadcn-vue","2.guides\u002F16.shadcn-vue","i-lucide-component",{"title":108,"path":109,"stem":110,"icon":111},"Dashboard recipes","\u002Fguides\u002Fdashboard-recipes","2.guides\u002F17.dashboard-recipes","i-lucide-layout-dashboard",{"title":113,"path":114,"stem":115,"icon":116},"Accessibility","\u002Fguides\u002Faccessibility","2.guides\u002F18.accessibility","i-lucide-accessibility",{"title":118,"icon":119,"path":120,"stem":121,"children":122,"page":30},"Charts","i-lucide-bar-chart-3","\u002Fcharts","3.charts",[123,128,133,138,143,148,153,158,163,168,172,177,182,187,192,197,202,206,211],{"title":124,"path":125,"stem":126,"icon":127},"Chart Containers","\u002Fcharts\u002Fchart-containers","3.charts\u002F0.chart-containers","i-lucide-box",{"title":129,"path":130,"stem":131,"icon":132},"Area Chart","\u002Fcharts\u002Farea-chart","3.charts\u002F01.area-chart","i-lucide-area-chart",{"title":134,"path":135,"stem":136,"icon":137},"Bar Chart","\u002Fcharts\u002Fbar-chart","3.charts\u002F02.bar-chart","i-lucide-bar-chart",{"title":139,"path":140,"stem":141,"icon":142},"Line Chart","\u002Fcharts\u002Fline-chart","3.charts\u002F03.line-chart","i-lucide-trending-up",{"title":144,"path":145,"stem":146,"icon":147},"Pie Chart","\u002Fcharts\u002Fpie-chart","3.charts\u002F04.pie-chart","i-lucide-pie-chart",{"title":149,"path":150,"stem":151,"icon":152},"Radar Chart","\u002Fcharts\u002Fradar-chart","3.charts\u002F05.radar-chart","i-lucide-radar",{"title":154,"path":155,"stem":156,"icon":157},"Radial Bar Chart","\u002Fcharts\u002Fradial-bar-chart","3.charts\u002F06.radial-bar-chart","i-lucide-circle-dot",{"title":159,"path":160,"stem":161,"icon":162},"Scatter Chart","\u002Fcharts\u002Fscatter-chart","3.charts\u002F07.scatter-chart","i-lucide-scatter-chart",{"title":164,"path":165,"stem":166,"icon":167},"Funnel Chart","\u002Fcharts\u002Ffunnel-chart","3.charts\u002F08.funnel-chart","i-lucide-filter",{"title":169,"path":170,"stem":171,"icon":56},"Composed Chart","\u002Fcharts\u002Fcomposed-chart","3.charts\u002F09.composed-chart",{"title":173,"path":174,"stem":175,"icon":176},"Treemap","\u002Fcharts\u002Ftreemap","3.charts\u002F10.treemap","i-lucide-layout-grid",{"title":178,"path":179,"stem":180,"icon":181},"Sunburst Chart","\u002Fcharts\u002Fsunburst-chart","3.charts\u002F11.sunburst-chart","i-lucide-sun",{"title":183,"path":184,"stem":185,"icon":186},"Sankey","\u002Fcharts\u002Fsankey","3.charts\u002F12.sankey","i-lucide-git-fork",{"title":188,"path":189,"stem":190,"icon":191},"Tracker","\u002Fcharts\u002Ftracker","3.charts\u002F13.tracker","i-lucide-activity",{"title":193,"path":194,"stem":195,"icon":196},"Calendar Heatmap","\u002Fcharts\u002Fcalendar-heatmap","3.charts\u002F14.calendar-heatmap","i-lucide-calendar-days",{"title":198,"path":199,"stem":200,"icon":201},"Heatmap and CohortChart","\u002Fcharts\u002Fheatmap","3.charts\u002F15.heatmap","i-lucide-grid-3x3",{"title":203,"path":204,"stem":205,"icon":142},"Sparkline","\u002Fcharts\u002Fsparkline","3.charts\u002F16.sparkline",{"title":207,"path":208,"stem":209,"icon":210},"Bar List","\u002Fcharts\u002Fbar-list","3.charts\u002F17.bar-list","i-lucide-list-ordered",{"title":212,"path":213,"stem":214,"icon":215},"Journey Sankey","\u002Fcharts\u002Fjourney-sankey","3.charts\u002F18.journey-sankey","i-lucide-split",{"title":217,"icon":218,"path":219,"stem":220,"children":221,"page":30},"Components","i-lucide-code","\u002Fcomponents","4.components",[222,227,232,236,241,245,250,254,259,264,269,274,279],{"title":223,"path":224,"stem":225,"icon":226},"Tooltip","\u002Fcomponents\u002Ftooltip","4.components\u002F01.tooltip","i-lucide-message-square",{"title":228,"path":229,"stem":230,"icon":231},"Legend","\u002Fcomponents\u002Flegend","4.components\u002F02.legend","i-lucide-list",{"title":233,"path":234,"stem":235,"icon":201},"CartesianGrid","\u002Fcomponents\u002Fcartesian-grid","4.components\u002F03.cartesian-grid",{"title":237,"path":238,"stem":239,"icon":240},"Axes","\u002Fcomponents\u002Faxis","4.components\u002F04.axis","i-lucide-move",{"title":242,"path":243,"stem":244,"icon":152},"Polar Axes and Grid","\u002Fcomponents\u002Fpolar-axes","4.components\u002F05.polar-axes",{"title":246,"path":247,"stem":248,"icon":249},"Brush","\u002Fcomponents\u002Fbrush","4.components\u002F06.brush","i-lucide-sliders-horizontal",{"title":251,"path":252,"stem":253,"icon":61},"Reference Elements","\u002Fcomponents\u002Freference-elements","4.components\u002F07.reference-elements",{"title":255,"path":256,"stem":257,"icon":258},"ErrorBar","\u002Fcomponents\u002Ferror-bar","4.components\u002F08.error-bar","i-lucide-chevrons-up-down",{"title":260,"path":261,"stem":262,"icon":263},"Labels and Cell","\u002Fcomponents\u002Flabels","4.components\u002F09.labels","i-lucide-tag",{"title":265,"path":266,"stem":267,"icon":268},"Text","\u002Fcomponents\u002Ftext","4.components\u002F10.text","i-lucide-type",{"title":270,"path":271,"stem":272,"icon":273},"Shapes","\u002Fcomponents\u002Fshapes","4.components\u002F11.shapes","i-lucide-shapes",{"title":275,"path":276,"stem":277,"icon":278},"Composables","\u002Fcomponents\u002Fcomposables","4.components\u002F12.composables","i-lucide-function-square",{"title":280,"path":281,"stem":282,"icon":283},"Custom overlays","\u002Fcomponents\u002Fcustom-overlays","4.components\u002F13.custom-overlays","i-lucide-pencil-ruler",{"id":285,"title":164,"body":286,"description":797,"extension":798,"links":799,"meta":800,"navigation":801,"path":165,"seo":802,"stem":166,"__hash__":803},"docs\u002F3.charts\u002F08.funnel-chart.md",{"type":287,"value":288,"toc":785},"minimark",[289,293,298,306,311,315,326,330,334,341,346,350,356,361,365,375,379,383,394,398,703,727,731],[290,291,292],"p",{},"Funnel charts display data as stacked trapezoids that narrow progressively, ideal for conversion funnels.",[294,295,297],"h2",{"id":296},"simple-funnel-chart","Simple Funnel Chart",[290,299,300,301,305],{},"A basic funnel chart with colored segments using ",[302,303,304],"code",{},"\u003CCell>",".",[307,308],"chart-demo",{"description":309,"name":297,"src":310},"A conversion funnel with four stages.","funnel-charts\u002Fsimple-funnel-chart",[294,312,314],{"id":313},"funnel-chart-with-labels","Funnel Chart with Labels",[290,316,317,318,321,322,325],{},"Place ",[302,319,320],{},"\u003CLabelList>"," as a child inside ",[302,323,324],{},"\u003CFunnel>",". Labels fade in and out with their trapezoids.",[307,327],{"description":328,"name":314,"src":329},"A funnel chart with value labels inside each segment.","funnel-charts\u002Flabel-funnel-chart",[294,331,333],{"id":332},"rectangle-last-shape","Rectangle Last Shape",[290,335,336,337,340],{},"Set ",[302,338,339],{},"lastShapeType=\"rectangle\""," so the last segment keeps its width instead of narrowing to a point.",[307,342],{"description":343,"name":344,"src":345},"A funnel chart where the bottom segment is a rectangle.","Rectangle Funnel Chart","funnel-charts\u002Frectangle-funnel-chart",[294,347,349],{"id":348},"reversed-funnel","Reversed Funnel",[290,351,336,352,355],{},[302,353,354],{},":reversed=\"true\""," to flip the funnel — narrowest at the top, widest at the bottom.",[307,357],{"description":358,"name":359,"src":360},"An inverted funnel with the smallest segment at the top.","Reversed Funnel Chart","funnel-charts\u002Freversed-funnel-chart",[294,362,364],{"id":363},"funnel-chart-with-legend","Funnel Chart with Legend",[290,366,367,368,371,372,374],{},"Add ",[302,369,370],{},"\u003CLegend>"," alongside ",[302,373,324],{}," to show a legend keyed by data names.",[307,376],{"description":377,"name":364,"src":378},"A funnel chart with a legend component.","funnel-charts\u002Flegend-funnel-chart",[294,380,382],{"id":381},"funnelchart-props","FunnelChart props",[290,384,385,388,389,393],{},[302,386,387],{},"\u003CFunnelChart>"," takes the ",[390,391,392],"a",{"href":125},"common chart container props",". It has\nno axes and no bar sizing.",[294,395,397],{"id":396},"funnel-props","Funnel props",[399,400,401,420],"table",{},[402,403,404],"thead",{},[405,406,407,411,414,417],"tr",{},[408,409,410],"th",{},"Prop",[408,412,413],{},"Type",[408,415,416],{},"Default",[408,418,419],{},"Description",[421,422,423,443,460,480,500,520,538,559,578,596,616,635,653,669,686],"tbody",{},[405,424,425,431,434,440],{},[426,427,428],"td",{},[302,429,430],{},"data-key",[426,432,433],{},"row path or accessor",[426,435,436],{},[437,438,439],"strong",{},"required",[426,441,442],{},"Field with the value",[405,444,445,450,452,457],{},[426,446,447],{},[302,448,449],{},"name-key",[426,451,433],{},[426,453,454],{},[302,455,456],{},"'name'",[426,458,459],{},"Field with the segment name",[405,461,462,467,472,477],{},[426,463,464],{},[302,465,466],{},"data",[426,468,469],{},[302,470,471],{},"Array",[426,473,474,475],{},"the chart's ",[302,476,466],{},[426,478,479],{},"Rows for this series",[405,481,482,487,492,497],{},[426,483,484],{},[302,485,486],{},"last-shape-type",[426,488,489],{},[302,490,491],{},"'triangle' | 'rectangle'",[426,493,494],{},[302,495,496],{},"'triangle'",[426,498,499],{},"Shape of the last segment",[405,501,502,507,512,517],{},[426,503,504],{},[302,505,506],{},"reversed",[426,508,509],{},[302,510,511],{},"boolean",[426,513,514],{},[302,515,516],{},"false",[426,518,519],{},"Put the widest segment at the bottom",[405,521,522,527,532,535],{},[426,523,524],{},[302,525,526],{},"width",[426,528,529],{},[302,530,531],{},"number | string",[426,533,534],{},"the plot width",[426,536,537],{},"Funnel width",[405,539,540,545,550,553],{},[426,541,542],{},[302,543,544],{},"fill",[426,546,547],{},[302,548,549],{},"string",[426,551,552],{},"series palette per segment",[426,554,555,556,558],{},"Segment fill; ",[302,557,304],{}," sets one segment",[405,560,561,566,570,575],{},[426,562,563],{},[302,564,565],{},"stroke",[426,567,568],{},[302,569,549],{},[426,571,572],{},[302,573,574],{},"'var(--v-charts-background, #fff)'",[426,576,577],{},"Segment outline",[405,579,580,585,590,593],{},[426,581,582],{},[302,583,584],{},"name",[426,586,587],{},[302,588,589],{},"string | number",[426,591,592],{},"—",[426,594,595],{},"Series name in the tooltip; the legend lists segment names",[405,597,598,603,608,613],{},[426,599,600],{},[302,601,602],{},"legend-type",[426,604,605],{},[302,606,607],{},"LegendType",[426,609,610],{},[302,611,612],{},"'rect'",[426,614,615],{},"Legend icon",[405,617,618,623,628,630],{},[426,619,620],{},[302,621,622],{},"tooltip-type",[426,624,625],{},[302,626,627],{},"'none'",[426,629,592],{},[426,631,336,632,634],{},[302,633,627],{}," to leave the series out of the tooltip",[405,636,637,642,646,650],{},[426,638,639],{},[302,640,641],{},"hide",[426,643,644],{},[302,645,511],{},[426,647,648],{},[302,649,516],{},[426,651,652],{},"Hide the series",[405,654,655,660,664,666],{},[426,656,657],{},[302,658,659],{},"class",[426,661,662],{},[302,663,549],{},[426,665,592],{},[426,667,668],{},"Class on the series layer",[405,670,671,676,680,683],{},[426,672,673],{},[302,674,675],{},"is-animation-active",[426,677,678],{},[302,679,511],{},[426,681,682],{},"the chart's value",[426,684,685],{},"Animate this series",[405,687,688,693,698,700],{},[426,689,690],{},[302,691,692],{},"transition",[426,694,695],{},[302,696,697],{},"ChartTransition",[426,699,682],{},[426,701,702],{},"Timing and easing of data changes",[290,704,705,706,709,710,709,713,716,717,720,721,709,724,305],{},"Events: ",[302,707,708],{},"@click",", ",[302,711,712],{},"@mouseenter",[302,714,715],{},"@mouseleave"," with ",[302,718,719],{},"(trapezoid, index, event)",", and ",[302,722,723],{},"@animation-start",[302,725,726],{},"@animation-end",[294,728,730],{"id":729},"slots","Slots",[399,732,733,745],{},[402,734,735],{},[405,736,737,740,743],{},[408,738,739],{},"Slot",[408,741,742],{},"Props",[408,744,419],{},[421,746,747,770],{},[405,748,749,754,759],{},[426,750,751],{},[302,752,753],{},"#shape",[426,755,756],{},[302,757,758],{},"FunnelTrapezoidItem & { animationProgress }",[426,760,761,762,765,766,769],{},"Custom trapezoid rendering. ",[302,763,764],{},"animationProgress"," goes from 0 to 1; use ",[302,767,768],{},"v-if=\"props.animationProgress >= 1\""," to show labels only after animation.",[405,771,772,775,777],{},[426,773,774],{},"default",[426,776,592],{},[426,778,779,781,782,784],{},[302,780,304],{}," for per-segment colors, ",[302,783,320],{}," for labels",{"title":786,"searchDepth":787,"depth":787,"links":788},"",2,[789,790,791,792,793,794,795,796],{"id":296,"depth":787,"text":297},{"id":313,"depth":787,"text":314},{"id":332,"depth":787,"text":333},{"id":348,"depth":787,"text":349},{"id":363,"depth":787,"text":364},{"id":381,"depth":787,"text":382},{"id":396,"depth":787,"text":397},{"id":729,"depth":787,"text":730},"Build funnel charts for conversion and drop-off visualization","md",null,{},{"icon":167},{"title":164,"description":797},"OIDk62o4pn-_wwGpU-iSqQxeqMmyhcZ6tA3wn3P0m0U",[805,807],{"title":159,"path":160,"stem":161,"description":806,"icon":162,"children":-1},"Plot data points on an X-Y plane to visualize relationships",{"title":169,"path":170,"stem":171,"description":808,"icon":56,"children":-1},"Combine Area, Bar, and Line series in a single chart",1793527168526]