Beautiful sparkline charts for Flutter

Overview

pub package

flutter_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: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,
            ),
          ),
        ),
      ),
    ),
  );
}

base example screenshot

Customization

Sparkline

Property Default
lineWidth 2.0
lineColor Colors.lightBlue
lineGradient null

Example:

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

lineopts example screenshot

new Sparkline(
  data: data,
  lineWidth: 10.0,
  lineGradient: new 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]
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,
);

all points example screenshot

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

last point example screenshot


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

fill below example screenshot

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

fill above example screenshot

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

fill above 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
Comments
  • Request: Labeled Grid Lines

    Request: Labeled Grid Lines

    I know the point of sparklines is to not have axis labels and grid lines but I love the design and simplicity of this package so if you wanted to expand past this just being sparklines, an option for grid lines with value labels would be really cool.

    enhancement 
    opened by trentpiercy 10
  • Environment updated. fixes #6

    Environment updated. fixes #6

    Fixes #6 Environment limit updated to 3.0.0.

    flutter doctor -v [√] Flutter (Channel dev, v0.7.5, on Microsoft Windows [Version 6.3.9600], locale en-US) • Flutter version 0.7.5 at F:\thakku\flutter_sdk\flutter • Framework revision eab5cd9853 (4 days ago), 2018-08-30 14:47:04 -0700 • Engine revision dc7b5eb89d • Dart version 2.1.0-dev.3.0.flutter-760a9690c2

    Since the example directory lacks flutter project basics, followed below steps in order to create a complete example project

    • cd example
    • run flutter create .
    • added dependency
    flutter_sparkline:
        path: ../
    

    Tested and working confirmed on device with spec

    android-arm64 • Android 8.0.0 (API 26)

    Note: Not sure how this gonna affect in older flutter environment.

    opened by abhith 3
  • Smoothed curves (#1)

    Smoothed curves (#1)

    • Optimized Path creation

    • Added cubic smoothing

    • Added configurable min and max parameters

    • Built out example app

    • Fixed regression in 208e375

    SparkLine was ending before the end of the Grid

    • Added cubic smoothing example to README.md

      • rebasing
      • rebasing

    Co-authored-by: Doug Melton [email protected]

    opened by mustafatufan 2
  • Unable to install on flutter dev channel project

    Unable to install on flutter dev channel project

    flutter_sparkline >=0.0.2 which requires SDK version >=1.19.0 <2.0.0, version solving failed.

    flutter doctor -v [√] Flutter (Channel dev, v0.7.5, on Microsoft Windows [Version 6.3.9600], locale en-US) • Flutter version 0.7.5 • Framework revision eab5cd9853 (2 days ago), 2018-08-30 14:47:04 -0700 • Engine revision dc7b5eb89d • Dart version 2.1.0-dev.3.0.flutter-760a9690c2

    opened by abhith 1
  • Fixed heightNormalizer when all data points are same

    Fixed heightNormalizer when all data points are same

    Fixed heightNormalizer when all data points are same, which results in both min and max being same. Hence when both max and min are, same using the height would work fine.

    opened by neelansh-creatorstack 0
  • Add graph paint callback

    Add graph paint callback

    By default, the sparkline is not paint anything after paint graph. If the [onGraphPaint] is set, then function draws additions It is can be used for draw custom labels as example

    opened by VitalyKucher 0
  • Need null safety version

    Need null safety version

    from flutter v2.0.2, flutter is now null-safety mechanism. Most of the packages already upgrade to null safety and more are upgrading.

    Thanks for this great package!

    Do you plan to make a null safe version of the package?

    opened by Basher7 1
  • Fixed heightNormalizer when all data points are same

    Fixed heightNormalizer when all data points are same

    Fixed heightNormalizer when all data points are same, which results in both min and max being same. Hence when both max and min are, same using the height would work fine.

    opened by Neelansh-ns 0
  • [Feature Request] Allow to set fixed boundaries for data parameters

    [Feature Request] Allow to set fixed boundaries for data parameters

    Maybe I missed this in the docs, but instead of automatically using the greatest/smallest data points as the dimensions, can you allow me to set the bottom as, say, 0.0 and the top as 100.0?

    opened by TheNewJavaman 1
Owner
Victor Choueiri
Victor Choueiri
:bar_chart: [wip] Create beautiful, responsive, animated charts using a simple and intuitive API.

fcharts A work-in-progress chart library for Flutter. Until version 1.0.0 the API is subject to change drastically. Needless to say, fcharts is not pr

Keenan Thompson 322 Nov 12, 2022
Charts Library for Flutter, written in Dart with Flutter.

Table of Contents New in the current release Illustration of the new "iterative auto layout" feature Autolayout step 1 Autolayout step 2 Autolayout st

Milan Zimmermann 221 Sep 13, 2022
Animated radial and pie charts for Flutter

Flutter Circular Chart A library for creating animated circular chart widgets with Flutter, inspired by Zero to One with Flutter. Overview Create easi

Victor Choueiri 382 Oct 17, 2022
Elegant OHLC Candlestick and Trade Volume charts for @Flutter

flutter_candlesticks Elegant OHLC Candlestick and Trade Volume charts for Flutter Usage Install for Flutter with pub. Property Description data Requir

Trent Piercy 399 Nov 15, 2022
A library to draw fantastic bar charts race in Flutter

bar_chart_race The first library to draw fantastic bar charts race in Flutter Usage Let's get started add the dependencies to your app: dependencies:

Mimene Younes 6 Jun 24, 2022
Flutter chart library contains depth charts supporting various indicators and zooming

flutter_k_chart 介绍 一个仿火币的flutter图表库包含深度图,支持各种指标及放大缩小、平移等操作 webdemo演示 Demo v0.1.0:下载 APK 演示 简单用例 1.在 pubspec.yaml 中添加依赖 本项目数据来自火币openApi,火币的接口可能需要翻墙,接口

gwh 257 Oct 21, 2022
A flutter package which makes it easier to plot different types of charts with lots of customization, made purely in dart

multi_charts It is a library that provides different types of charts to plot data points. Currently it supports only Radar Chart, but will support mor

Intkhab Ahmed 28 Nov 9, 2022
Flutter package for creating simple yet modern looking charts

A package for creating simple yet modern looking charts. Five chart types Bar Gauge Line Pie Radar Canvas + DOM modern_charts combines Canvas and DOM

Man Hoang 68 Nov 4, 2022
Flutter Cryptocurrency Charts application based on Clean Architecture.

About the project The purpose of this project is to develop the best Cryptocurrency, markets data and charts experience. This project has been built u

null 23 Nov 20, 2022
Charts [2148⭐] - By Google Team.

Charts is a general charting library, currently enabled for the Flutter mobile UI framework. See the online gallery for supported chart types and exam

Google 2.8k Nov 19, 2022
In this project you will see how to generate charts with the data from the Firestore.

FlutterChartFirestore Flutter Tutorial - Flutter Charts+Firestore Video series can be watched here https://youtu.be/HGkbPrTSndM Getting Started In thi

Whatsupcoders 49 Oct 21, 2022
A powerful 🚀 Android chart view / graph view library, supporting line- bar- pie- radar- bubble- and candlestick charts as well as scaling, panning and animations.

⚡ A powerful & easy to use chart library for Android ⚡ Charts is the iOS version of this library Table of Contents Quick Start Gradle Maven Documentat

Philipp Jahoda 35.8k Nov 26, 2022
kg_charts icon library. At present, there are only radar charts

kg_charts icon library. At present, there are only radar charts. Other types of charts may be added later

zhonghua 10 Oct 25, 2022
A beautiful bezier line chart widget for flutter that is highly interactive and configurable.

Bezier Chart A beautiful bezier line chart widget for flutter that is highly interactive and configurable. Features Multi bezier lines Allow numbers a

Aeyrium 424 Nov 18, 2022
A powerful Flutter chart library, currently supporting Line Chart, Bar Chart, Pie Chart, Scatter Chart and Radar Chart.

FL Chart ?? A library to draw fantastic charts in Flutter ?? Chart Types LineChart BarChart PieChart Read More Read More Read More ScatterChart RadarC

Iman khoshabi 5.1k Nov 23, 2022
A Flutter widget to use Apache ECharts (incubating) in a reactive way.

中文 [![pub](https://img.shields.io/pub/v/flutter_echarts.svg)](https://pub.dev/packages/flutter_echarts) A Flutter widget to use Apache ECharts in a re

LIN Chen 616 Nov 13, 2022
A Flutter data visualization library based on Grammar of Graphics.

Graphic is now under a total refactoring. The prior available version code is here: v0.3.0 . A Flutter data visualization library based on Grammar of

LIN Chen 859 Nov 21, 2022
Flutter cryptocurrency UI dashboard.

?? ?? Crypto Dashboard Flutter UI Kit ?? ?? ?? ⭐️ ⭐️ ??‍?? Free Flutter UI Kits based on designs on UpLabs ?? . Watch Youtube Speed code Tutorial Here

Olayemii Garuba 69 Nov 20, 2022
A scrollable time chart in Flutter.

time_chart An amazing time chart in Flutter. Chart Types TimeChart AmountChart Getting Started 1 - Depend on it Add it to your package's pubspec.yaml

Minseong Kim 26 Oct 28, 2022