# Radial Chart Batteries

A row of small battery rings, one per device, that turn red when charge is at or below 20%.

Radial Chart Batteries 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-batteries

**React**

**Example**

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

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

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

const devices = [
  { name: "Phone", level: 82 },
  { name: "Earbuds", level: 46 },
  { name: "Watch", level: 18 },
  { name: "Case", level: 100 },
]

const LOW = 20

function Battery({ name, level }: { name: string; level: number }) {
  const chartConfig = {
    level: {
      label: name,
      color: level <= LOW ? "var(--color-red-500)" : "var(--color-green-500)",
    },
  } satisfies ChartConfig

  return (
    <div className="flex flex-col items-center gap-2">
      <div className="relative size-16">
        <ChartContainer
          config={chartConfig}
          aria-hidden
          className="aspect-square size-full"
        >
          <RadialBarChart
            accessibilityLayer={false}
            data={[{ level, fill: "var(--color-level)" }]}
            innerRadius="78%"
            outerRadius="100%"
            startAngle={90}
            endAngle={-270}
            barSize={6}
          >
            <PolarAngleAxis type="number" domain={[0, 100]} tick={false} />
            <RadialBar
              dataKey="level"
              cornerRadius={6}
              isAnimationActive={false}
              background={{
                fill: "color-mix(in oklab, var(--color-level) 22%, transparent)",
              }}
            />
          </RadialBarChart>
        </ChartContainer>
        <span
          aria-hidden
          className="absolute inset-0 flex items-center justify-center text-xs font-semibold text-muted-foreground"
        >
          {name[0]}
        </span>
      </div>
      <span className="text-base font-semibold tabular-nums">{level}%</span>
      <span className="text-xs text-muted-foreground">{name}</span>
    </div>
  )
}

export function RadialChartBatteries() {
  return (
    <Card variant="filled" size="sm">
      <CardHeader>
        <CardTitle>Batteries</CardTitle>
        <CardDescription>Charge left on each device</CardDescription>
      </CardHeader>
      <CardContent>
        <ul className="grid grid-cols-4 gap-2 py-4">
          {devices.map((device) => (
            <li key={device.name}>
              <Battery {...device} />
            </li>
          ))}
        </ul>
      </CardContent>
    </Card>
  )
}
```

A row of small battery rings, one per device, that switch from green to red when the charge drops to the low threshold. Use compact rings like these for status at a glance, in widgets, settings pages or device lists.

## Installation

### CLI

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

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-batteries
```

### 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-batteries.tsx`:

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

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

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

const devices = [
  { name: "Phone", level: 82 },
  { name: "Earbuds", level: 46 },
  { name: "Watch", level: 18 },
  { name: "Case", level: 100 },
]

const LOW = 20

function Battery({ name, level }: { name: string; level: number }) {
  const chartConfig = {
    level: {
      label: name,
      color: level <= LOW ? "var(--color-red-500)" : "var(--color-green-500)",
    },
  } satisfies ChartConfig

  return (
    <div className="flex flex-col items-center gap-2">
      <div className="relative size-16">
        <ChartContainer
          config={chartConfig}
          aria-hidden
          className="aspect-square size-full"
        >
          <RadialBarChart
            accessibilityLayer={false}
            data={[{ level, fill: "var(--color-level)" }]}
            innerRadius="78%"
            outerRadius="100%"
            startAngle={90}
            endAngle={-270}
            barSize={6}
          >
            <PolarAngleAxis type="number" domain={[0, 100]} tick={false} />
            <RadialBar
              dataKey="level"
              cornerRadius={6}
              isAnimationActive={false}
              background={{
                fill: "color-mix(in oklab, var(--color-level) 22%, transparent)",
              }}
            />
          </RadialBarChart>
        </ChartContainer>
        <span
          aria-hidden
          className="absolute inset-0 flex items-center justify-center text-xs font-semibold text-muted-foreground"
        >
          {name[0]}
        </span>
      </div>
      <span className="text-base font-semibold tabular-nums">{level}%</span>
      <span className="text-xs text-muted-foreground">{name}</span>
    </div>
  )
}

