---
title: "Charts Suite (BloomChart) — Bloom UI Primitive"
description: "Pure Dart token-driven chart suite supporting Area, Bar, Line, Pie, Radar, and Radial charts with responsive drag tracking."
category: "Charts Suite"
url: "https://bloom-platform-ten.vercel.app/ui/chart"
component_name: "BloomChart"
pub_package: "bloom_ui"
cli_command: "bloom ui add chart"
last_updated: "2026-08-15"
---

# Charts Suite (`BloomChart`)

> Pure Dart token-driven chart suite supporting Area, Bar, Line, Pie, Radar, and Radial charts with responsive drag tracking.

**Category:** Charts Suite  
**Package:** [`bloom_ui`](https://pub.dev/packages/bloom_ui)  
**CLI Install:** `bloom ui add chart`  
**Web Preview:** [https://bloom-platform-ten.vercel.app/ui/chart](https://bloom-platform-ten.vercel.app/ui/chart)

---

## 📦 Installation & Setup

### 1. Using Bloom CLI (Recommended)
Add the source code directly to your project without rigid package locks:
```bash
bloom ui add chart
```

### 2. Using Pub.dev Package
Add the dependency to your `pubspec.yaml`:
```yaml
dependencies:
  bloom_ui: ^0.1.0
```

### 3. Import in Dart
```dart
import 'package:bloom_ui/bloom_ui.dart';
```

---

## 🚀 Usage Example

```dart
BloomChart(
  type: BloomChartType.area,
  height: 220,
  data: const BloomChartData(
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    series: [
      BloomChartSeries(
        name: 'Desktop',
        values: [186, 305, 237, 73, 209, 214],
        color: BloomColors.petalBlue,
      ),
      BloomChartSeries(
        name: 'Mobile',
        values: [80, 200, 120, 190, 130, 140],
        color: BloomColors.petalPink,
      ),
    ],
  ),
)
```

---

## 🛠️ API Reference

**Available Variants:** `area`, `bar`, `line`, `pie`, `radar`, `radial`

### Properties & Parameters

| Prop | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `type` | `BloomChartType` | `bar` | Chart visualization mode. |
| `data` | `BloomChartData` | *Required* | Labels and data series. |
| `height` | `double?` | `240` | Chart canvas height. |
| `showLegend` | `bool` | `true` | Display series legend. |

---

## 🎨 Theming & Styling

BloomChart automatically respects the active `BloomTheme` (including `BloomTheme.novaLight`, `BloomTheme.novaDark`, etc.) and responds seamlessly to dark mode changes, custom border radii, and brand color tokens.

### Theme Overrides Example
```dart
Theme(
  data: Theme.of(context).copyWith(
    extensions: [
      context.bloomTheme.copyWith(
        colors: context.bloomColors.copyWith(
          primary: const Color(0xFF8B5CF6), // Custom Purple Accent
        ),
      ),
    ],
  ),
  child: BloomChart(...,
)
```

---

## 🔗 Related Resources
- [Components Gallery](https://bloom-platform-ten.vercel.app/ui)
- [Bloom Theming & Tokens Guide](https://bloom-platform-ten.vercel.app/docs/theming)
- [Application Blocks Catalog](https://bloom-platform-ten.vercel.app/blocks)
- [Bloom CLI Master Overview](https://bloom-platform-ten.vercel.app/docs/cli)