---
title: AreaPlot
framework: charts
role: symbol
role_heading: Structure
path: charts/areaplot
---

# AreaPlot

Chart content that represents a function or a collection of data using the area of one or more regions.

## Declaration

```swift
struct AreaPlot<Content>
```

## Overview

Overview Use AreaPlot when you want to visualize data in the same way as with 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:)](charts/areaplot/init(_:x:y:stacking:).md)
- [init(_:x:y:series:stacking:)](charts/areaplot/init(_:x:y:series:stacking:).md)
- [init(_:xStart:xEnd:y:)](charts/areaplot/init(_:xstart:xend:y:).md)
- [init(_:xStart:xEnd:y:series:)](charts/areaplot/init(_:xstart:xend:y:series:).md)
- [init(_:x:yStart:yEnd:)](charts/areaplot/init(_:x:ystart:yend:).md)
- [init(_:x:yStart:yEnd:series:)](charts/areaplot/init(_:x:ystart:yend:series:).md)

### Plotting functions

- [init(x:y:domain:function:)](charts/areaplot/init(x:y:domain:function:)-2fab1.md)
- [init(x:y:domain:function:)](charts/areaplot/init(x:y:domain:function:)-1jmpp.md)
- [init(x:y:domain:function:)](charts/areaplot/init(x:y:domain:function:)-etud.md)
- [init(x:y:domain:function:)](charts/areaplot/init(x:y:domain:function:)-39eit.md)
- [init(x:yStart:yEnd:domain:function:)](charts/areaplot/init(x:ystart:yend:domain:function:)-etcn.md)
- [init(x:yStart:yEnd:domain:function:)](charts/areaplot/init(x:ystart:yend:domain:function:)-9gui6.md)
- [init(x:yStart:yEnd:domain:function:)](charts/areaplot/init(x:ystart:yend:domain:function:)-5akqm.md)
- [init(x:yStart:yEnd:domain:function:)](charts/areaplot/init(x:ystart:yend:domain:function:)-23gxe.md)

### Supporting types

- [body](charts/chartcontent/body-swift.property.md)
- [VectorizedAreaPlotContent](charts/vectorizedareaplotcontent.md)
- [FunctionAreaPlotContent](charts/functionareaplotcontent.md)

## Relationships

### Conforms To

- [ChartContent](charts/chartcontent.md)
- [Copyable](swift/copyable.md)
- [Escapable](swift/escapable.md)
- [VectorizedChartContent](charts/vectorizedchartcontent.md)

## See Also

### Vectorized plots

- [Creating a data visualization dashboard with Swift Charts](charts/creating-a-data-visualization-dashboard-with-swift-charts.md)
- [LinePlot](charts/lineplot.md)
- [PointPlot](charts/pointplot.md)
- [RectanglePlot](charts/rectangleplot.md)
- [RulePlot](charts/ruleplot.md)
- [BarPlot](charts/barplot.md)
- [SectorPlot](charts/sectorplot.md)
- [VectorizedChartContent](charts/vectorizedchartcontent.md)