chart_sparkline #

Beautiful sparkline charts for Flutter.

[screenshot]

Installation #

Install the latest version from pub.

Quick Start #

Import the package, create a Sparkline , and pass it your data.

import 'package:flutter/material.dart';
import 'package:chart_sparkline/chart_sparkline.dart';

void main() {
  var data = [0.0, 1.0, 1.5, 2.0, 0.0, 0.0, -0.5, -1.0, -0.5, 0.0, 0.0];
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            width: 300.0,
            height: 100.0,
            child: Sparkline(
              data: data,
            ),
          ),
        ),
      ),
    ),
  );
}

[base example screenshot]

Customization #

Sparkline #

Example:

Sparkline(
  data: data,
  lineWidth: 5.0,
  lineColor: Colors.purple,
);

[lineopts example screenshot]

Sparkline(
  data: data,
  lineWidth: 10.0,
  lineGradient: LinearGradient(
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    colors: [Colors.purple[800], Colors.purple[200]],
  ),
);

[lineopts example screenshot]

Points #

Example:

Sparkline(
  data: data,
  pointsMode: PointsMode.all,
  pointSize: 8.0,
  pointColor: Colors.amber,
);

[all points example screenshot]

Sparkline(
  data: data,
  pointsMode: PointsMode.last,
  pointSize: 8.0,
  pointColor: Colors.amber,
);

[last point example screenshot]

Sparkline(
  data: data,
  pointsMode: PointsMode.atIndex,
  pointIndex: 7,
  pointSize: 8.0,
  pointColor: Colors.amber,
);

Fill #

Example:

Sparkline(
  data: data,
  fillMode: FillMode.below,
  fillColor: Colors.red[200],
);

[fill below example screenshot]

Sparkline(
  data: data,
  fillMode: FillMode.above,
  fillColor: Colors.red[200],
);

[fill above example screenshot]

Sparkline(
  data: data,
  fillMode: FillMode.below,
  fillGradient: LinearGradient(
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    colors: [Colors.red[800], Colors.red[200]],
  ),
);

[fill above example screenshot]

Smoothing #

Sparkline(
  data: data,
  useCubicSmoothing: true,
  cubicSmoothingFactor: 0.2,
),

[cubic smoothing example screenshot]

Average Line #

Sparkline(
  data: data,
  averageLine: true,
  averageLabel: true,
),

[cubic smoothing example screenshot]

first, last, highest and the lowest #

Sparkline(
  data: data,
  kLine: ['max', 'min', 'first', 'last'],
),

[cubic smoothing example screenshot]

gridLine #

Sparkline(
  gridLinelabelPrefix: '\$',
  gridLineLabelPrecision: 3,
  enableGridLines: true,
),

[cubic smoothing example screenshot]

Todo: #

• ✅ simple sparkline
• ✅ custom line width
• ✅ custom line color
• ✅ optional rounded corners
• ✅ fill
• ✅ embiggen individual points/change color
• ✅ different points modes [all/last/none]
• ❌ animate between two sparklines
• ❌ animate drawing a single sparkline
• ❌ gesture detector to select closest point to tap
• ❌ baseline
• ✅ different fill modes [above/below/none]
• ✅ fix edge points overflowing by offsetting by lineWidth
• ✅ better corner rounding
• ✅ axis labels
• ✅ gradient shader on line paint
• ✅ gradient shader on fill paint
• ❌ multiple overlapping sparklines on a shared axis
• ❌ tests