# Radial Chart Stacked

A half-circle arc with two series stacked end to end and the combined total beneath it.

Radial Chart Stacked is an open-source chart from suiss/ui for React, React Native, SwiftUI and Jetpack Compose. The @esuiss/ui CLI copies its source into your project, so you own the code.

Source: https://ui.suiss.app/docs/charts/radial-chart-stacked

**React**

**Example**

```tsx title="components/charts/radial-chart-stacked.tsx"
"use client"

import { PolarAngleAxis, RadialBar, RadialBarChart } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const visitors = { desktop: 1260, mobile: 570 }

const chartData = [visitors]

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile: { label: "Mobile", color: "var(--chart-2)" },
} satisfies ChartConfig

const total = visitors.desktop + visitors.mobile

export function RadialChartStacked() {
  return (
    <Card variant="filled" size="sm">
      <CardHeader>
        <CardTitle>Half, stacked</CardTitle>
        <CardDescription>Two series on one arc</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="relative">
          <ChartContainer
            config={chartConfig}
            className="aspect-auto h-44 w-full"
          >
            <RadialBarChart
              accessibilityLayer
              data={chartData}
              startAngle={180}
              endAngle={0}
              innerRadius="120%"
              outerRadius="170%"
              cy="86%"
            >
              <PolarAngleAxis
                type="number"
                domain={[0, total]}
                tick={false}
                axisLine={false}
              />
              <ChartTooltip
                cursor={false}
                content={<ChartTooltipContent hideLabel />}
              />
              <RadialBar
                dataKey="desktop"
                stackId="a"
                cornerRadius={6}
                fill="var(--color-desktop)"
                stroke="var(--muted)"
                strokeWidth={3}
              />
              <RadialBar
                dataKey="mobile"
                stackId="a"
                cornerRadius={6}
                fill="var(--color-mobile)"
                stroke="var(--muted)"
                strokeWidth={3}
              />
            </RadialBarChart>
          </ChartContainer>
          <div className="pointer-events-none absolute inset-x-0 bottom-[14%] flex flex-col items-center text-center">
            <span className="text-2xl font-semibold tracking-tight tabular-nums">
              {total.toLocaleString("en-US")}
            </span>
            <span className="text-xs text-muted-foreground">visitors</span>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
```

A half-circle arc where two series sit end to end and the combined total appears beneath. Use it to show a split of one total, like desktop versus mobile visitors, in a compact space.

## Installation

### CLI

```bash title="Terminal"
npx shadcn@latest add @esuiss/radial-chart-stacked
```

