Search packages, repositories and app categories

GitHub repositorylucas-sesti/line_chart

line_chart

A simple flutter package to create a custom line chart

line_chart project cover
Stars
4
Forks
0
Last push (UTC)
Mar 22, 2024
Project status
Active

Original README

English project snapshot. Visit GitHub for the latest content.

Line Chart

pub package

A simple flutter package to create a custom line chart

LineChart

Installations

Add line_chart: ^1.0.9 in your pubspec.yaml dependencies. And import it:

import 'package:line_chart/charts/line-chart.widget.dart';

How to use

Simply create a LineChart widget and pass the required params:

LineChart(
  width: 300, // Width size of chart
  height: 180, // Height size of chart
  data: [], // The value to the chart
  linePaint: Paint()
      ..strokeWidth = 3
      ..style = PaintingStyle.stroke
      ..color = Colors.black, // Custom paint for the line 
),

Here is the widget with all options for use.

LineChart(
  width: 300, // Width size of chart
  height: 180, // Height size of chart
  data: [], // The value to the chart
  linePaint: Paint()
      ..strokeWidth = 3
      ..style = PaintingStyle.stroke
      ..color = Colors.black, // Custom paint for the line 
  circlePaint: Paint()..color = Colors.black, // Custom paint for the line 
  showPointer: true, // When press or pan update the chart, create a pointer in approximated value (The default is true)
  showCircles: true, // Show the circle in every value of chart
  customDraw: (Canvas canvas, Size size) {}, // You can draw anything in your chart, this callback is called when is generating the chart
  circleRadiusValue: 6, // The radius value of circle
  linePointerDecoration: BoxDecoration(
    color: Colors.black,
  ) // Your line pointer decoration,
  pointerDecoration: BoxDecoration(
    shape: BoxShape.circle,
    color: Colors.black,
  ) // Your decoration of circle pointer,
  insideCirclePaint: Paint()..color = Colors.white // On your circle of the chart, have a second circle, which is inside and a slightly smaller size.
  onValuePointer: (MonthChartModel value) {
    print('onValuePointer');
  } // This callback is called when change the pointer,
  onDropPointer: () {
    print('onDropPointer');
  }, // This callback is called when it is on the pointer and removes your finger from the screen
),

For a more detail example please take a look at the example folder.

-

If something is missing, feel free to open a ticket or contribute!

Lucas Buchalla Sesti GitHub avatar
GitHub author

Lucas Buchalla Sesti ↗

Valencia, Valencia - España
LanguagesDartCMakeC++NixHTMLCSwiftJavaObjective-C

Packages published by this repository

Dependencies used

Dependency list 3 items

  • cupertino_icons^1.0.6
  • flutter{"sdk":"flutter"}
  • flutter_testDevelopment{"sdk":"flutter"}

How do I choose a repository?

Start with your use case, compare repository activity, and check the original project before adopting it.

  1. Search by repository name, owner or description, then narrow the results by topic.
  2. Compare stars, forks and recent pushes. Stars show community interest, not a guarantee of quality.
  3. Read the README, license and issues on GitHub before using a project.

Sources and maintenance

“A repository is the most basic element of GitHub.”

GitHub Docs — About repositories ↗