Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rows/tiny_charts
Sparkline charts for fast data visualization on Flutter apps
https://github.com/rows/tiny_charts
Last synced: about 2 months ago
JSON representation
Sparkline charts for fast data visualization on Flutter apps
- Host: GitHub
- URL: https://github.com/rows/tiny_charts
- Owner: rows
- License: bsd-3-clause
- Created: 2022-04-06T22:28:28.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-04-08T11:53:03.000Z (over 2 years ago)
- Last Synced: 2024-07-09T01:19:02.268Z (2 months ago)
- Language: Dart
- Size: 32.2 KB
- Stars: 21
- Watchers: 0
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
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
```dart
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.
```dart
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
```dart
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
```dart
void build(BuildContext context) {
return TinyBarChart.single(
value: 68.12,
max: 100,
color: const Color(0xFF236536),
width: 120,
height: 28,
);
}
```
### Stacked
```dart
void build(BuildContext context) {
return TinyBarChart.stacked(
data: const [24, 12, 4],
width: 120,
height: 28,
);
}
```
### From data vectors
```dart
void build(BuildContext context) {
return TinyBarChart.stackedFromDataVectors(
dataPoints: [
Vector2(1, 20),
Vector2(2, 12),
Vector2(0, 12),
Vector2(4, 24),
],
);
}
```
### With options
```dart
void build(BuildContext context) {
return TinyBarChart.stacked(
data: const [24, 12, 4],
options: const TinyBarChartOptions(
colors: [
Color(0xFFFF0000),
Color(0xBEEE0260),
Color(0x97FF74AD),
],
),
width: 120,
height: 28,
);
}
```
## 📊 Column charts
### From values
```dart
void build(BuildContext context) {
return TinyColumnChart(
data: const [20, 22, 14, 12, 19, 28, 1, 11],
width: 120,
height: 28,
);
}
```
### From vectors
```dart
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
```dart
void build(BuildContext context) {
return TinyColumnChart(
data: const [20, -22, 14, -12, -19, 28, 1, 11],
width: 120,
height: 28,
);
}
```
## With options
* With axis
```dart
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
```dart
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),
),
);
}
```