Tiny charts 🤏 - Sparkline charts for fast data visualization on Flutter apps

Last update: May 31, 2022


Rows

Spreadsheet with superpowers !


Tiny charts 🤏

Sparkline charts for fast data visualization on Flutter apps

Installation

flutter pub add tiny_charts

Usage

📈 Line charts

From offsets

1

void build(BuildContext context) {
  return TinyLineChart(
    width: 100,
    height: 28,
    dataPoints: const [
      Offset(0, 2),
      Offset(1, 11),
      Offset(2, 17),
      Offset(2.5, 0),
      Offset(3, 10),
      Offset(4, 24),
    ],
  );
}

From vectors

Using vector_math's Vector2 class.

2

import 'package:vector_math/vector_math.dart';

void build(BuildContext context) {
  return TinyLineChart.fromDataVectors(
    width: 100,
    height: 28,
    dataPoints: [
      Vector2(0, 14),
      Vector2(1, 13.2),
      Vector2(2, 2),
      Vector2(3, 13),
      Vector2(4, 10),
      Vector2(5, 4),
    ],
  );
}

With options

Passing custom options

3

void build(BuildContext context) {
  return TinyLineChart(
    width: 100,
    height: 28,
    dataPoints: const [
      Offset(0, 2),
      Offset(1, 11),
      Offset(2, 17),
      Offset(2.5, 0),
      Offset(3, 10),
      Offset(4, 24),
    ],
    options: const TinyLineChartOptions(
      color: Color(0xFFC93B8C),
      lineWidth: 3,
      yMinLimit: -2,
      yMaxLimit: 27,
    ),
  );
}

Bar charts

Single

1

void build(BuildContext context) {
  return TinyBarChart.single(
    value: 68.12,
    max: 100,
    color: const Color(0xFF236536),
    width: 120,
    height: 28,
  );
}

Stacked

2

void build(BuildContext context) {
  return TinyBarChart.stacked(
    data: const <double>[24, 12, 4],
    width: 120,
    height: 28,
  );
}

From data vectors

3

void build(BuildContext context) {
  return TinyBarChart.stackedFromDataVectors(
    dataPoints: <Vector2>[
      Vector2(1, 20),
      Vector2(2, 12),
      Vector2(0, 12),
      Vector2(4, 24),
    ],
  );
}

With options

4

void build(BuildContext context) {
  return TinyBarChart.stacked(
    data: const <double>[24, 12, 4],
    options: const TinyBarChartOptions(
      colors: [
        Color(0xFFFF0000),
        Color(0xBEEE0260),
        Color(0x97FF74AD),
      ],
    ),
    width: 120,
    height: 28,
  );
}

📊 Column charts

From values

1

void build(BuildContext context) {
  return TinyColumnChart(
    data: const [20, 22, 14, 12, 19, 28, 1, 11],
    width: 120,
    height: 28,
  );
}

From vectors

2

void build(BuildContext context) {
  return TinyColumnChart.fromDataVectors(
    dataPoints: [
      Vector2(0, 18),
      Vector2(6, 22),
      Vector2(2, 12),
      Vector2(3, 14),
      Vector2(5, 34),
      Vector2(4, 5),
      Vector2(1, 24),
    ],
    width: 120,
    height: 28,
  );
}

With negative values

3

void build(BuildContext context) {
  return TinyColumnChart(
    data: const [20, -22, 14, -12, -19, 28, 1, 11],
    width: 120,
    height: 28,
  );
}

With options

  • With axis

4

void build(BuildContext context) {
  return TinyColumnChart(
    data: const [20, -22, 14, -12, -19, 28, 5, 11],
    width: 120,
    height: 28,
    options: const TinyColumnChartOptions(
      positiveColor: Color(0xFF27A083),
      negativeColor: Color(0xFFE92F3C),
      showAxis: true,
    ),
  );
}
  • Custom colors

5

void build(BuildContext context) {
  return TinyColumnChart(
    data: const [18, 22, 28, -12, 32, 12, 9, 14, -34, -25, 24],
    width: 120,
    height: 28,
    options: const TinyColumnChartOptions(
      positiveColor: Color(0xFF0023C6),
      negativeColor: Color(0xFFBA2500),
      showAxis: true,
      axisColor: Color(0xFF00FF00),
      lowestColor: Color(0xFFFF4A1A),
      highestColor: Color(0xFF3083FF),
      firstColor: Color(0xFFFFE500),
      lastColor: Color(0xFF8000FF),
    ),
  );
}

GitHub

https://github.com/rows/tiny_charts
You might also like...

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

Jul 2, 2022

:bar_chart: [wip] Create beautiful, responsive, animated charts using a simple and intuitive API.

: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

Mar 30, 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 🚀 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

Jun 29, 2022

Flutter GraphView is used to display data in graph structures. It can display Tree layout, Directed and Layered graph. Useful for Family Tree, Hierarchy View.

Flutter GraphView is used to display data in graph structures. It can display Tree layout, Directed and Layered graph. Useful for Family Tree, Hierarchy View.

GraphView Get it from | Flutter GraphView is used to display data in graph structures. It can display Tree layout, Directed and Layered graph. Useful

Jun 23, 2022

Android GraphView is used to display data in graph structures.

Android GraphView is used to display data in graph structures.

GraphView Android GraphView is used to display data in graph structures. Overview The library can be used within RecyclerView and currently works with

Jun 21, 2022

Stores and manages the data of your week expenses with a chart

personal_expenses_app A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you st

Dec 26, 2021

A pretty plotting package for Flutter apps

A pretty plotting package for Flutter apps

flutter_plot R. C. Howell - 2018 A pretty plotting package for Flutter apps. Sizing and autopadding isn't great right now, but tinkering with padding

Jun 7, 2022

A powerful Flutter chart library, currently supporting Line Chart, Bar Chart, Pie Chart, Scatter Chart and Radar Chart.

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

Jun 23, 2022

A beautiful bezier line chart widget for flutter that is highly interactive and configurable.

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

Jun 23, 2022

Related

A Flutter data visualization library based on Grammar of Graphics.
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

Jul 1, 2022
In this project you will see how to generate charts with the data from the Firestore.
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

Jun 1, 2022
Charts Library for Flutter, written in Dart with Flutter.
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

Jun 22, 2022
Animated radial and pie charts for Flutter
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

Jun 22, 2022
Elegant OHLC Candlestick and Trade Volume charts for @Flutter
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

Jun 28, 2022
A library to draw fantastic bar charts race in Flutter
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:

Jun 24, 2022
Flutter chart library contains depth charts supporting various indicators and zooming
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,火币的接口可能需要翻墙,接口

Jun 23, 2022
A flutter package which makes it easier to plot different types of charts with lots of customization, made purely in dart
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

Mar 29, 2022
Flutter package for creating simple yet modern looking charts
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

May 2, 2022
Flutter Cryptocurrency Charts application based on Clean Architecture.
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

Jun 27, 2022