Draw Graph

A dart package to draw line graphs in your flutter app.


  • Getting graph widget:

    LineGraph Widget


    • features: List

      A list of features to be shown in the graph. Detailed description of Feature class below. (required)

    • size: Size

      This will determine the size of your graph. Height will be size.height - 50 in case when description is showed. (required)

    • labelX: List<String>

      A list of X-Axis Labels. This will determine and number of cells to distribute your data in and the width of your cells.

    • labelY: List<String>

      A list of Y-Axis Labels. The labels will be distributed on Y-Axis and determine height on cells.

    • fontFamily: String

      The fontFamily to use for labels and description of features.

    • graphColor: Color

      The color of your axis and labels.

    • showDescription: bool

      Whether to show description at the end of graph.

    • graphOpacity: double

      The opacity of the area under graph.

    • verticalFeatureDirection: bool

      Whether to scroll description vertically or not.

    • descriptionHeight: double

      If scrolling the description vertically, what should be the height of the description box.


      @required List<feature> features, 
      @required Size size,
      List<String> labelX: [],
      List<String> labelY: [],
      String fontFamily: 'sans serif',
      Color graphColor: Colors.grey,
      bool showDescription: false,
      double graphOpacity = 0.3,
      bool verticalFeatureDirection = false,
      double descriptionHeight = 80,


      features: features,
      size: Size(320, 400),
      labelX: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5'],
      labelY: ['20%', '40%', '60%', '80%', '100%'],
      showDescription: true,
      graphColor: Colors.white30,
      graphOpacity: 0.2,
      verticalFeatureDirection: true,
      descriptionHeight: 130,
  • Creating a list of Features

    • import the Feature model import 'package:draw_graph/models/feature.dart';

    Feature Model


    • data: List<double>

      The Y-Axis values to be plotted. Should be in the range 0-1. The length of the list should be equal to X-Axis labels. (required)

    • title: String

      The title displayed in Feature Description below the graph

    • color: Color

      The color of graph for this feature


      @required List<double> data,
      String title: '',
      Color color: Colors.black,


    List<Feature> features = [
        title: "Drink Water",
        color: Colors.blue,
        data: [0.2, 0.8, 1, 0.7, 0.6],
        title: "Exercise",
        color: Colors.pink,
        data: [1, 0.8, 6, 0.7, 0.3, 8],

Getting Started

See the example directory for a sample app using draw_graph.