chart_sparkline

Description:

chart sparkline

chart_sparkline #
Beautiful sparkline charts for Flutter.

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,
),
),
),
),
),
);
}
copied to clipboard

Customization #
Sparkline #



Property
Default




lineWidth
2.0


lineColor
Colors.lightBlue


lineGradient
null



Example:
Sparkline(
data: data,
lineWidth: 5.0,
lineColor: Colors.purple,
);
copied to clipboard

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


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,
);
copied to clipboard

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

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

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],
);
copied to clipboard

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

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

Smoothing #
Sparkline(
data: data,
useCubicSmoothing: true,
cubicSmoothingFactor: 0.2,
),
copied to clipboard

Average Line #
Sparkline(
data: data,
averageLine: true,
averageLabel: true,
),
copied to clipboard

first, last, highest and the lowest #
Sparkline(
data: data,
kLine: ['max', 'min', 'first', 'last'],
),
copied to clipboard

Grid Line #
Sparkline(
gridLinelabelPrefix: '\$',
gridLineLabelPrecision: 3,
enableGridLines: true,
),
copied to clipboard

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,
),
),
copied to clipboard

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