{"id":13573543,"url":"https://github.com/xqwzts/flutter_sparkline","last_synced_at":"2025-10-23T03:07:37.423Z","repository":{"id":30363458,"uuid":"124707364","full_name":"xqwzts/flutter_sparkline","owner":"xqwzts","description":"Beautiful sparkline charts for Flutter","archived":false,"fork":false,"pushed_at":"2021-10-12T15:18:26.000Z","size":235,"stargazers_count":258,"open_issues_count":18,"forks_count":60,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-12-20T03:03:29.053Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xqwzts.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-10T23:31:24.000Z","updated_at":"2024-09-04T09:50:09.000Z","dependencies_parsed_at":"2022-08-07T15:15:17.710Z","dependency_job_id":null,"html_url":"https://github.com/xqwzts/flutter_sparkline","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xqwzts%2Fflutter_sparkline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xqwzts%2Fflutter_sparkline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xqwzts%2Fflutter_sparkline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xqwzts%2Fflutter_sparkline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xqwzts","download_url":"https://codeload.github.com/xqwzts/flutter_sparkline/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247179603,"owners_count":20897073,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T15:00:37.390Z","updated_at":"2025-10-23T03:07:37.347Z","avatar_url":"https://github.com/xqwzts.png","language":"Dart","funding_links":[],"categories":["组件","Dart","Components","Charts [🔝](#readme)"],"sub_categories":["图表","Map","Charts"],"readme":"[![pub package](https://img.shields.io/pub/v/flutter_sparkline.svg)](https://pub.dartlang.org/packages/flutter_sparkline)\n\n# flutter_sparkline\n\nBeautiful sparkline charts for Flutter.\n\n![screenshot](screenshots/sparkline.png)\n\n## Installation\n\nInstall the latest version [from pub](https://pub.dartlang.org/packages/flutter_sparkline#-installing-tab-).\n\n## Quick Start\n\nImport the package, create a `Sparkline`, and pass it your data.\n\n```dart\nimport 'package:flutter/material.dart';\nimport 'package:flutter_sparkline/flutter_sparkline.dart';\n\nvoid main() {\n  var data = [0.0, 1.0, 1.5, 2.0, 0.0, 0.0, -0.5, -1.0, -0.5, 0.0, 0.0];\n  runApp(\n    new MaterialApp(\n      home: new Scaffold(\n        body: new Center(\n          child: new Container(\n            width: 300.0,\n            height: 100.0,\n            child: new Sparkline(\n              data: data,\n            ),\n          ),\n        ),\n      ),\n    ),\n  );\n}\n```\n\n![base example screenshot](screenshots/example_base.png)\n\n\n## Customization\n\n### Sparkline\n\n| Property     | Default          |\n|--------------|:----------------:|\n| lineWidth    | 2.0              |\n| lineColor    | Colors.lightBlue |\n| lineGradient | null             |\n\nExample:\n\n```dart\nnew Sparkline(\n  data: data,\n  lineWidth: 5.0,\n  lineColor: Colors.purple,\n);\n```\n\n![lineopts example screenshot](screenshots/example_lineopts.png)\n\n```dart\nnew Sparkline(\n  data: data,\n  lineWidth: 10.0,\n  lineGradient: new LinearGradient(\n    begin: Alignment.topCenter,\n    end: Alignment.bottomCenter,\n    colors: [Colors.purple[800], Colors.purple[200]],\n  ),\n);\n```\n\n![lineopts example screenshot](screenshots/example_line_gradient.png)\n\n---\n\n### Points\n\n| Property   | Default               |\n|------------|:---------------------:|\n| pointsMode | PointsMode.none       |\n| pointSize  | 4.0                   |\n| pointColor | Colors.lightBlue[800] |\n\n| PointsMode     | Description                               |\n|:--------------:|-------------------------------------------|\n| none (default) | Do not draw individual points.            |\n| all            | Draw all the points in the data set.      |\n| last           | Draw only the last point in the data set. |\n\nExample:\n\n```dart\nnew Sparkline(\n  data: data,\n  pointsMode: PointsMode.all,\n  pointSize: 8.0,\n  pointColor: Colors.amber,\n);\n```\n\n![all points example screenshot](screenshots/example_points_all.png)\n\n```dart\nnew Sparkline(\n  data: data,\n  pointsMode: PointsMode.last,\n  pointSize: 8.0,\n  pointColor: Colors.amber,\n);\n```\n\n![last point example screenshot](screenshots/example_points_last.png)\n\n---\n\n### Fill\n\n| Property     | Default               |\n|--------------|:---------------------:|\n| fillMode     | FillMode.none         |\n| fillColor    | Colors.lightBlue[200] |\n| fillGradient | null                  |\n\n| FillMode       | Description                           |\n|:--------------:|---------------------------------------|\n| none (default) | Do not fill, draw only the sparkline. |\n| above          | Fill the area above the sparkline.    |\n| below          | Fill the area below the sparkline.    |\n\nExample:\n\n```dart\nnew Sparkline(\n  data: data,\n  fillMode: FillMode.below,\n  fillColor: Colors.red[200],\n);\n```\n\n![fill below example screenshot](screenshots/example_fill_below.png)\n\n```dart\nnew Sparkline(\n  data: data,\n  fillMode: FillMode.above,\n  fillColor: Colors.red[200],\n);\n```\n\n![fill above example screenshot](screenshots/example_fill_above.png)\n\n```dart\nnew Sparkline(\n  data: data,\n  fillMode: FillMode.below,\n  fillGradient: new LinearGradient(\n    begin: Alignment.topCenter,\n    end: Alignment.bottomCenter,\n    colors: [Colors.red[800], Colors.red[200]],\n  ),\n);\n```\n\n![fill above example screenshot](screenshots/example_fill_gradient.png)\n\n---\n\n### Todo:\n\n- [x] simple sparkline\n- [x] custom line width\n- [x] custom line color \n- [x] optional rounded corners\n- [x] fill\n- [x] embiggen individual points/change color\n- [x] different points modes [all/last/none]\n- [ ] animate between two sparklines\n- [ ] animate drawing a single sparkline\n- [ ] gesture detector to select closest point to tap\n- [ ] baseline\n- [x] different fill modes [above/below/none]\n- [x] fix edge points overflowing by offsetting by lineWidth\n- [ ] better corner rounding\n- [ ] axis labels\n- [x] gradient shader on line paint\n- [x] gradient shader on fill paint\n- [ ] multiple overlapping sparklines on a shared axis\n- [ ] tests\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxqwzts%2Fflutter_sparkline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxqwzts%2Fflutter_sparkline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxqwzts%2Fflutter_sparkline/lists"}