smooth_line_chart 0.0.2

The simplest way to add stunning line charts to your Flutter app. Smooth bezier curves, tap/hover tooltips, dark mode support, and fully customizable colors — all with zero dependencies.

smooth_line_chart

Interactive line + area chart for Flutter. Built with CustomPainter — no external dependencies.

Features

• Smooth bezier curve rendering
• Tap & drag tooltips (mobile) + hover (desktop/web)
• Tap the active point again to dismiss the tooltip
• Animated range selector (1W / 1M / 3M / etc.)
• Async data loading with built-in loading & error states
• Fully themeable — colors, line style, grid, font styles
• Dark mode preset included
• Y-axis width configurable (or hidden entirely)
• Custom Y-axis labels (any text you want)

---

Installation

dependencies:
  smooth_line_chart: ^0.0.2

import 'package:smooth_line_chart/smooth_line_chart.dart';

---

Usage

Basic

SmoothLineChart(
  xValues: const ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
  yValues: const [120000, 340000, 210000, 480000, 390000, 520000],
  labelFormatter: (v) => 'Rp ${shortNumber(v)}',
)

With title

SmoothLineChart(
  xValues: xValues,
  yValues: yValues,
  title: 'Monthly Revenue',
  labelFormatter: (v) => 'Rp ${shortNumber(v)}',
)

Async data + range selector

SmoothLineChartAsync(
  title: 'Sales',
  initialRange: '1M',
  rangeOptions: const [
    RangeOption(label: '1W', value: '1W'),
    RangeOption(label: '1M', value: '1M'),
    RangeOption(label: '3M', value: '3M'),
    RangeOption(label: '6M', value: '6M'),
    RangeOption(label: '1Y', value: '1Y'),
  ],
  dataLoader: (range) async {
    final json = await api.fetchChart(range);
    return ChartData.fromPayload(json);
  },
  labelFormatter: (v) => 'Rp ${shortNumber(v)}',
)

Custom theme

SmoothLineChart(
  xValues: xValues,
  yValues: yValues,
  theme: const ChartTheme(
    lineColor: Color(0xFF0D9488),
    fillColor: Color(0x260D9488),
    showGrid: false,
  ),
)

Dark mode

SmoothLineChart(
  xValues: xValues,
  yValues: yValues,
  theme: ChartTheme.dark,
)

Custom font style

SmoothLineChart(
  xValues: xValues,
  yValues: yValues,
  theme: ChartTheme(
    yLabelStyle: TextStyle(fontSize: 10, color: Colors.grey),
    xLabelStyle: TextStyle(fontSize: 13, fontWeight: FontWeight.w500),
  ),
)

Custom Y-axis labels

SmoothLineChart(
  xValues: xValues,
  yValues: yValues,
  yTickValues: const [0, 500000, 1000000, 1500000],
  yAxisLabels: const ['0', '500 Rb', '1 Jt', '1.5 Jt'],
)

Hide Y-axis

SmoothLineChart(
  xValues: xValues,
  yValues: yValues,
  yAxisWidth: 0,
)

Custom tooltip

ChartCard(
  xValues: xValues,
  yValues: yValues,
  tooltipBuilder: (index, x, y, qty, range) {
    return MyTooltip(label: x, value: y);
  },
)

---

ChartData — flexible JSON parsing

// 1. Direct
ChartData(
  xValues: ['Jan', 'Feb', 'Mar'],
  yValues: [120000.0, 340000.0, 210000.0],
)

// 2. Plain map
ChartData.fromMap({'Jan': 120000, 'Feb': 340000, 'Mar': 210000})

// 3. List of maps — any key names
ChartData.fromList(
  rows,
  xKey: 'month',
  yKey: 'revenue',
  qtyKey: 'orders',
)

// 4. Nested API response
ChartData.fromPayload(jsonResponse)
// Accepts: { "data": { "record": [...] } }
// Also accepts a flat list directly

---

API reference

SmoothLineChart

Parameter	Type	Default	Description
xValues	List<String>	required	X-axis labels
yValues	List<double>	required	Data points
qtyValues	List<int>?	—	Secondary metric in tooltip
dateRanges	List<String>?	—	Tooltip subtitle per point
title	String?	—	Title above the chart
theme	ChartTheme?	default	Colors, grid, font styles
yMaxOverride	double?	auto	Override Y-axis maximum
yTickValues	List<num>?	auto	Custom Y tick positions
yAxisLabels	List<String>?	auto	Custom Y tick text
yAxisWidth	double	72	Space for Y-axis labels
labelFormatter	String Function(double)?	v.toString()	Format Y values
qtyFormatter	String Function(int)?	'Qty: $n'	Format qty in tooltip
tooltipBuilder	Widget Function(...)?	built-in	Custom tooltip widget
aspectRatio	double	2.9	Width ÷ height ratio

ChartTheme

Property	Type	Default	Description
lineColor	Color	indigo	Line stroke color
fillColor	Color	indigo 20%	Area fill color
gridColor	Color	dark 12%	Grid line color
labelColor	Color	grey	Fallback label color
tooltipBackground	Color	white	Tooltip card background
tooltipBorder	Color	light grey	Tooltip card border
tooltipTextColor	Color	dark	Tooltip text color
lineWidth	double	3.2	Stroke width
curveSmoothness	double	0.22	Bezier smoothness (0–0.5)
ySteps	int	5	Number of Y-axis ticks
showGrid	bool	true	Show/hide grid lines
yLabelStyle	TextStyle?	—	Y-axis label font style
xLabelStyle	TextStyle?	—	X-axis label font style

ChartTheme.dark is a ready-to-use dark mode preset.

Utility functions

shortNumber(1500000)    // '1.5 Jt'
shortNumber(1500)       // '1.5 K'
formatThousands(1500000) // '1.500.000'

---

License

MIT