Skip to main content
FioriSwiftUICore and FioriCharts are separate modules within the same Swift package. FioriSwiftUICore does not embed charts directly, but because both modules ship in the same FioriSwiftUI umbrella product, you can freely compose ChartView (from FioriCharts) inside any FioriSwiftUICore component that accepts an arbitrary SwiftUI view.
To use FioriCharts types, add FioriSwiftUI (the umbrella product) or both FioriSwiftUICore and FioriCharts to your target. Either approach gives your code access to both modules.

​
Embedding a chart in a Card

The cardBody parameter of Card accepts any SwiftUI view, making it the natural place to embed a chart. 
import FioriSwiftUICore
import FioriCharts

struct SalesCard: View {
    let chartModel: ChartModel

    var body: some View {
        Card(
            title: "Monthly revenue",
            subtitle: "Jan – Jun 2025",
            kpi: KPIItemData.components([.unit("$"), .metric("2.4"), .unit("M")]),
            kpiCaption: "Total",
            cardBody: {
                ChartView(chartModel)
                    .frame(height: 200)
            },
            action: FioriButton(title: "View details")
        )
    }
}

​
Embedding a chart in ObjectHeader

ObjectHeader exposes a headerChart slot that was designed specifically to hold a compact chart: 
ObjectHeader(
    title: "Plant efficiency",
    headerChart: {
        ChartView(sparklineModel)
            .frame(width: 120, height: 50)
    }
)

​
Available chart types

The FioriCharts module supports the following chart types via ChartModel:
Chart typeSupported
Area✅
Line✅
Column✅
Stacked column✅
Bar✅
Stacked bar✅
Bubble✅
Scatter✅
Waterfall✅
Combo✅
Donut✅
Bullet✅
Harvey Ball✅
Radial✅
Stocks (line)✅

​
Sizing charts inside form components

All FioriSwiftUICore container components use SwiftUI’s standard layout system. Wrap ChartView in an explicit .frame() so the chart occupies a predictable amount of vertical space within the card or header: 
Card(title: "Stock trend") {
    ChartView(stockModel)
        .frame(height: 160)
        .padding(.vertical, 8)
}
Set the chart’s ChartModel.chartType to .line or .area for compact sparkline-style views inside cards. Use .column or .stacked for detailed analytic cards where the user needs to read individual values.

​
Further reading

See the FioriCharts overview for the full ChartModel API reference and chart configuration options.

Build docs developers (and LLMs) love

Get started for freeTalk to us