Line Chart

The Line Chart component in the Material Charts Flutter package is a versatile and essential tool for developers aiming to create visually engaging and informative data visualizations in their Flutter applications. This powerful charting solution excels at displaying trends and changes over time, making it ideal for representing time series data and showcasing relationships between variables. With its smooth animations and customizable styling options, the Line Chart enhances user interaction and provides a clear understanding of data patterns. Whether you're building financial dashboards, performance tracking tools, or any application that requires effective data representation, the Line Chart in the Material Charts package is the perfect choice for delivering a compelling and insightful user experience.

Bar Chart Example

Usage

    
      
import 'package:flutter/material.dart';

    void main() => runApp(MyApp());

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(title: Text('Line Chart Example')),
            body: LineChartWidget(),
          ),
        );
      }
    }

    class LineChartWidget extends StatelessWidget {
      final List<ChartData> data = [
        ChartData(value: 10, label: 'Jan'),
        ChartData(value: 30, label: 'Feb'),
        ChartData(value: 50, label: 'Mar'),
        ChartData(value: 40, label: 'Apr'),
      ];

      final LineChartStyle style = LineChartStyle(
        lineColor: Colors.green,
        pointColor: Colors.red,
        strokeWidth: 3.0,
        animationDuration: Duration(milliseconds: 1000),
        animationCurve: Curves.fastOutSlowIn,
      );

      @override
      Widget build(BuildContext context) {
        return Center(
          child: Text(
            'Line Chart Placeholder',
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          ),
        );
      }
    }

Properties

Line Chart

Property Type Description Default
value double Value of the data point Required
label String Label associated with the data point Required

LineChartStyle

Property Type Description Default
lineColor Color Color of the chart line Colors.blue
gridColor Color Color of the chart grid Colors.grey
pointColor Color Color of the data points Colors.blue
backgroundColor Color Background color of the chart Colors.white
labelStyle TextStyle? Text style for labels null
strokeWidth double Width of the chart line 2.0
pointRadius double Radius of the data points 4.0
animationDuration Duration Duration of the line chart animation Duration(milliseconds: 1500)
animationCurve Curve Curve for animation transitions Curves.easeInOut

Features