Beautiful Flutter Sparkline Chart

flutter sparkline chart

beautiful sparkline chart for flutter.

installation

install the latest version of flutter sparkline chart from pub.

quick start

import the package, create a sparkline, and pass it your data.

import 'package:flutter/material.dart';
import 'package:flutter_sparkline/flutter_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(
    new materialapp(
      home: new scaffold(
        body: new center(
          child: new container(
            width: 300.0,
            height: 100.0,
            child: new sparkline(
              data: data,
            ),
          ),
        ),
      ),
    ),
  );
}

customization

sparkline

property	default
linewidth	2.0
linecolor	colors.lightblue
linegradient	null

example:

new sparkline(
  data: data,
  linewidth: 5.0,
  linecolor: colors.purple,
);

new sparkline(
  data: data,
  linewidth: 10.0,
  linegradient: new lineargradient(
    begin: alignment.topcenter,
    end: alignment.bottomcenter,
    colors: [colors.purple[800], colors.purple[200]],
  ),
);

---

points

property	default
pointsmode	pointsmode.none
pointsize	4.0
pointcolor	colors.lightblue[800]

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.

example:

new sparkline(
  data: data,
  pointsmode: pointsmode.all,
  pointsize: 8.0,
  pointcolor: colors.amber,
);

new sparkline(
  data: data,
  pointsmode: pointsmode.last,
  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:

new sparkline(
  data: data,
  fillmode: fillmode.below,
  fillcolor: colors.red[200],
);

new sparkline(
  data: data,
  fillmode: fillmode.above,
  fillcolor: colors.red[200],
);

new sparkline(
  data: data,
  fillmode: fillmode.below,
  fillgradient: new lineargradient(
    begin: alignment.topcenter,
    end: alignment.bottomcenter,
    colors: [colors.red[800], colors.red[200]],
  ),
);

---

todo:

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

121

download the full project for this post from the following button

this source is fully free for all time

download as zip