Chart types

FioriCharts supports 17 chart types, all driven by the same ChartModel + ChartView pattern. Set chartType in the model and the view renders the appropriate chart automatically.

Standard charts

Plots one or more series as connected line segments. nil values produce visible gaps.

let model = ChartModel(
    chartType: .line,
    data: [
        [nil, 220, nil, 250, 200, nil, 230],
        [160, nil, 130, 170, nil, 190, 180]
    ],
    titlesForCategory: [["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]],
    selectionEnabled: true
)

ChartView(model)
    .frame(width: 360, height: 220)

Use indexesOfSecondaryValueAxis to assign one or more series to a secondary Y axis.

Clusters vertical bars side-by-side for each category. Ideal for comparing multiple series at the same category.

let model = ChartModel(
    chartType: .column,
    data: [
        [200, 170, 165, 143, 166, 112, 110],
        [150, 120, 130, 135, 120, 138, 137]
    ],
    titlesForCategory: [["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]]
)

ChartView(model)
    .frame(width: 360, height: 220)

The first series renders as columns; each additional series renders as a line. Use indexesOfColumnSeries to override which series are columns.

let model = ChartModel(
    chartType: .combo,
    data: [
        [200, 170, 165, 143, 166, 112, 110], // columns by default
        [150, 120, 130, 135, 120, 138, 137]  // line
    ],
    titlesForCategory: [["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]]
)

ChartView(model)
    .frame(width: 360, height: 220)

To render only the second series as columns:

model.indexesOfColumnSeries = IndexSet([1])

Horizontal version of the column chart. The category axis becomes the Y axis and the numeric axis becomes the X axis.

let model = ChartModel(
    chartType: .bar,
    data: [
        [200, 170, 165, 143, 166],
        [150, 120, 130, 135, 120]
    ],
    titlesForCategory: [["Sales", "Marketing", "Engineering", "Support", "Design"]]
)

ChartView(model)
    .frame(width: 360, height: 220)

Stacks series values on top of each other in a single column per category. Useful for showing part-to-whole relationships.

let model = ChartModel(
    chartType: .stackedColumn,
    data: [
        [120, 90, 85, 70, 95],
        [80, 80, 80, 73, 71],
        [60, 50, 55, 48, 60]
    ],
    titlesForCategory: [["Q1", "Q2", "Q3", "Q4", "Q5"]]
)

ChartView(model)
    .frame(width: 360, height: 220)

Horizontal version of the stacked column chart. Series values are stacked left-to-right.

let model = ChartModel(
    chartType: .stackedBar,
    data: [
        [120, 90, 85, 70],
        [80, 80, 80, 73],
        [60, 50, 55, 48]
    ],
    titlesForCategory: [["North", "South", "East", "West"]]
)

ChartView(model)
    .frame(width: 360, height: 220)

Similar to a line chart, but the area below each line is filled. Supports a secondary Y axis via indexesOfSecondaryValueAxis.

let model = ChartModel(
    chartType: .area,
    data: [
        [200, 170, 165, 143, 166, 112, 110],
        [150, 120, 130, 135, 120, 138, 137]
    ],
    titlesForCategory: [["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]]
)

ChartView(model)
    .frame(width: 360, height: 220)

Shows cumulative value changes as a series of positive (rising) and negative (falling) bars. Use indexesOfTotalsCategories to mark total columns; supply nil in data at those positions to have the chart auto-calculate the running total.

let model = ChartModel(
    chartType: .waterfall,
    data: [[1200, -300, 450, -180, nil]],
    titlesForCategory: [["Start", "Costs", "Revenue", "Taxes", "Net"]],
    indexesOfTotalsCategories: [4]
)

ChartView(model)
    .frame(width: 360, height: 220)

Plots data points by x/y coordinates. Each data point is supplied as [x, y]. Use the data3d initializer.

let model = ChartModel(
    chartType: .scatter,
    data3d: [
        [[10, 200], [30, 340], [50, 280], [70, 400], [90, 150]],
        [[20, 180], [40, 290], [60, 310], [80, 220], [100, 370]]
    ]
)

ChartView(model)
    .frame(width: 360, height: 260)

A scatter chart where a third value controls the bubble diameter. Supply each data point as [x, y, radius].

let model = ChartModel(
    chartType: .bubble,
    data3d: [
        [[10, 200, 30], [30, 340, 50], [50, 280, 20]],
        [[20, 180, 40], [40, 290, 25], [60, 310, 60]]
    ]
)

ChartView(model)
    .frame(width: 360, height: 260)

A circular chart divided into segments. Each value in the single inner array becomes one segment. selectionMode is automatically set to .multiple for donut charts.

let model = ChartModel(
    chartType: .donut,
    data: [[1550, 1120, 830, 420]],
    titlesForCategory: [["Q1", "Q2", "Q3", "Q4"]],
    colorsForCategory: [
        0: [
            0: .red,
            1: .orange,
            2: .green,
            3: .blue
        ]
    ]
)

ChartView(model)
    .frame(width: 240, height: 240)

Renders OHLC price data as a line series with time-based x-axis formatting. Use the data3d initializer; each category element is an array of OHLC values.

let model = ChartModel(
    chartType: .stock,
    data3d: [
        [
            [142.50, 145.20, 141.80, 144.90],
            [144.90, 148.00, 143.50, 147.10],
            [147.10, 147.80, 144.20, 145.30]
        ]
    ],
    titlesForCategory: [["2024-01-02", "2024-01-03", "2024-01-04"]]
)

ChartView(model)
    .frame(width: 360, height: 220)

Use indexOfStockSeries to switch between multiple stock series.

Micro charts

Micro charts are compact, annotation-sized charts designed for use in lists, tables, and object headers. They share the same ChartModel + ChartView API.

Micro area (.micro_area)

A compact sparkline with a filled area below the line.

let model = ChartModel(
    chartType: .micro_area,
    data: [[10, 20, 15, 30, 25, 40, 35, 50]]
)

ChartView(model)
    .frame(width: 120, height: 40)

Micro column (.micro_column)

A compact vertical bar sparkline.

let model = ChartModel(
    chartType: .micro_column,
    data: [[10, 20, 15, 30, 25, 40, 35, 50]]
)

ChartView(model)
    .frame(width: 120, height: 40)

Micro bullet (.micro_bullet)

A bullet chart that compares a primary value against a target and one or more ranges. Supply values in the order: [actual, target, range1, range2, ...].

let model = ChartModel(
    chartType: .micro_bullet,
    data: [[75, 85, 50, 100]] // actual=75, target=85, ranges=[50,100]
)

ChartView(model)
    .frame(width: 180, height: 44)

Harvey ball (.micro_harvey_ball)

A pie-like circle that shows percentage completion. Supply a single value between 0 and 1 (or 0–100, depending on your scale).

let model = ChartModel(
    chartType: .micro_harvey_ball,
    data: [[0.75]] // 75% complete
)

ChartView(model)
    .frame(width: 44, height: 44)

Micro radial (.micro_radial)

An arc-style radial progress indicator.

let model = ChartModel(
    chartType: .micro_radial,
    data: [[0.6]] // 60% complete
)

ChartView(model)
    .frame(width: 44, height: 44)

No-data view

ChartView displays a default empty state when data is empty. You can supply a custom no-data view:

ChartView(model, noDataView: NoDataView {
    VStack {
        Image(systemName: "chart.bar.xaxis")
            .font(.largeTitle)
        Text("No data available")
    }
})
.frame(width: 360, height: 220)

Get Started

FioriThemeManager

FioriSwiftUICore

FioriCharts

Guides

Standard charts

Micro charts

No-data view

Build docs developers (and LLMs) love

Get Started

FioriThemeManager

FioriSwiftUICore

FioriCharts

Guides

​Standard charts

​Micro charts

​No-data view

Build docs developers (and LLMs) love

Standard charts

Micro charts

No-data view