export function RadialChartBatteries() {
  return (
    <Card variant="filled" size="sm">
      <CardHeader>
        <CardTitle>Batteries</CardTitle>
        <CardDescription>Charge left on each device</CardDescription>
      </CardHeader>
      <CardContent>
        <ul className="grid grid-cols-4 gap-2 py-4">
          {devices.map((device) => (
            <li key={device.name}>
              <Battery {...device} />
            </li>
          ))}
        </ul>
      </CardContent>
    </Card>
  )
}
```

4. Update the import paths to match your project.

## Usage

```tsx
import { RadialChartBatteries } from "@/components/charts/radial-chart-batteries"
```

```tsx
<RadialChartBatteries />
```

Replace the `devices` array with your own names and levels from 0 to 100. Change `LOW` to move the warning threshold, and edit the two colors in the per-ring config. The letter in each ring is the first character of the name.

## Notes

The rings are hidden from assistive technology and have no tooltip; the percentage and name printed under each ring carry the information.

**React Native, SwiftUI, Jetpack Compose**

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

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

const devices = [
  { name: "Phone", level: 82 },
  { name: "Earbuds", level: 46 },
  { name: "Watch", level: 18 },
  { name: "Case", level: 100 },
]

const LOW = 20

function Battery({ name, level }: { name: string; level: number }) {
  const chartConfig = {
    level: { label: name, color: level <= LOW ? "red-500" : "green-500" },
  } satisfies ChartConfig

  return (
    <View
      accessible
      accessibilityLabel={`${name}, ${level}%`}
      className="items-center gap-2"
    >
      <View className="size-16">
        <View
          pointerEvents="none"
          className="absolute inset-0 items-center justify-center"
        >
          <Text className="text-xs font-semibold text-muted-foreground">
            {name[0]}
          </Text>
        </View>
        <ChartContainer
          config={chartConfig}
          className="aspect-square size-full"
        >
          <RadialBarChart
            data={[{ level }]}
            innerRadius="78%"
            outerRadius="100%"
            startAngle={90}
            endAngle={-270}
            barSize={6}
          >
            <PolarAngleAxis domain={[0, 100]} />
            <RadialBar
              isAnimationActive={false}
              dataKey="level"
              cornerRadius={6}
              background={{ fillOpacity: 0.22 }}
            />
          </RadialBarChart>
        </ChartContainer>
      </View>
      <Text className="text-base font-semibold tabular-nums">{`${level}%`}</Text>
      <Text className="text-xs text-muted-foreground">{name}</Text>
    </View>
  )
}

export function RadialChartBatteries() {
  return (
    <Card variant="filled" size="sm">
      <CardHeader>
        <CardTitle>Batteries</CardTitle>
        <CardDescription>Charge left on each device</CardDescription>
      </CardHeader>
      <CardContent>
        <View className="flex-row gap-2 py-4">
          {devices.map((device) => (
            <View key={device.name} className="flex-1">
              <Battery {...device} />
            </View>
          ))}
        </View>
      </CardContent>
    </Card>
  )
}
```

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

private let devices: [(name: String, level: Double)] = [
  ("Phone", 82), ("Earbuds", 46), ("Watch", 18), ("Case", 100),
]

private let low: Double = 20

private struct Battery: View {
  let name: String
  let level: Double

  var body: some View {
    let chartConfig: ChartConfig = ["level": .init(name, color: level <= low ? Palette.red500 : Palette.green500)]
    VStack(spacing: 8) {
      ChartContainer(config: chartConfig) {
        RadialBarChart(
          [RadialBar("level", value: level)],
          domain: 0...100,
          innerRadius: 0.78,
          outerRadius: 1,
          barSize: 6,
          startAngle: .zero,
          endAngle: .degrees(360),
          rounded: true,
          track: .tint,
          isAnimationActive: false
        )
        .overlay {
          Text(verbatim: String(name.prefix(1)))
            .textStyle(.xs, weight: .semibold)
            .foregroundStyle(EsuissColor.mutedForeground)
        }
      }
      .frame(width: 64, height: 64)
      Text(verbatim: "\(Int(level))%")
        .textStyle(.base, weight: .semibold)
        .monospacedDigit()
      Text(LocalizedStringKey(name))
        .textStyle(.xs)
        .foregroundStyle(EsuissColor.mutedForeground)
    }
    .frame(maxWidth: .infinity)
    .accessibilityElement(children: .ignore)
    .accessibilityLabel(Text(LocalizedStringKey(name)))
    .accessibilityValue(Text(verbatim: "\(Int(level))%"))
  }
}

