<!--
{
  "availability" : [
    "iOS: 16.0.0 -",
    "iPadOS: 16.0.0 -",
    "macCatalyst: 16.0.0 -",
    "macOS: 13.0.0 -",
    "tvOS: 16.0.0 -",
    "visionOS: 1.0.0 -",
    "watchOS: 9.0.0 -"
  ],
  "documentType" : "symbol",
  "framework" : "Charts",
  "identifier" : "/documentation/Charts/ChartContent",
  "metadataVersion" : "0.1.0",
  "role" : "Protocol",
  "symbol" : {
    "kind" : "Protocol",
    "modules" : [
      "Swift Charts"
    ],
    "preciseIdentifier" : "s:6Charts12ChartContentP"
  },
  "title" : "ChartContent"
}
-->

# ChartContent

A type that represents the content that you draw on a chart.

```
@MainActor @preconcurrency protocol ChartContent
```

## Overview

You build a [`Chart`](/documentation/Charts/Chart) by adding instances that conform to the `ChartContent`
protocol to the chart’s `content` closure. The following example adds three
explicit [`BarMark`](/documentation/Charts/BarMark) instances to a chart:

```
Chart {
    BarMark(
        x: .value("Shape Type", "Cube"),
        y: .value("Total Count", 5)
    )
    BarMark(
        x: .value("Shape Type", "Sphere"),
        y: .value("Total Count", 6)
    )
    BarMark(
        x: .value("Shape Type", "Pyramid"),
        y: .value("Total Count", 4)
    )
}
```

The chart draws marks that correspond to the instances that you specify:

![A bar chart with three vertical bars, all in the same color. The first is labeled Cube and has a value of 5. The second is labeled Sphere and has a value of 6. The third is labeled Pyramid and has a value of 4.](images/com.apple.Charts/ChartContent-1-macOS@2x.png)

You can combine any number of marks or types of marks in a single chart
by listing them individually as shown in the above example, wrapping them in
a <doc://com.apple.documentation/documentation/SwiftUI/ForEach>, or any
combination of these. For some mark types, like [`LineMark`](/documentation/Charts/LineMark), you can group
the marks into series using the mark’s `series` initialization parameter.

### Configure chart content

The `ChartContent` protocol provides a set of modifiers that you use to
configure the properties of chart content. These behave like SwiftUI
view modifiers, except that they act on chart content rather than views.
Any of the types that conform to the protocol can use these modifiers.
For example, you can add the [`foregroundStyle(_:)`](/documentation/Charts/ChartContent/foregroundStyle(_:)) modifier to the bar
representing the number of spheres in the previous example to make it red:

```
BarMark(
    x: .value("Shape Type", "Sphere"),
    y: .value("Total Count", 6)
)
.foregroundStyle(.red)
```

![A bar chart with three vertical bars. The first and third bars are blue while the middle bar is red. The first is labeled Cube and has a value of 5. The second is labeled Sphere and has a value of 6. The third is labeled Pyramid and has a value of 4.](images/com.apple.Charts/ChartContent-2-macOS@2x.png)

## Topics

### Styling marks

[`foregroundStyle(_:)`](/documentation/Charts/ChartContent/foregroundStyle(_:))

Sets the foreground style for the chart content.

[`opacity(_:)`](/documentation/Charts/ChartContent/opacity(_:))

Sets the opacity for the chart content.

[`blur(radius:)`](/documentation/Charts/ChartContent/blur(radius:))

Applies a Gaussian blur to this chart content.

[`cornerRadius(_:style:)`](/documentation/Charts/ChartContent/cornerRadius(_:style:))

Sets the corner radius of the chart content.

[`lineStyle(_:)`](/documentation/Charts/ChartContent/lineStyle(_:))

Sets the style for line marks.

[`shadow(color:radius:x:y:)`](/documentation/Charts/ChartContent/shadow(color:radius:x:y:))

A chart content that adds a shadow to this chart content.

[`interpolationMethod(_:)`](/documentation/Charts/ChartContent/interpolationMethod(_:))

Plots line and area marks with the interpolation method that you specify.