Works in any project with a `components.json`. See [Installation](https://ui.suiss.app/docs/installation#add-components) for the one-line registry setup. Or use the suiss/ui CLI:

```bash title="Terminal"
npx @esuiss/ui@latest add charts radial-chart-stacked
```

### Manual

1. Install the dependencies:

```bash title="Terminal"
npm install recharts
```

2. Add the pieces it builds on: [Card](https://ui.suiss.app/docs/components/card), [Chart](https://ui.suiss.app/docs/components/chart).

3. Copy the source into `components/charts/radial-chart-stacked.tsx`:

```tsx title="components/charts/radial-chart-stacked.tsx"
"use client"

import { PolarAngleAxis, RadialBar, RadialBarChart } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const visitors = { desktop: 1260, mobile: 570 }

const chartData = [visitors]

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile: { label: "Mobile", color: "var(--chart-2)" },
} satisfies ChartConfig

const total = visitors.desktop + visitors.mobile

export function RadialChartStacked() {
  return (
    <Card variant="filled" size="sm">
      <CardHeader>
        <CardTitle>Half, stacked</CardTitle>
        <CardDescription>Two series on one arc</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="relative">
          <ChartContainer
            config={chartConfig}
            className="aspect-auto h-44 w-full"
          >
            <RadialBarChart
              accessibilityLayer
              data={chartData}
              startAngle={180}
              endAngle={0}
              innerRadius="120%"
              outerRadius="170%"
              cy="86%"
            >
              <PolarAngleAxis
                type="number"
                domain={[0, total]}
                tick={false}
                axisLine={false}
              />
              <ChartTooltip
                cursor={false}
                content={<ChartTooltipContent hideLabel />}
              />
              <RadialBar
                dataKey="desktop"
                stackId="a"
                cornerRadius={6}
                fill="var(--color-desktop)"
                stroke="var(--muted)"
                strokeWidth={3}
              />
              <RadialBar
                dataKey="mobile"
                stackId="a"
                cornerRadius={6}
                fill="var(--color-mobile)"
                stroke="var(--muted)"
                strokeWidth={3}
              />
            </RadialBarChart>
          </ChartContainer>
          <div className="pointer-events-none absolute inset-x-0 bottom-[14%] flex flex-col items-center text-center">
            <span className="text-2xl font-semibold tracking-tight tabular-nums">
              {total.toLocaleString("en-US")}
            </span>
            <span className="text-xs text-muted-foreground">visitors</span>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
```

4. Update the import paths to match your project.

## Usage

```tsx
import { RadialChartStacked } from "@/components/charts/radial-chart-stacked"
```

```tsx
<RadialChartStacked />
```

Set your series values in `visitors`, add a matching entry with label and color for each key in `chartConfig`, and add one `RadialBar` per series with the same `stackId`. The arc's scale is set to the total, so the bars always fill it completely.

## Notes

The tooltip shows both values at once regardless of which segment you hover.

**React Native, SwiftUI, Jetpack Compose**

![Preview](https://ui.suiss.app/previews/charts-radial--stacked.light.webp)

```tsx title="uniwind/components/charts/radial-chart-stacked.tsx"
import { View } from "react-native"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  PolarAngleAxis,
  RadialBar,
  RadialBarChart,
} from "@/components/ui/chart"
import { Text } from "@/components/ui/text"

const visitors = { desktop: 1260, mobile: 570 }

const chartData = [visitors]

const chartConfig = {
  desktop: { label: "Desktop", color: "chart-1" },
  mobile: { label: "Mobile", color: "chart-2" },
} satisfies ChartConfig

const total = visitors.desktop + visitors.mobile

function formatTotal(value: number) {
  try {
    return new Intl.NumberFormat("en-US").format(value)
  } catch {
    return String(value).replace(/\B(?=(\d{3})+(?!\d))/g, ",")
  }
}

export function RadialChartStacked() {
  return (
    <Card variant="filled" size="sm">
      <CardHeader>
        <CardTitle>Half, stacked</CardTitle>
        <CardDescription>Two series on one arc</CardDescription>
      </CardHeader>
      <CardContent>
        <View>
          <View
            pointerEvents="none"
            className="absolute inset-x-0 bottom-[14%] items-center"
          >
            <Text className="text-2xl font-semibold tracking-tight tabular-nums">
              {formatTotal(total)}
            </Text>
            <Text className="text-xs text-muted-foreground">visitors</Text>
          </View>
          <ChartContainer
            config={chartConfig}
            accessibilityLabel="Half, stacked"
            className="h-44 w-full"
          >
            <RadialBarChart
              data={chartData}
              startAngle={180}
              endAngle={0}
              innerRadius="120%"
              outerRadius="170%"
              cy="86%"
            >
              <PolarAngleAxis domain={[0, total]} />
              <ChartTooltip
                cursor={false}
                content={<ChartTooltipContent hideLabel />}
              />
              <RadialBar
                dataKey="desktop"
                stackId="a"
                cornerRadius={6}
                fill="chart-1"
                stroke="muted"
                strokeWidth={3}
              />
              <RadialBar
                dataKey="mobile"
                stackId="a"
                cornerRadius={6}
                fill="chart-2"
                stroke="muted"
                strokeWidth={3}
              />
            </RadialBarChart>
          </ChartContainer>
        </View>
      </CardContent>
    </Card>
  )
}
```

```swift title="swift/Charts/RadialChartStacked.swift"
import Charts
import SwiftUI

private let visitors: [(key: String, value: Double)] = [("desktop", 1260), ("mobile", 570)]

private let chartConfig: ChartConfig = [
  "desktop": .init("Desktop", color: EsuissColor.chart1),
  "mobile": .init("Mobile", color: EsuissColor.chart2),
]

private let total = visitors.reduce(0) { $0 + $1.value }

public struct RadialChartStacked: View {
  @State private var selection: Int?

  public init() {}

  public var body: some View {
    let outer: CGFloat = 141.1
    Card(.filled, size: .sm) {
      CardHeader("Half, stacked", description: "Two series on one arc")
      CardContent {
        ChartContainer(config: chartConfig) {
          ChartAnimator { progress in
            Chart {
              ForEach(visitors, id: \.key) { item in
                SectorMark(angle: .value("Visitors", item.value * progress), innerRadius: .ratio(0.706), angularInset: 1.5)
                  .cornerRadius(6)
                  .foregroundStyle(chartConfig.color(item.key))
              }
              ChartSectorRest(total: total, progress: progress)
              SectorMark(angle: .value("Visitors", total))
                .foregroundStyle(.clear)
            }
            .contentShape(Rectangle().size(width: outer + 28, height: outer * 2).offset(x: outer - 28))
            .chartTooltip(
              angle: visitors.map(\.value),
              labels: visitors.map { chartConfig.label($0.key) },
              startAngle: .degrees(-90),
              endAngle: .degrees(90),
              innerRadius: 0.706,
              selection: $selection,
              accessibilityLabel: "Half, stacked",
              items: { _ in visitors.map { ChartTooltipItem($0.key, value: $0.value) } }
            ) { payload in
              ChartTooltipContent(payload, hideLabel: true)
            }
            .frame(width: outer * 2, height: outer * 2)
            .padding(.top, 6.7)
            .frame(maxWidth: .infinity)
            .frame(height: 176, alignment: .top)
            .overlay(alignment: .bottom) {
              VStack(spacing: 0) {
                Text(total, format: .number)
                  .textStyle(.xl2, weight: .semibold)
                  .monospacedDigit()
                Text("visitors")
                  .textStyle(.xs)
                  .foregroundStyle(EsuissColor.mutedForeground)
              }
              .padding(.bottom, 176 * 0.14)
              .allowsHitTesting(false)
              .accessibilityHidden(true)
            }
          }
        }
        .frame(height: 176)
      }
    }
  }
}
```

```kt title="kotlin/charts/RadialChartStacked.kt"
package com.esuiss.ui.charts

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.clearAndSetSemantics
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.Card
import com.esuiss.ui.components.CardContent
import com.esuiss.ui.components.CardHeader
import com.esuiss.ui.components.CardSize
import com.esuiss.ui.components.CardVariant
import com.esuiss.ui.components.ChartConfig
import com.esuiss.ui.components.ChartConfigItem
import com.esuiss.ui.components.ChartContainer
import com.esuiss.ui.components.ChartTooltipContent
import com.esuiss.ui.components.RadialBarChart
import com.esuiss.ui.theme.EsuissTheme
import com.esuiss.ui.theme.Typography
import java.text.NumberFormat
import java.util.Locale

private class RadialStackedVisitors(val desktop: Double, val mobile: Double)

private val visitors = RadialStackedVisitors(1260.0, 570.0)

private val chartData = listOf(visitors)

private val chartConfig = ChartConfig(
    "desktop" to ChartConfigItem("Desktop") { chart1 },
    "mobile" to ChartConfigItem("Mobile") { chart2 },
)

private val total = visitors.desktop + visitors.mobile

@Composable
fun RadialChartStacked(modifier: Modifier = Modifier) {
    val colors = EsuissTheme.colors
    val number = NumberFormat.getNumberInstance(Locale.US)
    Card(modifier, variant = CardVariant.Filled, size = CardSize.Sm) {
        CardHeader("Half, stacked", description = "Two series on one arc")
        CardContent {
            Box(
                Modifier
                    .fillMaxWidth()
                    .height(176.dp),
            ) {
                ChartContainer(chartConfig, Modifier.matchParentSize()) {
                    RadialBarChart(
                        chartData,
                        startAngle = 180f,
                        endAngle = 0f,
                        innerRadius = 1.2f,
                        outerRadius = 1.7f,
                        cy = 0.86f,
                        accessibilityLabel = "Half, stacked, ${number.format(total)} visitors",
                    ) {
                        PolarAngleAxis(0.0..total)
                        ChartTooltip { ChartTooltipContent(hideLabel = true) }
                        RadialBar("desktop", value = { it.desktop }, stackId = "a", cornerRadius = 6.dp, stroke = colors.muted, strokeWidth = 3.dp)
                        RadialBar("mobile", value = { it.mobile }, stackId = "a", cornerRadius = 6.dp, stroke = colors.muted, strokeWidth = 3.dp)
                    }
                }
                Column(
                    Modifier
                        .align(Alignment.BottomCenter)
                        .padding(bottom = 24.6.dp)
                        .clearAndSetSemantics {},
                    horizontalAlignment = Alignment.CenterHorizontally,
                ) {
                    BasicText(
                        number.format(total),
                        style = Typography.xl2.copy(color = colors.foreground, fontWeight = FontWeight.SemiBold, fontFeatureSettings = "tnum"),
                    )
                    BasicText("visitors", style = Typography.xs.copy(color = colors.mutedForeground))
                }
            }
        }
    }
}
```

A `RadialBarChart` drawn from 180 to 0 degrees, with two `RadialBar` series sharing a `stackId` on a domain equal to their sum. `chartData` is a single record with `desktop` and `mobile` counts, and the total is `Text` under the arc. Pressing the arc shows a tooltip.

## Installation

**React Native**

```bash title="Terminal"
npx shadcn@latest add @esuiss-rn/radial-chart-stacked
```

See [Installation](https://ui.suiss.app/docs/installation) for the `components.json` setup. Or use the suiss/ui CLI:

```bash title="Terminal"
npx @esuiss/ui@latest add radial-chart-stacked
```

**SwiftUI**

```bash title="Terminal"
npx @esuiss/ui@latest add radial-chart-stacked --platform swift
```

**Jetpack Compose**

```bash title="Terminal"
npx @esuiss/ui@latest add radial-chart-stacked --platform kotlin
```

The CLI also adds what it builds on: [Card](https://ui.suiss.app/docs/components/card), [Chart](https://ui.suiss.app/docs/components/chart), [Text](https://ui.suiss.app/docs/components/text).

### Manual

**React Native**

**Uniwind**

1. Add the pieces it builds on: [Card](https://ui.suiss.app/docs/components/card), [Chart](https://ui.suiss.app/docs/components/chart), [Text](https://ui.suiss.app/docs/components/text).

2. Copy the source into `components/charts/radial-chart-stacked.tsx`:

- `uniwind/components/charts/radial-chart-stacked.tsx`: shown above

3. Update the import paths to match your project.

**NativeWind**

1. Add the pieces it builds on: [Card](https://ui.suiss.app/docs/components/card), [Chart](https://ui.suiss.app/docs/components/chart), [Text](https://ui.suiss.app/docs/components/text).

2. Copy the source into `components/charts/radial-chart-stacked.tsx`:

```tsx title="nativewind/components/charts/radial-chart-stacked.tsx"
import { View } from "react-native"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  PolarAngleAxis,
  RadialBar,
  RadialBarChart,
} from "@/components/ui/chart"
import { Text } from "@/components/ui/text"

const visitors = { desktop: 1260, mobile: 570 }

const chartData = [visitors]

const chartConfig = {
  desktop: { label: "Desktop", color: "chart-1" },
  mobile: { label: "Mobile", color: "chart-2" },
} satisfies ChartConfig

const total = visitors.desktop + visitors.mobile

function formatTotal(value: number) {
  try {
    return new Intl.NumberFormat("en-US").format(value)
  } catch {
    return String(value).replace(/\B(?=(\d{3})+(?!\d))/g, ",")
  }
}

export function RadialChartStacked() {
  return (
    <Card variant="filled" size="sm">
      <CardHeader>
        <CardTitle>Half, stacked</CardTitle>
        <CardDescription>Two series on one arc</CardDescription>
      </CardHeader>
      <CardContent>
        <View>
          <View
            pointerEvents="none"
            className="absolute inset-x-0 bottom-[14%] items-center"
          >
            <Text className="text-2xl font-semibold tracking-tight tabular-nums">
              {formatTotal(total)}
            </Text>
            <Text className="text-xs text-muted-foreground">visitors</Text>
          </View>
          <ChartContainer
            config={chartConfig}
            accessibilityLabel="Half, stacked"
            className="h-44 w-full"
          >
            <RadialBarChart
              data={chartData}
              startAngle={180}
              endAngle={0}
              innerRadius="120%"
              outerRadius="170%"
              cy="86%"
            >
              <PolarAngleAxis domain={[0, total]} />
              <ChartTooltip
                cursor={false}
                content={<ChartTooltipContent hideLabel />}
              />
              <RadialBar
                dataKey="desktop"
                stackId="a"
                cornerRadius={6}
                fill="chart-1"
                stroke="muted"
                strokeWidth={3}
              />
              <RadialBar
                dataKey="mobile"
                stackId="a"
                cornerRadius={6}
                fill="chart-2"
                stroke="muted"
                strokeWidth={3}
              />
            </RadialBarChart>
          </ChartContainer>
        </View>
      </CardContent>
    </Card>
  )
}
```

3. Update the import paths to match your project.

**StyleSheet**

1. Add the pieces it builds on: [Card](https://ui.suiss.app/docs/components/card), [Chart](https://ui.suiss.app/docs/components/chart), [Text](https://ui.suiss.app/docs/components/text).

2. Copy the source into `components/charts/radial-chart-stacked.tsx`:

```tsx title="stylesheet/components/charts/radial-chart-stacked.tsx"
import { StyleSheet, View } from "react-native"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  PolarAngleAxis,
  RadialBar,
  RadialBarChart,
} from "@/components/ui/chart"
import { Text } from "@/components/ui/text"
import { fontSize, useTheme } from "@/components/ui/theme"

const visitors = { desktop: 1260, mobile: 570 }

const chartData = [visitors]

const chartConfig = {
  desktop: { label: "Desktop", color: "chart-1" },
  mobile: { label: "Mobile", color: "chart-2" },
} satisfies ChartConfig

const total = visitors.desktop + visitors.mobile

function formatTotal(value: number) {
  try {
    return new Intl.NumberFormat("en-US").format(value)
  } catch {
    return String(value).replace(/\B(?=(\d{3})+(?!\d))/g, ",")
  }
}

const styles = StyleSheet.create({
  overlay: {
    position: "absolute",
    left: 0,
    right: 0,
    bottom: "14%",
    alignItems: "center",
  },
  value: {
    ...fontSize["2xl"],
    fontWeight: "600",
    letterSpacing: -0.7,
    fontVariant: ["tabular-nums"],
  },
  caption: { ...fontSize.xs },
  chart: { height: 176 },
})

export function RadialChartStacked() {
  const { colors } = useTheme()
  return (
    <Card variant="filled" size="sm">
      <CardHeader>
        <CardTitle>Half, stacked</CardTitle>
        <CardDescription>Two series on one arc</CardDescription>
      </CardHeader>
      <CardContent>
        <View>
          <View pointerEvents="none" style={styles.overlay}>
            <Text style={styles.value}>{formatTotal(total)}</Text>
            <Text style={[styles.caption, { color: colors.mutedForeground }]}>
              visitors
            </Text>
          </View>
          <ChartContainer
            config={chartConfig}
            accessibilityLabel="Half, stacked"
            style={styles.chart}
          >
            <RadialBarChart
              data={chartData}
              startAngle={180}
              endAngle={0}
              innerRadius="120%"
              outerRadius="170%"
              cy="86%"
            >
              <PolarAngleAxis domain={[0, total]} />
              <ChartTooltip
                cursor={false}
                content={<ChartTooltipContent hideLabel />}
              />
              <RadialBar
                dataKey="desktop"
                stackId="a"
                cornerRadius={6}
                fill="chart-1"
                stroke="muted"
                strokeWidth={3}
              />
              <RadialBar
                dataKey="mobile"
                stackId="a"
                cornerRadius={6}
                fill="chart-2"
                stroke="muted"
                strokeWidth={3}
              />
            </RadialBarChart>
          </ChartContainer>
        </View>
      </CardContent>
    </Card>
  )
}
```

3. Update the import paths to match your project.

**SwiftUI**

1. Target iOS 17 or later.

2. Copy the theme files every view uses:

- `swift/Theme/Theme.swift`: [source](https://github.com/e-suiss/ui/blob/main/packages/mobile/swiftui/Sources/EsuissUI/Theme/Theme.swift)

- `swift/Theme/Tokens.swift`: [source](https://github.com/e-suiss/ui/blob/main/packages/mobile/swiftui/Sources/EsuissUI/Theme/Tokens.swift)

3. Copy the source and every file it uses:

- `swift/Charts/RadialChartStacked.swift`: shown above

- `swift/Components/Card.swift`: see [Card](https://ui.suiss.app/docs/components/card.md)

- `swift/Components/Chart.swift`: see [Chart](https://ui.suiss.app/docs/components/chart.md)

- `swift/Components/Haptics.swift`: see [Haptics](https://ui.suiss.app/docs/components/haptics.md)

- `swift/Components/Item.swift`: see [Item](https://ui.suiss.app/docs/components/item.md)

- `swift/Components/Separator.swift`: see [Separator](https://ui.suiss.app/docs/components/separator.md)

- `swift/Components/TextVariant.swift`: [source](https://github.com/e-suiss/ui/blob/main/packages/mobile/swiftui/Sources/EsuissUI/Components/TextVariant.swift)

4. Add the files to your app target.

**Jetpack Compose**

1. Set `minSdk` to 24 or higher and add the dependencies:

```kotlin title="build.gradle.kts"
implementation(platform("androidx.compose:compose-bom:2026.09.00"))
implementation("androidx.compose.foundation:foundation")
implementation("androidx.compose.ui:ui")
```

2. Copy the theme files every view uses:

- `kotlin/theme/Theme.kt`: [source](https://github.com/e-suiss/ui/blob/main/packages/mobile/kotlin/ui/src/main/kotlin/com/esuiss/ui/theme/Theme.kt)

- `kotlin/theme/Tokens.kt`: [source](https://github.com/e-suiss/ui/blob/main/packages/mobile/kotlin/ui/src/main/kotlin/com/esuiss/ui/theme/Tokens.kt)

3. Copy the source and every file it uses:

- `kotlin/charts/RadialChartStacked.kt`: shown above

- `kotlin/components/Card.kt`: see [Card](https://ui.suiss.app/docs/components/card.md)

- `kotlin/components/Chart.kt`: see [Chart](https://ui.suiss.app/docs/components/chart.md)

- `kotlin/components/Content.kt`: [source](https://github.com/e-suiss/ui/blob/main/packages/mobile/kotlin/ui/src/main/kotlin/com/esuiss/ui/components/Content.kt)

- `kotlin/components/FormSupport.kt`: [source](https://github.com/e-suiss/ui/blob/main/packages/mobile/kotlin/ui/src/main/kotlin/com/esuiss/ui/components/FormSupport.kt)

- `kotlin/components/Haptics.kt`: see [Haptics](https://ui.suiss.app/docs/components/haptics.md)

- `kotlin/components/Icon.kt`: see [Icon](https://ui.suiss.app/docs/components/icon.md)

4. Update the `com.esuiss.ui` package names to match your project.

## Usage

```tsx
import { RadialChartStacked } from "@/components/charts/radial-chart-stacked"
```

```tsx
<RadialChartStacked />
```

Replace the counts in `visitors`; the total and domain follow. Rename the series in `chartConfig` and in the `RadialBar` `dataKey` and `fill` props. The component takes no props.