public struct RadialChartBatteries: View {
  public init() {}

  public var body: some View {
    Card(.filled, size: .sm) {
      CardHeader("Batteries", description: "Charge left on each device")
      CardContent {
        HStack(alignment: .top, spacing: 8) {
          ForEach(devices, id: \.name) { device in
            Battery(name: device.name, level: device.level)
          }
        }
        .padding(.vertical, 16)
      }
    }
  }
}
```

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

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
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.semantics.contentDescription
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.RadialBarChart
import com.esuiss.ui.components.chartColor
import com.esuiss.ui.theme.EsuissTheme
import com.esuiss.ui.theme.Palette
import com.esuiss.ui.theme.Typography

private class RadialBatteriesDevice(val name: String, val level: Double)

private val devices = listOf(
    RadialBatteriesDevice("Phone", 82.0),
    RadialBatteriesDevice("Earbuds", 46.0),
    RadialBatteriesDevice("Watch", 18.0),
    RadialBatteriesDevice("Case", 100.0),
)

private const val LOW = 20.0

@Composable
private fun Battery(device: RadialBatteriesDevice, modifier: Modifier = Modifier) {
    val colors = EsuissTheme.colors
    val low = device.level <= LOW
    val chartConfig = ChartConfig("level" to ChartConfigItem(device.name) { if (low) Palette.red500 else Palette.green500 })
    Column(
        modifier.clearAndSetSemantics { contentDescription = "${device.name}, ${device.level.toInt()}%" },
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(8.dp),
    ) {
        Box(Modifier.size(64.dp), contentAlignment = Alignment.Center) {
            ChartContainer(chartConfig, Modifier.matchParentSize()) {
                val color = chartColor("level")
                RadialBarChart(
                    listOf(device),
                    innerRadius = 0.78f,
                    outerRadius = 1f,
                    startAngle = 90f,
                    endAngle = -270f,
                    barSize = 6.dp,
                ) {
                    PolarAngleAxis(0.0..100.0)
                    RadialBar("level", value = { it.level }, cornerRadius = 6.dp, background = color.copy(alpha = color.alpha * 0.22f), isAnimationActive = false)
                }
            }
            BasicText(
                device.name.take(1),
                style = Typography.xs.copy(color = colors.mutedForeground, fontWeight = FontWeight.SemiBold),
            )
        }
        BasicText(
            "${device.level.toInt()}%",
            style = Typography.base.copy(color = colors.foreground, fontWeight = FontWeight.SemiBold, fontFeatureSettings = "tnum"),
        )
        BasicText(device.name, style = Typography.xs.copy(color = colors.mutedForeground))
    }
}

@Composable
fun RadialChartBatteries(modifier: Modifier = Modifier) {
    Card(modifier, variant = CardVariant.Filled, size = CardSize.Sm) {
        CardHeader("Batteries", description = "Charge left on each device")
        CardContent {
            Row(
                Modifier.padding(vertical = 16.dp),
                horizontalArrangement = Arrangement.spacedBy(8.dp),
            ) {
                for (device in devices) Battery(device, Modifier.weight(1f))
            }
        }
    }
}
```

A `Card` that renders one `RadialBarChart` ring per entry in `devices`, each with a level from 0 to 100. A ring turns red at or below `LOW` (20%) and is green otherwise, with the device initial in the center and its percentage and name below. Each gauge is a single accessible element labeled with name and level. Nothing is interactive. The rings set `isAnimationActive={false}` and draw without the enter animation.

## Installation

