# AreaPlot Chart content that represents a function or a collection of data using the area of one or more regions. ``` struct AreaPlot ``` ## Overview Use `AreaPlot` when you want to visualize data in the same way as with [`AreaMark`](/documentation/Charts/AreaMark), but you want to plot a function or visualize an entire data collection with a single plot. ### Plotting areas from a collection You can initialize and style the plot with simple values or key paths. Add modifiers with `KeyPath` before adding modifiers with simple values. ``` Chart { AreaPlot( portfolioElements, x: .value("Date", \.date), y: .value("Asset value", \.assetValue), series: .value("Asset", \.asset), stacking: .standard ) .foregroundStyle(by: .value("Asset", \.asset)) } ``` ### Plotting functions In addition to providing data points, you can provide a function to an `AreaPlot` to plot a function. For example, you can plot the area between y = x and y = x^2 - 1 with: ``` Chart { AreaPlot(x: "x", yStart: "x", yEnd: "x^2 - 1") { x in (yStart: x, yEnd: x * x - 1) } } .chartXScale(domain: -2 ... 2) .chartYScale(domain: -4 ... 4) ``` You can also provide a single function to an `AreaPlot`. In this case it will plot the area between zero and the given function. ``` Chart { AreaPlot(x: "x", y: "x^2 - 1") { x in x * x - 1 } } .chartXScale(domain: -2 ... 2) .chartYScale(domain: -4 ... 4) ``` ## Topics ### Plotting areas from a collection [`init(_:x:y:stacking:)`](/documentation/Charts/AreaPlot/init(_:x:y:stacking:)) [`init(_:x:y:series:stacking:)`](/documentation/Charts/AreaPlot/init(_:x:y:series:stacking:)) [`init(_:xStart:xEnd:y:)`](/documentation/Charts/AreaPlot/init(_:xStart:xEnd:y:)) [`init(_:xStart:xEnd:y:series:)`](/documentation/Charts/AreaPlot/init(_:xStart:xEnd:y:series:)) [`init(_:x:yStart:yEnd:)`](/documentation/Charts/AreaPlot/init(_:x:yStart:yEnd:)) [`init(_:x:yStart:yEnd:series:)`](/documentation/Charts/AreaPlot/init(_:x:yStart:yEnd:series:)) ### Plotting functions [`init(x:y:domain:function:)`](/documentation/Charts/AreaPlot/init(x:y:domain:function:)-2fab1) Creates a mark that fills the area between zero and the given function. [`init(x:y:domain:function:)`](/documentation/Charts/AreaPlot/init(x:y:domain:function:)-1jmpp) Creates a mark that fills the area between zero and the given function. [`init(x:y:domain:function:)`](/documentation/Charts/AreaPlot/init(x:y:domain:function:)-etud) Creates a mark that fills the area between zero and the given function. [`init(x:y:domain:function:)`](/documentation/Charts/AreaPlot/init(x:y:domain:function:)-39eit) Creates a mark that fills the area between zero and the given function. [`init(x:yStart:yEnd:domain:function:)`](/documentation/Charts/AreaPlot/init(x:yStart:yEnd:domain:function:)-etcn) Creates a mark that fills the area between two functions (yStart, yEnd) = f(x). [`init(x:yStart:yEnd:domain:function:)`](/documentation/Charts/AreaPlot/init(x:yStart:yEnd:domain:function:)-9gui6) Creates a mark that fills the area between two functions (yStart, yEnd) = f(x). [`init(x:yStart:yEnd:domain:function:)`](/documentation/Charts/AreaPlot/init(x:yStart:yEnd:domain:function:)-5akqm) Creates a mark that fills the area between two functions (yStart, yEnd) = f(x). [`init(x:yStart:yEnd:domain:function:)`](/documentation/Charts/AreaPlot/init(x:yStart:yEnd:domain:function:)-23gxe) Creates a mark that fills the area between two functions (yStart, yEnd) = f(x). ### Supporting types [`body`](/documentation/Charts/ChartContent/body-swift.property) The content and behavior of the chart content. [`VectorizedAreaPlotContent`](/documentation/Charts/VectorizedAreaPlotContent) An opaque vectorized chart content type. [`FunctionAreaPlotContent`](/documentation/Charts/FunctionAreaPlotContent) --- Copyright © 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)