Search packages, repositories and app categories

line_chart cover
Package detailsv1.1.11

line_chart

A simple flutter package to create a custom line chart

AndroidiOSWebmacOSWindowsLinux
30-day downloads
73
Likes
29
Pub points
140

Install package

flutter pub add line_chart

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A simple Flutter package for creating customizable line charts. It enables developers to visualize data trends with smooth, interactive lines across multiple platforms including Android, iOS, Web, macOS, Windows, and Linux. The package focuses on ease of use and flexibility, allowing customization of colors, labels, gridlines, and chart behavior. Ideal for apps requiring real-time or historical data representation in a clean, intuitive format.

Use cases

  • Displaying time-series data
  • Visualizing performance metrics
  • Tracking user activity over time
  • Presenting financial or sales trends
  • Creating dashboards with dynamic charts

Key features

  • Customizable line colors and styles
  • Support for multiple data series
  • Interactive touch events
  • Configurable axis labels and gridlines
  • Responsive design across devices

Suitable for

  • Data-driven applications
  • Analytics dashboards
  • Mobile and web apps with visualizations
  • Educational tools with graphs
  • Prototyping chart interfaces

Considerations

  • Limited to line-based visualizations
  • No built-in tooltips or legends
  • Requires manual handling of complex data formatting
  • Not optimized for large datasets
  • Depends on external dependencies for advanced features

Original README

Original README snapshot from the linked source repository. Visit the repository 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!

Categories

Source repository

Projects using this package

No data available yet.