GitLocker: The Coding Marketplace

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