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