ArcaneChart

Use charts for lightweight value comparisons that should match the surrounding component theme.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: chart

Preview + Code

Revenue

Jan

12

Feb

18

Mar

16

Apr

24

Code

ArcaneChart(
  title: 'Revenue',
  points: const [
    ArcaneChartPoint(label: 'Jan', value: 12),
    ArcaneChartPoint(label: 'Feb', value: 18),
    ArcaneChartPoint(label: 'Mar', value: 16),
    ArcaneChartPoint(label: 'Apr', value: 24),
  ],
)

ArcaneChart#

Use charts for lightweight value comparisons that should match the surrounding component theme.

The live preview and code sample above use the neutral package:arcane_jaspr/arcane_jaspr.dart API. The selected stylesheet owns spacing, density, radius, color, and interaction styling, so the same app code can render differently under Shadcn or Neon.

Source: lib/component/data/chart.dart

See the Component Catalog for the full exported surface and source mapping.

ArcaneChart

Use charts for lightweight value comparisons that should match the surrounding component theme.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: chart

Preview + Code

Revenue

Jan

12

Feb

18

Mar

16

Apr

24

Code

ArcaneChart(
  title: 'Revenue',
  points: const [
    ArcaneChartPoint(label: 'Jan', value: 12),
    ArcaneChartPoint(label: 'Feb', value: 18),
    ArcaneChartPoint(label: 'Mar', value: 16),
    ArcaneChartPoint(label: 'Apr', value: 24),
  ],
)

ArcaneChart#

Use charts for lightweight value comparisons that should match the surrounding component theme.

The live preview and code sample above use the neutral package:arcane_jaspr/arcane_jaspr.dart API. The selected stylesheet owns spacing, density, radius, color, and interaction styling, so the same app code can render differently under Shadcn or Neon.

Source: lib/component/data/chart.dart

See the Component Catalog for the full exported surface and source mapping.

ArcaneChart

Use charts for lightweight value comparisons that should match the surrounding component theme.

 1 min read

 Updated Jun 28, 2026

Live Demo

Component: chart

Preview + Code

Revenue

Jan

12

Feb

18

Mar

16

Apr

24

Code

ArcaneChart(
  title: 'Revenue',
  points: const [
    ArcaneChartPoint(label: 'Jan', value: 12),
    ArcaneChartPoint(label: 'Feb', value: 18),
    ArcaneChartPoint(label: 'Mar', value: 16),
    ArcaneChartPoint(label: 'Apr', value: 24),
  ],
)

ArcaneChart#

Use charts for lightweight value comparisons that should match the surrounding component theme.

The live preview and code sample above use the neutral package:arcane_jaspr/arcane_jaspr.dart API. The selected stylesheet owns spacing, density, radius, color, and interaction styling, so the same app code can render differently under Shadcn or Neon.

Source: lib/component/data/chart.dart

See the Component Catalog for the full exported surface and source mapping.