### Positioning marks

[`offset(_:)`](/documentation/Charts/ChartContent/offset(_:))

Applies an offset that you specify as a size to the chart content.

[`offset(x:y:)`](/documentation/Charts/ChartContent/offset(x:y:))

Applies a vertical and horizontal offset to the chart content.

[`offset(x:yStart:yEnd:)`](/documentation/Charts/ChartContent/offset(x:yStart:yEnd:))

Applies an offset to the chart content.

[`offset(xStart:xEnd:y:)`](/documentation/Charts/ChartContent/offset(xStart:xEnd:y:))

Applies an offset to the chart content.

[`offset(xStart:xEnd:yStart:yEnd:)`](/documentation/Charts/ChartContent/offset(xStart:xEnd:yStart:yEnd:))

Applies an offset to the chart content.

[`alignsMarkStylesWithPlotArea(_:)`](/documentation/Charts/ChartContent/alignsMarkStylesWithPlotArea(_:))

Aligns this item’s styles with the chart’s plot area.

### Setting symbol appearance

[`symbol(_:)`](/documentation/Charts/ChartContent/symbol(_:))

Sets a plotting symbol type for the chart content.

[`symbol(symbol:)`](/documentation/Charts/ChartContent/symbol(symbol:))

Sets a SwiftUI view to use as the symbol for the chart content.

[`symbolSize(_:)`](/documentation/Charts/ChartContent/symbolSize(_:)-7s0vk)

Sets the plotting symbol size for the chart content.

[`symbolSize(_:)`](/documentation/Charts/ChartContent/symbolSize(_:)-8dtyt)

Sets the plotting symbol size for the chart content according to a
perceived area.

### Encoding data into mark characteristics

[`foregroundStyle(by:)`](/documentation/Charts/ChartContent/foregroundStyle(by:))

Represents data using a foreground style.

[`lineStyle(by:)`](/documentation/Charts/ChartContent/lineStyle(by:))

Represents data using line styles.

[`position(by:axis:span:)`](/documentation/Charts/ChartContent/position(by:axis:span:))

Represents data using position.

[`symbol(by:)`](/documentation/Charts/ChartContent/symbol(by:))

Represents data using different kinds of symbols.

[`symbolSize(by:)`](/documentation/Charts/ChartContent/symbolSize(by:))

Represents data using symbol sizes.

### Annotating marks

[`annotation(position:alignment:spacing:content:)`](/documentation/Charts/ChartContent/annotation(position:alignment:spacing:content:)-65emh)

Annotates this mark or collection of marks with a view positioned
relative to its bounds.

[`annotation(position:alignment:spacing:content:)`](/documentation/Charts/ChartContent/annotation(position:alignment:spacing:content:)-26b2f)

Annotates this mark or collection of marks with a view positioned
relative to its bounds.

[`annotation(position:alignment:spacing:overflowResolution:content:)`](/documentation/Charts/ChartContent/annotation(position:alignment:spacing:overflowResolution:content:)-1kiow)

Annotates this mark or collection of marks with a view positioned
relative to its bounds.

[`annotation(position:alignment:spacing:overflowResolution:content:)`](/documentation/Charts/ChartContent/annotation(position:alignment:spacing:overflowResolution:content:)-6w4p3)

Annotates this mark or collection of marks with a view positioned
relative to its bounds.

### Layering chart content

[`compositingLayer()`](/documentation/Charts/ChartContent/compositingLayer())

[`compositingLayer(style:)`](/documentation/Charts/ChartContent/compositingLayer(style:))

[`zIndex(_:)`](/documentation/Charts/ChartContent/zIndex(_:))

Controls the display order of overlapping chart content.

### Masking and clipping

[`mask(content:)`](/documentation/Charts/ChartContent/mask(content:))

Masks chart content using the alpha channel of the specified content.

[`clipShape(_:style:)`](/documentation/Charts/ChartContent/clipShape(_:style:))

Sets a clip shape for the chart content.

### Configuring accessibility

[`accessibilityHidden(_:)`](/documentation/Charts/ChartContent/accessibilityHidden(_:))

