---
title: ChartContent
framework: charts
role: symbol
role_heading: Protocol
path: charts/chartcontent
---

# ChartContent

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

## Declaration

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

## Overview

Overview You build a Chart by adding instances that conform to the ChartContent protocol to the chart’s content closure. The following example adds three explicit 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:

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 ForEach, or any combination of these. For some mark types, like 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(_:) 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)

## Topics

### Styling marks

- [foregroundStyle(_:)](charts/chartcontent/foregroundstyle(_:).md)
- [opacity(_:)](charts/chartcontent/opacity(_:).md)
- [blur(radius:)](charts/chartcontent/blur(radius:).md)
- [cornerRadius(_:style:)](charts/chartcontent/cornerradius(_:style:).md)
- [lineStyle(_:)](charts/chartcontent/linestyle(_:).md)
- [shadow(color:radius:x:y:)](charts/chartcontent/shadow(color:radius:x:y:).md)
- [interpolationMethod(_:)](charts/chartcontent/interpolationmethod(_:).md)

### Positioning marks

- [offset(_:)](charts/chartcontent/offset(_:).md)
- [offset(x:y:)](charts/chartcontent/offset(x:y:).md)
- [offset(x:yStart:yEnd:)](charts/chartcontent/offset(x:ystart:yend:).md)
- [offset(xStart:xEnd:y:)](charts/chartcontent/offset(xstart:xend:y:).md)
- [offset(xStart:xEnd:yStart:yEnd:)](charts/chartcontent/offset(xstart:xend:ystart:yend:).md)
- [alignsMarkStylesWithPlotArea(_:)](charts/chartcontent/alignsmarkstyleswithplotarea(_:).md)

### Setting symbol appearance

- [symbol(_:)](charts/chartcontent/symbol(_:).md)
- [symbol(symbol:)](charts/chartcontent/symbol(symbol:).md)
- [symbolSize(_:)](charts/chartcontent/symbolsize(_:)-7s0vk.md)
- [symbolSize(_:)](charts/chartcontent/symbolsize(_:)-8dtyt.md)

### Encoding data into mark characteristics

- [foregroundStyle(by:)](charts/chartcontent/foregroundstyle(by:).md)
- [lineStyle(by:)](charts/chartcontent/linestyle(by:).md)
- [position(by:axis:span:)](charts/chartcontent/position(by:axis:span:).md)
- [symbol(by:)](charts/chartcontent/symbol(by:).md)
- [symbolSize(by:)](charts/chartcontent/symbolsize(by:).md)

### Annotating marks

- [annotation(position:alignment:spacing:content:)](charts/chartcontent/annotation(position:alignment:spacing:content:)-65emh.md)
- [annotation(position:alignment:spacing:content:)](charts/chartcontent/annotation(position:alignment:spacing:content:)-26b2f.md)
- [annotation(position:alignment:spacing:overflowResolution:content:)](charts/chartcontent/annotation(position:alignment:spacing:overflowresolution:content:)-1kiow.md)
- [annotation(position:alignment:spacing:overflowResolution:content:)](charts/chartcontent/annotation(position:alignment:spacing:overflowresolution:content:)-6w4p3.md)

### Layering chart content

- [compositingLayer()](charts/chartcontent/compositinglayer().md)
- [compositingLayer(style:)](charts/chartcontent/compositinglayer(style:).md)
- [zIndex(_:)](charts/chartcontent/zindex(_:).md)

### Masking and clipping

- [mask(content:)](charts/chartcontent/mask(content:).md)
- [clipShape(_:style:)](charts/chartcontent/clipshape(_:style:).md)

### Configuring accessibility

- [accessibilityHidden(_:)](charts/chartcontent/accessibilityhidden(_:).md)
- [accessibilityIdentifier(_:)](charts/chartcontent/accessibilityidentifier(_:).md)
- [accessibilityLabel(_:)](charts/chartcontent/accessibilitylabel(_:)-40zjp.md)
- [accessibilityLabel(_:)](charts/chartcontent/accessibilitylabel(_:)-5gk8d.md)
- [accessibilityLabel(_:)](charts/chartcontent/accessibilitylabel(_:)-28985.md)
- [accessibilityLabel(_:)](charts/chartcontent/accessibilitylabel(_:)-9tbjv.md)
- [accessibilityValue(_:)](charts/chartcontent/accessibilityvalue(_:)-33c0e.md)
- [accessibilityValue(_:)](charts/chartcontent/accessibilityvalue(_:)-4k545.md)
- [accessibilityValue(_:)](charts/chartcontent/accessibilityvalue(_:)-5g7o4.md)
- [accessibilityValue(_:)](charts/chartcontent/accessibilityvalue(_:)-4f8vo.md)

### Implementing chart content

- [body](charts/chartcontent/body-swift.property.md)
- [Body](charts/chartcontent/body-swift.associatedtype.md)

### Supporting types

- [AnyChartContent](charts/anychartcontent.md)

## Relationships

### Inherited By

- [VectorizedChartContent](charts/vectorizedchartcontent.md)

### Conforming Types

- [AnyChartContent](charts/anychartcontent.md)
- [AreaMark](charts/areamark.md)
- [AreaPlot](charts/areaplot.md)
- [BarMark](charts/barmark.md)
- [BarPlot](charts/barplot.md)
- [BuilderConditional](charts/builderconditional.md)
- [FunctionAreaPlotContent](charts/functionareaplotcontent.md)
- [FunctionLinePlotContent](charts/functionlineplotcontent.md)
- [LineMark](charts/linemark.md)
- [LinePlot](charts/lineplot.md)
- [Plot](charts/plot.md)
- [PointMark](charts/pointmark.md)
- [PointPlot](charts/pointplot.md)
- [RectangleMark](charts/rectanglemark.md)
- [RectanglePlot](charts/rectangleplot.md)
- [RuleMark](charts/rulemark.md)
- [RulePlot](charts/ruleplot.md)
- [SectorMark](charts/sectormark.md)
- [SectorPlot](charts/sectorplot.md)
- [VectorizedAreaPlotContent](charts/vectorizedareaplotcontent.md)
- [VectorizedBarPlotContent](charts/vectorizedbarplotcontent.md)
- [VectorizedLinePlotContent](charts/vectorizedlineplotcontent.md)
- [VectorizedPointPlotContent](charts/vectorizedpointplotcontent.md)
- [VectorizedRectanglePlotContent](charts/vectorizedrectangleplotcontent.md)
- [VectorizedRulePlotContent](charts/vectorizedruleplotcontent.md)
- [VectorizedSectorPlotContent](charts/vectorizedsectorplotcontent.md)

## See Also

### Charts

- [Creating a chart using Swift Charts](charts/creating-a-chart-using-swift-charts.md)
- [Visualizing your app’s data](charts/visualizing-your-app-s-data.md)
- [Chart](charts/chart.md)
- [ChartContentBuilder](charts/chartcontentbuilder.md)
- [Plot](charts/plot.md)