chart_sparkline 1.1.1 copy "chart_sparkline: ^1.1.1" to clipboard
chart_sparkline: ^1.1.1 copied to clipboard

Beautiful sparkline charts for Flutter.Average line, highest and lowest value.

pub package

chart_sparkline #

Beautiful sparkline charts for Flutter.

screenshot

Online Demo #

Online Demo

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 #

Property Default
lineWidth 2.0
lineColor Colors.lightBlue
lineGradient null

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 #

Property Default
pointsMode PointsMode.none
pointSize 4.0
pointColor Colors.lightBlue[800]
pointIndex null
PointsMode Description
none (default) Do not draw individual points.
all Draw all the points in the data set.
last Draw only the last point in the data set.
atIndex Draw one point at the index specified by pointIndex.

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 #

Property Default
fillMode FillMode.none
fillColor Colors.lightBlue[200]
fillGradient null
FillMode Description
none (default) Do not fill, draw only the sparkline.
above Fill the area above the sparkline.
below Fill the area below the sparkline.

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

Grid Line #

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

cubic smoothing example screenshot

Animation Line #

Online Demo

AnimatedBuilder(
  animation: AnimationController(duration: const Duration(seconds: 1), vsync: this),
  builder: (context, child) => Sparkline(
    data: [0.0, 1.0, 1.5, 2.0, 0.0, 0.0, -0.5, -1.0, -0.5, 0.0, 0.0],
    animationController: _controller,
    pointsMode: PointsMode.all,
    pointSize: 8.0,
  ),
),

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
114
likes
160
pub points
95%
popularity
screenshot

Publisher

verified publisherdev.sumsg.com

Beautiful sparkline charts for Flutter.Average line, highest and lowest value.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on chart_sparkline