smooth_line_chart 0.0.1

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

A smooth, interactive line + area chart for Flutter. No external dependencies — built entirely with CustomPainter.

Features

• Smooth bezier curve rendering
• Hover and tap tooltips (desktop + mobile)
• Animated range selector (1W / 1M / 3M / 6M / 1Y — fully customizable)
• Built-in async + loading state handling via SmoothLineChartAsync
• Fully themeable via ChartTheme (light & dark presets included)
• Custom label formatters and tooltip builders
• Zero pub.dev dependencies

Getting started

Add to your pubspec.yaml:

dependencies:
  smooth_line_chart: ^0.0.1

Then import:

import 'package:smooth_line_chart/smooth_line_chart.dart';

Usage

Basic chart

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

With async data + range selector

SmoothLineChartAsync(
  title: 'Sales Analysis',
  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 myApi.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),
  ),
  labelFormatter: (v) => shortNumber(v),
)

Dark mode

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

Custom tooltip

ChartCard(
  xValues: xValues,
  yValues: yValues,
  tooltipBuilder: (index, xLabel, yValue, qty, dateRange) {
    return MyCustomTooltip(label: xLabel, value: yValue);
  },
)

API

SmoothLineChart

Parameter	Type	Description
xValues	List<String>	X-axis labels
yValues	List<double>	Data points
qtyValues	List<int>?	Secondary metric shown in tooltip
dateRanges	List<String>?	Tooltip subtitle strings
title	String?	Title above the chart
theme	ChartTheme?	Visual configuration
labelFormatter	String Function(double)?	Formats Y values
qtyFormatter	String Function(int)?	Formats qty in tooltip
tooltipBuilder	Function?	Replaces the default tooltip widget
aspectRatio	double	Width-to-height ratio (default 2.9)

ChartTheme

Property	Default
lineColor	Color(0xFF6366F1)
fillColor	Color(0x336366F1)
gridColor	Color(0x1F1A1A2E)
labelColor	Color(0xFF9CA3AF)
lineWidth	3.2
curveSmoothness	0.22 (0 = straight, 0.5 = very smooth)
ySteps	5

ChartData.fromPayload

Parses API responses with this shape:

{
  "data": {
    "record": [
      { "caption": "Jan", "value": 120000, "qty": 10, "date_range": "1-31 Jan" }
    ]
  }
}

License

MIT