[{"data":1,"prerenderedAt":987},["ShallowReactive",2],{"navigation_docs":3,"-charts-area-chart":284,"-charts-area-chart-surround":982},[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":129,"body":286,"description":975,"extension":976,"links":977,"meta":978,"navigation":979,"path":130,"seo":980,"stem":131,"__hash__":981},"docs\u002F3.charts\u002F01.area-chart.md",{"type":287,"value":288,"toc":962},"minimark",[289,293,298,301,306,310,318,322,326,337,341,345,351,355,359,366,370,374,385,455,459,470,474,874,897,901],[290,291,292],"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.",[294,295,297],"h2",{"id":296},"simple-area-chart","Simple Area Chart",[290,299,300],{},"A basic area chart with a single data series.",[302,303],"chart-demo",{"description":304,"name":297,"src":305},"A basic area chart with monotone interpolation.","area-charts\u002Fsimple-area-chart",[294,307,309],{"id":308},"stacked-area-chart","Stacked Area Chart",[290,311,312,313,317],{},"Use ",[314,315,316],"code",{},"stack-id"," to stack areas on top of each other.",[302,319],{"description":320,"name":309,"src":321},"Two area series stacked with stack-id.","area-charts\u002Fstacked-area-chart",[294,323,325],{"id":324},"gradient-area-chart","Gradient Area Chart",[290,327,328,329,332,333,336],{},"Define ",[314,330,331],{},"\u003ClinearGradient>"," inside the chart and reference it with ",[314,334,335],{},"fill=\"url(#gradientId)\"",".",[302,338],{"description":339,"name":325,"src":340},"An area chart with gradient fill effect.","area-charts\u002Fgradient-area-chart",[294,342,344],{"id":343},"step-area-chart","Step Area Chart",[290,346,312,347,350],{},[314,348,349],{},"type=\"step\""," for step-wise transitions.",[302,352],{"description":353,"name":344,"src":354},"An area chart with step interpolation.","area-charts\u002Fstep-area-chart",[294,356,358],{"id":357},"area-chart-with-legend","Area Chart with Legend",[290,360,361,362,365],{},"Add ",[314,363,364],{},"\u003CLegend>"," to show series labels.",[302,367],{"description":368,"name":358,"src":369},"Two area series with a legend.","area-charts\u002Flegend-area-chart",[294,371,373],{"id":372},"change-curve-type","Change curve type",[290,375,376,377,380,381,384],{},"Set the ",[314,378,379],{},"type"," prop on ",[314,382,383],{},"\u003CArea>"," to control interpolation:",[386,387,388,401],"table",{},[389,390,391],"thead",{},[392,393,394,398],"tr",{},[395,396,397],"th",{},"Type",[395,399,400],{},"Description",[402,403,404,415,425,435,445],"tbody",{},[392,405,406,412],{},[407,408,409],"td",{},[314,410,411],{},"monotone",[407,413,414],{},"Smooth curve preserving monotonicity",[392,416,417,422],{},[407,418,419],{},[314,420,421],{},"linear",[407,423,424],{},"Straight line segments",[392,426,427,432],{},[407,428,429],{},[314,430,431],{},"step",[407,433,434],{},"Step-wise transitions",[392,436,437,442],{},[407,438,439],{},[314,440,441],{},"natural",[407,443,444],{},"Natural cubic spline",[392,446,447,452],{},[407,448,449],{},[314,450,451],{},"basis",[407,453,454],{},"B-spline curve",[294,456,458],{"id":457},"areachart-props","AreaChart props",[290,460,461,464,465,469],{},[314,462,463],{},"\u003CAreaChart>"," takes the ",[466,467,468],"a",{"href":125},"chart container props",", including bar sizing.",[294,471,473],{"id":472},"area-props","Area props",[386,475,476,490],{},[389,477,478],{},[392,479,480,483,485,488],{},[395,481,482],{},"Prop",[395,484,397],{},[395,486,487],{},"Default",[395,489,400],{},[402,491,492,511,530,547,564,582,602,622,638,658,677,693,712,735,751,767,787,806,824,840,857],{},[392,493,494,499,502,508],{},[407,495,496],{},[314,497,498],{},"data-key",[407,500,501],{},"row path or accessor",[407,503,504],{},[505,506,507],"strong",{},"required",[407,509,510],{},"Field with the value",[392,512,513,517,522,527],{},[407,514,515],{},[314,516,379],{},[407,518,519],{},[314,520,521],{},"CurveType",[407,523,524],{},[314,525,526],{},"'linear'",[407,528,529],{},"Curve interpolation, see above",[392,531,532,536,541,544],{},[407,533,534],{},[314,535,316],{},[407,537,538],{},[314,539,540],{},"string | number",[407,542,543],{},"—",[407,545,546],{},"Areas with the same id stack",[392,548,549,554,559,561],{},[407,550,551],{},[314,552,553],{},"base-value",[407,555,556],{},[314,557,558],{},"number | 'dataMin' | 'dataMax'",[407,560,543],{},[407,562,563],{},"Where the fill starts",[392,565,566,571,576,579],{},[407,567,568],{},[314,569,570],{},"fill",[407,572,573],{},[314,574,575],{},"string",[407,577,578],{},"series palette",[407,580,581],{},"Fill color",[392,583,584,589,594,599],{},[407,585,586],{},[314,587,588],{},"fill-opacity",[407,590,591],{},[314,592,593],{},"number",[407,595,596],{},[314,597,598],{},"0.6",[407,600,601],{},"Fill opacity",[392,603,604,609,613,615],{},[407,605,606],{},[314,607,608],{},"stroke",[407,610,611],{},[314,612,575],{},[407,614,578],{},[407,616,617,618,621],{},"Outline color; ",[314,619,620],{},"'none'"," hides the outline",[392,623,624,629,633,635],{},[407,625,626],{},[314,627,628],{},"stroke-width",[407,630,631],{},[314,632,593],{},[407,634,543],{},[407,636,637],{},"Outline width",[392,639,640,645,650,655],{},[407,641,642],{},[314,643,644],{},"dot",[407,646,647],{},[314,648,649],{},"boolean | object",[407,651,652],{},[314,653,654],{},"false",[407,656,657],{},"Show a dot on every point; an object sets dot attributes",[392,659,660,665,669,674],{},[407,661,662],{},[314,663,664],{},"active-dot",[407,666,667],{},[314,668,649],{},[407,670,671],{},[314,672,673],{},"true",[407,675,676],{},"Show a dot on the active point",[392,678,679,684,688,690],{},[407,680,681],{},[314,682,683],{},"label",[407,685,686],{},[314,687,649],{},[407,689,543],{},[407,691,692],{},"Show a value label on every point",[392,694,695,700,705,709],{},[407,696,697],{},[314,698,699],{},"connect-nulls",[407,701,702],{},[314,703,704],{},"boolean",[407,706,707],{},[314,708,654],{},[407,710,711],{},"Draw across missing values",[392,713,714,723,727,732],{},[407,715,716,719,720],{},[314,717,718],{},"x-axis-id",", ",[314,721,722],{},"y-axis-id",[407,724,725],{},[314,726,540],{},[407,728,729],{},[314,730,731],{},"0",[407,733,734],{},"Axes this series uses",[392,736,737,742,746,748],{},[407,738,739],{},[314,740,741],{},"name",[407,743,744],{},[314,745,540],{},[407,747,543],{},[407,749,750],{},"Name in the legend and tooltip",[392,752,753,758,762,764],{},[407,754,755],{},[314,756,757],{},"unit",[407,759,760],{},[314,761,540],{},[407,763,543],{},[407,765,766],{},"Unit after tooltip values",[392,768,769,774,779,784],{},[407,770,771],{},[314,772,773],{},"legend-type",[407,775,776],{},[314,777,778],{},"LegendType",[407,780,781],{},[314,782,783],{},"'line'",[407,785,786],{},"Legend icon",[392,788,789,794,798,800],{},[407,790,791],{},[314,792,793],{},"tooltip-type",[407,795,796],{},[314,797,620],{},[407,799,543],{},[407,801,802,803,805],{},"Set ",[314,804,620],{}," to leave the series out of the tooltip",[392,807,808,813,817,821],{},[407,809,810],{},[314,811,812],{},"hide",[407,814,815],{},[314,816,704],{},[407,818,819],{},[314,820,654],{},[407,822,823],{},"Hide the series",[392,825,826,831,835,837],{},[407,827,828],{},[314,829,830],{},"class",[407,832,833],{},[314,834,575],{},[407,836,543],{},[407,838,839],{},"Class on the series layer",[392,841,842,847,851,854],{},[407,843,844],{},[314,845,846],{},"is-animation-active",[407,848,849],{},[314,850,704],{},[407,852,853],{},"the chart's value",[407,855,856],{},"Animate this series",[392,858,859,864,869,871],{},[407,860,861],{},[314,862,863],{},"transition",[407,865,866],{},[314,867,868],{},"ChartTransition",[407,870,853],{},[407,872,873],{},"Timing and easing of data changes",[290,875,876,877,719,880,719,883,886,887,890,891,719,894,336],{},"Events: ",[314,878,879],{},"@click",[314,881,882],{},"@mouseenter",[314,884,885],{},"@mouseleave"," with ",[314,888,889],{},"(point, index, event)",", and ",[314,892,893],{},"@animation-start",[314,895,896],{},"@animation-end",[294,898,900],{"id":899},"area-slots","Area slots",[386,902,903,915],{},[389,904,905],{},[392,906,907,910,913],{},[395,908,909],{},"Slot",[395,911,912],{},"Props",[395,914,400],{},[402,916,917,932,947],{},[392,918,919,924,929],{},[407,920,921],{},[314,922,923],{},"#dot",[407,925,926],{},[314,927,928],{},"{ cx, cy, r, fill, stroke, strokeWidth, … }",[407,930,931],{},"Replace a point dot",[392,933,934,939,944],{},[407,935,936],{},[314,937,938],{},"#activeDot",[407,940,941],{},[314,942,943],{},"{ cx, cy, r, fill, stroke, index, dataKey, payload, value }",[407,945,946],{},"Replace the active dot",[392,948,949,954,959],{},[407,950,951],{},[314,952,953],{},"#label",[407,955,956],{},[314,957,958],{},"LabelListSlotProps",[407,960,961],{},"Replace a point label",{"title":963,"searchDepth":964,"depth":964,"links":965},"",2,[966,967,968,969,970,971,972,973,974],{"id":296,"depth":964,"text":297},{"id":308,"depth":964,"text":309},{"id":324,"depth":964,"text":325},{"id":343,"depth":964,"text":344},{"id":357,"depth":964,"text":358},{"id":372,"depth":964,"text":373},{"id":457,"depth":964,"text":458},{"id":472,"depth":964,"text":473},{"id":899,"depth":964,"text":900},"Build area charts to display quantitative data with filled regions","md",null,{},{"icon":132},{"title":129,"description":975},"uf_bwYeS_fzIfIV2HiM46reybcYwsMr5qZPeRHFkREc",[983,985],{"title":124,"path":125,"stem":126,"description":984,"icon":127,"children":-1},"Props shared by AreaChart, BarChart, LineChart, ComposedChart, ScatterChart, PieChart, RadarChart, RadialBarChart and FunnelChart",{"title":134,"path":135,"stem":136,"description":986,"icon":137,"children":-1},"Build bar charts with stacking, labels, and custom shapes",1793527164964]