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