Specifies whether to hide this chart content from system accessibility features.

[`accessibilityIdentifier(_:)`](/documentation/Charts/ChartContent/accessibilityIdentifier(_:))

Adds an identifier string to the chart content.

[`accessibilityLabel(_:)`](/documentation/Charts/ChartContent/accessibilityLabel(_:)-40zjp)

Adds a label to the chart content that describes its contents.

[`accessibilityLabel(_:)`](/documentation/Charts/ChartContent/accessibilityLabel(_:)-5gk8d)

Adds a label to the chart content that describes its contents.

[`accessibilityLabel(_:)`](/documentation/Charts/ChartContent/accessibilityLabel(_:)-28985)

Adds a label to the chart content that describes its contents.

[`accessibilityLabel(_:)`](/documentation/Charts/ChartContent/accessibilityLabel(_:)-9tbjv)

Adds a label to the chart content that describes its contents.

[`accessibilityValue(_:)`](/documentation/Charts/ChartContent/accessibilityValue(_:)-33c0e)

Adds a description of the value that the chart content contains.

[`accessibilityValue(_:)`](/documentation/Charts/ChartContent/accessibilityValue(_:)-4k545)

Adds a description of the value that the chart content contains.

[`accessibilityValue(_:)`](/documentation/Charts/ChartContent/accessibilityValue(_:)-5g7o4)

Adds a description of the value that the chart content contains.

[`accessibilityValue(_:)`](/documentation/Charts/ChartContent/accessibilityValue(_:)-4f8vo)

Adds a description of the value that the chart content contains.

### Implementing chart content

[`body`](/documentation/Charts/ChartContent/body-swift.property)

The content and behavior of the chart content.

[`Body`](/documentation/Charts/ChartContent/Body-swift.associatedtype)

The type of chart content contained in the body of this instance.

### Supporting types

[`AnyChartContent`](/documentation/Charts/AnyChartContent)

A type-erased chart content.

## Relationships

### Conforming Types

[`PointPlot`](/documentation/Charts/PointPlot)

[`BarPlot`](/documentation/Charts/BarPlot)

[`RectangleMark`](/documentation/Charts/RectangleMark)

[`VectorizedRulePlotContent`](/documentation/Charts/VectorizedRulePlotContent)

[`FunctionLinePlotContent`](/documentation/Charts/FunctionLinePlotContent)

[`BuilderConditional`](/documentation/Charts/BuilderConditional)

[`VectorizedPointPlotContent`](/documentation/Charts/VectorizedPointPlotContent)

[`VectorizedBarPlotContent`](/documentation/Charts/VectorizedBarPlotContent)

[`VectorizedAreaPlotContent`](/documentation/Charts/VectorizedAreaPlotContent)

[`FunctionAreaPlotContent`](/documentation/Charts/FunctionAreaPlotContent)

[`LinePlot`](/documentation/Charts/LinePlot)

[`SectorMark`](/documentation/Charts/SectorMark)

[`LineMark`](/documentation/Charts/LineMark)

[`AreaPlot`](/documentation/Charts/AreaPlot)

[`VectorizedSectorPlotContent`](/documentation/Charts/VectorizedSectorPlotContent)

[`SectorPlot`](/documentation/Charts/SectorPlot)

[`Plot`](/documentation/Charts/Plot)

[`VectorizedRectanglePlotContent`](/documentation/Charts/VectorizedRectanglePlotContent)

[`RuleMark`](/documentation/Charts/RuleMark)

[`RectanglePlot`](/documentation/Charts/RectanglePlot)

[`RulePlot`](/documentation/Charts/RulePlot)

[`AnyChartContent`](/documentation/Charts/AnyChartContent)

[`BarMark`](/documentation/Charts/BarMark)

[`PointMark`](/documentation/Charts/PointMark)

[`VectorizedLinePlotContent`](/documentation/Charts/VectorizedLinePlotContent)

[`AreaMark`](/documentation/Charts/AreaMark)

### Inherited By

[`VectorizedChartContent`](/documentation/Charts/VectorizedChartContent)

---

Copyright &copy; 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)