**React Native**

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

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-batteries
```

**SwiftUI**

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

**Jetpack Compose**

```bash title="Terminal"
npx @esuiss/ui@latest add radial-chart-batteries --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-batteries.tsx`:

- `uniwind/components/charts/radial-chart-batteries.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-batteries.tsx`:

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

const devices = [
  { name: "Phone", level: 82 },
  { name: "Earbuds", level: 46 },
  { name: "Watch", level: 18 },
  { name: "Case", level: 100 },
]

const LOW = 20

function Battery({ name, level }: { name: string; level: number }) {
  const chartConfig = {
    level: { label: name, color: level <= LOW ? "red-500" : "green-500" },
  } satisfies ChartConfig

  return (
    <View
      accessible
      accessibilityLabel={`${name}, ${level}%`}
      className="items-center gap-2"
    >
      <View className="size-16">
        <View
          pointerEvents="none"
          className="absolute inset-0 items-center justify-center"
        >
          <Text className="text-xs font-semibold text-muted-foreground">
            {name[0]}
          </Text>
        </View>
        <ChartContainer
          config={chartConfig}
          className="aspect-square size-full"
        >
          <RadialBarChart
            data={[{ level }]}
            innerRadius="78%"
            outerRadius="100%"
            startAngle={90}
            endAngle={-270}
            barSize={6}
          >
            <PolarAngleAxis domain={[0, 100]} />
            <RadialBar
              isAnimationActive={false}
              dataKey="level"
              cornerRadius={6}
              background={{ fillOpacity: 0.22 }}
            />
          </RadialBarChart>
        </ChartContainer>
      </View>
      <Text className="text-base font-semibold tabular-nums">{`${level}%`}</Text>
      <Text className="text-xs text-muted-foreground">{name}</Text>
    </View>
  )
}

export function RadialChartBatteries() {
  return (
    <Card variant="filled" size="sm">
      <CardHeader>
        <CardTitle>Batteries</CardTitle>
        <CardDescription>Charge left on each device</CardDescription>
      </CardHeader>
      <CardContent>
        <View className="flex-row gap-2 py-4">
          {devices.map((device) => (
            <View key={device.name} className="flex-1">
              <Battery {...device} />
            </View>
          ))}
        </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-batteries.tsx`:

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

const devices = [
  { name: "Phone", level: 82 },
  { name: "Earbuds", level: 46 },
  { name: "Watch", level: 18 },
  { name: "Case", level: 100 },
]

const LOW = 20

const styles = StyleSheet.create({
  battery: { alignItems: "center", gap: 8 },
  ring: { width: 64, height: 64 },
  overlay: {
    ...StyleSheet.absoluteFill,
    alignItems: "center",
    justifyContent: "center",
  },
  initial: { ...fontSize.xs, fontWeight: "600" },
  chart: { width: "100%", height: "100%", aspectRatio: 1 },
  level: { ...fontSize.base, fontWeight: "600", fontVariant: ["tabular-nums"] },
  name: { ...fontSize.xs },
  list: { flexDirection: "row", gap: 8, paddingVertical: 16 },
  item: { flex: 1 },
})

function Battery({ name, level }: { name: string; level: number }) {
  const { colors } = useTheme()
  const chartConfig = {
    level: { label: name, color: level <= LOW ? "red-500" : "green-500" },
  } satisfies ChartConfig

  return (
    <View
      accessible
      accessibilityLabel={`${name}, ${level}%`}
      style={styles.battery}
    >
      <View style={styles.ring}>
        <View pointerEvents="none" style={styles.overlay}>
          <Text style={[styles.initial, { color: colors.mutedForeground }]}>
            {name[0]}
          </Text>
        </View>
        <ChartContainer config={chartConfig} style={styles.chart}>
          <RadialBarChart
            data={[{ level }]}
            innerRadius="78%"
            outerRadius="100%"
            startAngle={90}
            endAngle={-270}
            barSize={6}
          >
            <PolarAngleAxis domain={[0, 100]} />
            <RadialBar
              isAnimationActive={false}
              dataKey="level"
              cornerRadius={6}
              background={{ fillOpacity: 0.22 }}
            />
          </RadialBarChart>
        </ChartContainer>
      </View>
      <Text style={styles.level}>{`${level}%`}</Text>
      <Text style={[styles.name, { color: colors.mutedForeground }]}>
        {name}
      </Text>
    </View>
  )
}

export function RadialChartBatteries() {
  return (
    <Card variant="filled" size="sm">
      <CardHeader>
        <CardTitle>Batteries</CardTitle>
        <CardDescription>Charge left on each device</CardDescription>
      </CardHeader>
      <CardContent>
        <View style={styles.list}>
          {devices.map((device) => (
            <View key={device.name} style={styles.item}>
              <Battery {...device} />
            </View>
          ))}
        </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/RadialChartBatteries.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/RadialChartBatteries.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 { RadialChartBatteries } from "@/components/charts/radial-chart-batteries"
```

```tsx
<RadialChartBatteries />
```

Replace `devices` with your names and levels, and change `LOW` to move the warning threshold. The component takes no props.