LineChartAppi

A powerful line chart widget for displaying time-series data and trends with support for multiple data series, interactive features, and customizable styling.

Features

• Multiple Data Series: Display multiple lines on the same chart
• Interactive Elements: Touch interactions, zoom, and pan capabilities
• Customizable Styling: Control line colors, thickness, and point styles
• Grid and Axes: Configurable grid lines and axis labels
• Animation: Smooth animations for data updates
• Responsive Design: Adapts to different screen sizes
• Data Points: Optional data point markers with custom styling

Usage

Basic Usage

LineChartAppi(
  data: [
    LineChartData(
      points: [
        FlSpot(0, 1),
        FlSpot(1, 3),
        FlSpot(2, 2),
        FlSpot(3, 5),
      ],
      color: Colors.blue,
    ),
  ],
)

Advanced Usage

LineChartAppi(
  data: multipleDataSeries,
  showGrid: true,
  enableInteraction: true,
  animationDuration: Duration(milliseconds: 1500),
  xAxisTitle: 'Time',
  yAxisTitle: 'Value',
  onPointTap: (lineIndex, pointIndex, point) {
    print('Tapped point: ${point.x}, ${point.y}');
  },
)

Parameters

Name	Type	Description	Default
data	List<LineChartData>	Required. List of data series to display	-
showGrid	bool?	Whether to show grid lines	true
enableInteraction	bool?	Enable touch interactions	true
animationDuration	Duration?	Duration of chart animations	Duration(milliseconds: 1000)
xAxisTitle	String?	Title for the X-axis	null
yAxisTitle	String?	Title for the Y-axis	null
minX	double?	Minimum X-axis value	Auto-calculated
maxX	double?	Maximum X-axis value	Auto-calculated
minY	double?	Minimum Y-axis value	Auto-calculated
maxY	double?	Maximum Y-axis value	Auto-calculated
onPointTap	Function(int, int, FlSpot)?	Callback when a point is tapped	null
backgroundColor	Color?	Background color of the chart	Colors.transparent
gridColor	Color?	Color of the grid lines	Colors.grey.shade300
showDataPoints	bool?	Whether to show data point markers	false
lineWidth	double?	Default line thickness	2.0

LineChartData Model

class LineChartData {
  final List<FlSpot> points;
  final Color color;
  final double? lineWidth;
  final bool showDataPoints;
  final String? label;
  
  LineChartData({
    required this.points,
    required this.color,
    this.lineWidth,
    this.showDataPoints = false,
    this.label,
  });
}

FlSpot Model

class FlSpot {
  final double x;
  final double y;
  
  FlSpot(this.x, this.y);
}

Best Practices

1. Data Organization: Organize data points in chronological or logical order
2. Color Selection: Use distinct colors for multiple data series
3. Performance: Limit the number of data points for smooth performance
4. Axis Scaling: Set appropriate min/max values for better visualization
5. Interaction: Enable interactions for better user experience
6. Labels: Provide meaningful axis titles and series labels

Examples

Simple Line Chart

LineChartAppi(
  data: [
    LineChartData(
      points: [
        FlSpot(0, 10),
        FlSpot(1, 15),
        FlSpot(2, 12),
        FlSpot(3, 18),
        FlSpot(4, 20),
      ],
      color: Colors.blue,
      label: 'Sales',
    ),
  ],
  xAxisTitle: 'Month',
  yAxisTitle: 'Revenue (K)',
)

Multiple Data Series

LineChartAppi(
  data: [
    LineChartData(
      points: salesData,
      color: Colors.blue,
      label: 'Sales',
      lineWidth: 3.0,
    ),
    LineChartData(
      points: expenseData,
      color: Colors.red,
      label: 'Expenses',
      lineWidth: 3.0,
    ),
  ],
  showGrid: true,
  enableInteraction: true,
)

Interactive Chart with Data Points

LineChartAppi(
  data: chartData,
  showDataPoints: true,
  onPointTap: (lineIndex, pointIndex, point) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: Text('Data Point'),
        content: Text('Value: ${point.y} at ${point.x}'),
      ),
    );
  },
)