[{"data":1,"prerenderedAt":738},["ShallowReactive",2],{"navigation_docs":3,"-charts-area-chart":177,"-charts-area-chart-surround":733},[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":84,"body":179,"description":726,"extension":727,"links":728,"meta":729,"navigation":730,"path":85,"seo":731,"stem":86,"__hash__":732},"docs/3.charts/1.area-chart.md",{"type":180,"value":181,"toc":714},"minimark",[182,186,191,194,199,203,211,215,219,230,234,238,244,248,252,259,263,267,278,348,352,505,509],[183,184,185],"p",{},"Area charts display quantitative data with the area between the axis and the line filled with color. They are ideal for showing magnitude of change over time.",[187,188,190],"h2",{"id":189},"simple-area-chart","Simple Area Chart",[183,192,193],{},"A basic area chart with a single data series.",[195,196],"chart-demo",{"description":197,"name":190,"src":198},"A basic area chart with monotone interpolation.","area-charts/simple-area-chart",[187,200,202],{"id":201},"stacked-area-chart","Stacked Area Chart",[183,204,205,206,210],{},"Use ",[207,208,209],"code",{},"stack-id"," to stack areas on top of each other.",[195,212],{"description":213,"name":202,"src":214},"Two area series stacked with stack-id.","area-charts/stacked-area-chart",[187,216,218],{"id":217},"gradient-area-chart","Gradient Area Chart",[183,220,221,222,225,226,229],{},"Define ",[207,223,224],{},"\u003ClinearGradient>"," inside the chart and reference it with ",[207,227,228],{},"fill=\"url(#gradientId)\"",".",[195,231],{"description":232,"name":218,"src":233},"An area chart with gradient fill effect.","area-charts/gradient-area-chart",[187,235,237],{"id":236},"step-area-chart","Step Area Chart",[183,239,205,240,243],{},[207,241,242],{},"type=\"step\""," for step-wise transitions.",[195,245],{"description":246,"name":237,"src":247},"An area chart with step interpolation.","area-charts/step-area-chart",[187,249,251],{"id":250},"area-chart-with-legend","Area Chart with Legend",[183,253,254,255,258],{},"Add ",[207,256,257],{},"\u003CLegend>"," to show series labels.",[195,260],{"description":261,"name":251,"src":262},"Two area series with a legend.","area-charts/legend-area-chart",[187,264,266],{"id":265},"change-curve-type","Change curve type",[183,268,269,270,273,274,277],{},"Set the ",[207,271,272],{},"type"," prop on ",[207,275,276],{},"\u003CArea>"," to control interpolation:",[279,280,281,294],"table",{},[282,283,284],"thead",{},[285,286,287,291],"tr",{},[288,289,290],"th",{},"Type",[288,292,293],{},"Description",[295,296,297,308,318,328,338],"tbody",{},[285,298,299,305],{},[300,301,302],"td",{},[207,303,304],{},"monotone",[300,306,307],{},"Smooth curve preserving monotonicity",[285,309,310,315],{},[300,311,312],{},[207,313,314],{},"linear",[300,316,317],{},"Straight line segments",[285,319,320,325],{},[300,321,322],{},[207,323,324],{},"step",[300,326,327],{},"Step-wise transitions",[285,329,330,335],{},[300,331,332],{},[207,333,334],{},"natural",[300,336,337],{},"Natural cubic spline",[285,339,340,345],{},[300,341,342],{},[207,343,344],{},"basis",[300,346,347],{},"B-spline curve",[187,349,351],{"id":350},"areachart-props","AreaChart props",[279,353,354,368],{},[282,355,356],{},[285,357,358,361,363,366],{},[288,359,360],{},"Prop",[288,362,290],{},[288,364,365],{},"Default",[288,367,293],{},[295,369,370,390,412,428,448,468,485],{},[285,371,372,377,382,387],{},[300,373,374],{},[207,375,376],{},"data",[300,378,379],{},[207,380,381],{},"Array",[300,383,384],{},[207,385,386],{},"[]",[300,388,389],{},"Data array for the chart",[285,391,392,397,402,405],{},[300,393,394],{},[207,395,396],{},"width",[300,398,399],{},[207,400,401],{},"number",[300,403,404],{},"—",[300,406,407,408,411],{},"Chart width (use ",[207,409,410],{},"ResponsiveContainer"," for responsive)",[285,413,414,419,423,425],{},[300,415,416],{},[207,417,418],{},"height",[300,420,421],{},[207,422,401],{},[300,424,404],{},[300,426,427],{},"Chart height",[285,429,430,435,440,445],{},[300,431,432],{},[207,433,434],{},"margin",[300,436,437],{},[207,438,439],{},"object",[300,441,442],{},[207,443,444],{},"{ top: 5, right: 5, bottom: 5, left: 5 }",[300,446,447],{},"Chart margins",[285,449,450,455,460,465],{},[300,451,452],{},[207,453,454],{},"layout",[300,456,457],{},[207,458,459],{},"'horizontal' | 'vertical'",[300,461,462],{},[207,463,464],{},"'horizontal'",[300,466,467],{},"Layout direction",[285,469,470,475,480,482],{},[300,471,472],{},[207,473,474],{},"syncId",[300,476,477],{},[207,478,479],{},"string",[300,481,404],{},[300,483,484],{},"Sync hover across charts with same ID",[285,486,487,492,496,498],{},[300,488,489],{},[207,490,491],{},"stack-offset",[300,493,494],{},[207,495,479],{},[300,497,404],{},[300,499,500,501,504],{},"Stack offset type (",[207,502,503],{},"expand"," for 100% stacked)",[187,506,508],{"id":507},"area-props","Area props",[279,510,511,523],{},[282,512,513],{},[285,514,515,517,519,521],{},[288,516,360],{},[288,518,290],{},[288,520,365],{},[288,522,293],{},[295,524,525,546,565,584,602,621,637,657,675,694],{},[285,526,527,532,537,543],{},[300,528,529],{},[207,530,531],{},"dataKey",[300,533,534],{},[207,535,536],{},"string | number | Function",[300,538,539],{},[540,541,542],"strong",{},"required",[300,544,545],{},"Key from data to plot",[285,547,548,552,557,562],{},[300,549,550],{},[207,551,272],{},[300,553,554],{},[207,555,556],{},"CurveType",[300,558,559],{},[207,560,561],{},"'linear'",[300,563,564],{},"Curve interpolation type",[285,566,567,572,576,581],{},[300,568,569],{},[207,570,571],{},"fill",[300,573,574],{},[207,575,479],{},[300,577,578],{},[207,579,580],{},"'#3182bd'",[300,582,583],{},"Fill color",[285,585,586,591,595,599],{},[300,587,588],{},[207,589,590],{},"stroke",[300,592,593],{},[207,594,479],{},[300,596,597],{},[207,598,580],{},[300,600,601],{},"Stroke color",[285,603,604,609,613,618],{},[300,605,606],{},[207,607,608],{},"fillOpacity",[300,610,611],{},[207,612,401],{},[300,614,615],{},[207,616,617],{},"0.6",[300,619,620],{},"Fill opacity",[285,622,623,628,632,634],{},[300,624,625],{},[207,626,627],{},"stackId",[300,629,630],{},[207,631,479],{},[300,633,404],{},[300,635,636],{},"Stack ID for grouping",[285,638,639,644,649,654],{},[300,640,641],{},[207,642,643],{},"hide",[300,645,646],{},[207,647,648],{},"boolean",[300,650,651],{},[207,652,653],{},"false",[300,655,656],{},"Hide the area",[285,658,659,664,668,672],{},[300,660,661],{},[207,662,663],{},"connectNulls",[300,665,666],{},[207,667,648],{},[300,669,670],{},[207,671,653],{},[300,673,674],{},"Connect across null values",[285,676,677,682,686,691],{},[300,678,679],{},[207,680,681],{},"isAnimationActive",[300,683,684],{},[207,685,648],{},[300,687,688],{},[207,689,690],{},"true",[300,692,693],{},"Enable animation",[285,695,696,701,706,711],{},[300,697,698],{},[207,699,700],{},"transition",[300,702,703],{},[207,704,705],{},"AnimationOptions",[300,707,708],{},[207,709,710],{},"{ duration: 0.8, ease: 'easeOut' }",[300,712,713],{},"Animation timing (motion-v)",{"title":715,"searchDepth":716,"depth":716,"links":717},"",2,[718,719,720,721,722,723,724,725],{"id":189,"depth":716,"text":190},{"id":201,"depth":716,"text":202},{"id":217,"depth":716,"text":218},{"id":236,"depth":716,"text":237},{"id":250,"depth":716,"text":251},{"id":265,"depth":716,"text":266},{"id":350,"depth":716,"text":351},{"id":507,"depth":716,"text":508},"Build area charts to display quantitative data with filled regions","md",null,{},{"icon":87},{"title":84,"description":726},"qMG922LbOdvSHyAI92sQXFb6CIw0B6w1B8PS0S5ZDN0",[734,736],{"title":73,"path":74,"stem":75,"description":735,"icon":76,"children":-1},"Control bar width, spacing, and alignment within categories",{"title":89,"path":90,"stem":91,"description":737,"icon":92,"children":-1},"Visualize hierarchical data as nested rectangles",1775929453605]