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