smooth_charts

pub package likes Buy Me a Coffee

Beautiful animated pie and line charts for Flutter.

PinWheel reveal, elastic spring animations, staggered badge labels, touch interactions and gradient fills.

Smooth Pie Chart Smooth Line Chart Smooth Multi-line Chart

Why this package

Most chart libraries give you low-level primitives. smooth_charts gives you:

  • Production-ready visual defaults matching modern finance app aesthetics
  • Animations that match the quality bar of native apps
  • Clean widget API: pass your data, get a chart

Features

  • Pie chart with PinWheel reveal animation on load
  • Staggered badge animation (icon + percentage label per slice)
  • Elastic spring on touch expand/collapse
  • Line chart with 2000ms entrance animation
  • Touch tooltips with haptic feedback
  • Gradient fill above/below the zero line
  • Optional reference lines (horizontal budget line, vertical date line)
  • Multi-line support with per-line colors
  • Adaptive light/dark theme via dynamicPastel color utility
  • Fully customizable label formatters

Installation

dependencies:
  smooth_charts: ^0.0.3

Pie chart

import 'package:smooth_charts/smooth_charts.dart';

SmoothPieChart(
  items: [
    SmoothPieChartItem(
      id: 'food',
      value: 320,
      color: Colors.orange,
      label: 'Food',
      icon: const Icon(Icons.fastfood, size: 20),
    ),
    SmoothPieChartItem(
      id: 'rent',
      value: 850,
      color: Colors.blue,
      label: 'Rent',
      icon: const Icon(Icons.home, size: 20),
    ),
  ],
  onItemSelected: (id, item) => print('selected $id'),
  onItemDeselected: () => print('deselected'),
)

Controlled selection

SmoothPieChart(
  items: items,
  selectedId: _selectedId,
  onItemSelected: (id, _) => setState(() => _selectedId = id),
  onItemDeselected: () => setState(() => _selectedId = null),
  centerColor: Theme.of(context).colorScheme.surface,
  largeSizeBreakpoint: 700,
)

Line chart

SmoothLineChart(
  points: [
    [
      ChartPair(0, 0),
      ChartPair(1, 120),
      ChartPair(2, 95),
      ChartPair(3, 210),
    ],
  ],
  color: Colors.teal,
  isCurved: true,
  yLabelFormatter: (v) => '\$${v.toStringAsFixed(0)}',
)

Multi-line with reference lines

SmoothLineChart(
  points: [line1Points, line2Points],
  colors: [Colors.teal, Colors.deepOrange],
  showTooltipForAllLines: true,
  lineTooltipLabelBuilder: (i) => i == 0 ? 'Current' : 'Projection',
  horizontalLineAt: 500,
  keepHorizontalLineInView: true,
  yLabelFormatter: (v) => '\$${v.toStringAsFixed(0)}',
  tooltipFormatter: (date, value) =>
      '${date.day}/${date.month}\n\$${value.toStringAsFixed(2)}',
)

API

SmoothPieChartItem

Field Type Description
id String Unique identifier
value double Raw value (percentages computed automatically)
color Color Base slice color
label String Accessibility label
icon Widget? Optional icon inside the badge

SmoothPieChart

Parameter Type Default Description
items List<SmoothPieChartItem> required Chart data
selectedId String? - Controlled highlight
onItemSelected void Function(String, SmoothPieChartItem)? - Tap callback
onItemDeselected void Function()? - Deselect callback
centerColor Color? surface Center hole fill
largeSizeBreakpoint double 700 Width to render large variant

SmoothLineChart

Parameter Type Default Description
points List<List<ChartPair>> required One list per line
color Color? primary Primary line color
colors List<Color> [] Per-line colors
isCurved bool false Smooth bezier curves
endDate DateTime? now Reference for x-axis labels
horizontalLineAt double? - Dashed reference line
verticalLineAt double? - Dashed reference line
showTooltipForAllLines bool false Show one tooltip row for each line
lineTooltipLabelBuilder String Function(int)? - Custom labels for multi-line tooltip rows
animationDuration Duration 2000ms Entrance animation duration
animationCurve Curve fastLinearToSlowEaseIn Entrance animation curve
yLabelFormatter String Function(double)? compact Y-axis formatter
xLabelFormatter String Function(DateTime)? "Mar 15" X-axis formatter
tooltipFormatter String Function(DateTime, double)? date + value Tooltip text

Utilities

smooth_charts also exports its color utilities:

Color result = dynamicPastel(context, Colors.blue, amountLight: 0.3);
Color c = HexColor('#FF5733');

Example app

See example/lib/main.dart for a complete demo with:

  • Pie chart with selection
  • Single-line chart with budget line
  • Multi-line chart

Author

Created by Elia Zavatta.

I build production-ready Flutter apps and reusable UI components.

LLM and SEO keywords

Flutter charts, pie chart widget, line chart widget, animated charts, interactive chart tooltip, financial dashboard chart, reusable Flutter chart UI.

License

MIT

Libraries

smooth_charts