A beautiful bezier line chart widget for flutter

bezier line chart

a beautiful bezier linechart widget for flutter that is highly interactive and configurable.

features

• multi bezier lines
• allow numbers and datetimes
• gestures support like touch, pinch/zoom, scrolling
• highly customizable

instructions

• long press and drag to display the indicator
• tap to dismiss the indicator
• when using chart scale different from custom, you can change between weekly, monthly, yearly using pinch/zoom when the indicator is not visible.

getting started

you should ensure that you add the dependency in your flutter project.

dependencies:
 bezier_chart: "^1.0.6"

you should then run flutter packages upgrade or update your packages in intellij.

example project

there is a example project in the example folder. check it out. otherwise, keep reading to get up and running.

usage

custom numbers

  widget sample1(buildcontext context) {
  return center(
    child: container(
      color: colors.red,
      height: mediaquery.of(context).size.height / 2,
      width: mediaquery.of(context).size.width * 0.9,
      child: bezierlinechart(
        bezierlinechartscale: bezierlinechartscale.custom,
        xaxiscustomvalues: const [0, 5, 10, 15, 20, 25, 30, 35],
        series: const [
          bezierline(
            data: const [
              datapoint<double>(value: 10, xaxis: 0),
              datapoint<double>(value: 130, xaxis: 5),
              datapoint<double>(value: 50, xaxis: 10),
              datapoint<double>(value: 150, xaxis: 15),
              datapoint<double>(value: 75, xaxis: 20),
              datapoint<double>(value: 0, xaxis: 25),
              datapoint<double>(value: 5, xaxis: 30),
              datapoint<double>(value: 45, xaxis: 35),
            ],
          ),
        ],
        config: bezierlinechartconfig(
          verticalindicatorstrokewidth: 3.0,
          verticalindicatorcolor: colors.black26,
          showverticalindicator: true,
          backgroundcolor: colors.red,
          snap: false,
        ),
      ),
    ),
  );
}

custom numbers multiline

widget sample2(buildcontext context) {
  return center(
    child: container(
      color: colors.red,
      height: mediaquery.of(context).size.height / 2,
      width: mediaquery.of(context).size.width,
      child: bezierlinechart(
        bezierlinechartscale: bezierlinechartscale.custom,
        xaxiscustomvalues: const [0, 3, 10, 15, 20, 25, 30, 35],
        series: const [
          bezierline(
            label: "custom 1",
            data: const [
              datapoint<double>(value: 10, xaxis: 0),
              datapoint<double>(value: 130, xaxis: 5),
              datapoint<double>(value: 50, xaxis: 10),
              datapoint<double>(value: 150, xaxis: 15),
              datapoint<double>(value: 75, xaxis: 20),
              datapoint<double>(value: 0, xaxis: 25),
              datapoint<double>(value: 5, xaxis: 30),
              datapoint<double>(value: 45, xaxis: 35),
            ],
          ),
          bezierline(
            linecolor: colors.blue,
            linestrokewidth: 2.0,
            label: "custom 2",
            data: const [
              datapoint<double>(value: 5, xaxis: 0),
              datapoint<double>(value: 50, xaxis: 5),
              datapoint<double>(value: 30, xaxis: 10),
              datapoint<double>(value: 30, xaxis: 15),
              datapoint<double>(value: 50, xaxis: 20),
              datapoint<double>(value: 40, xaxis: 25),
              datapoint<double>(value: 10, xaxis: 30),
              datapoint<double>(value: 30, xaxis: 35),
            ],
          ),
          bezierline(
            linecolor: colors.black,
            linestrokewidth: 2.0,
            label: "custom 3",
            data: const [
              datapoint<double>(value: 5, xaxis: 0),
              datapoint<double>(value: 10, xaxis: 5),
              datapoint<double>(value: 35, xaxis: 10),
              datapoint<double>(value: 40, xaxis: 15),
              datapoint<double>(value: 40, xaxis: 20),
              datapoint<double>(value: 40, xaxis: 25),
              datapoint<double>(value: 9, xaxis: 30),
              datapoint<double>(value: 11, xaxis: 35),
            ],
          ),
        ],
        config: bezierlinechartconfig(
          verticalindicatorstrokewidth: 2.0,
          verticalindicatorcolor: colors.black12,
          showverticalindicator: true,
          contentwidth: mediaquery.of(context).size.width * 2,
          backgroundcolor: colors.red,
        ),
      ),
    ),
  );
}

weekly chart

widget sample3(buildcontext context) {
  final fromdate = datetime(2019, 05, 22);
  final todate = datetime.now();

  final date1 = datetime.now().subtract(duration(days: 2));
  final date2 = datetime.now().subtract(duration(days: 3));

  return center(
    child: container(
      color: colors.red,
      height: mediaquery.of(context).size.height / 2,
      width: mediaquery.of(context).size.width,
      child: bezierlinechart(
        fromdate: fromdate,
        bezierlinechartscale: bezierlinechartscale.weekly,
        todate: todate,
        selecteddate: todate,
        series: [
          bezierline(
            label: "duty",
            onmissingvalue: (datetime) {
              if (datetime.day.iseven) {
                return 10.0;
              }
              return 5.0;
            },
            data: [
              datapoint<datetime>(value: 10, xaxis: date1),
              datapoint<datetime>(value: 50, xaxis: date2),
            ],
          ),
        ],
        config: bezierlinechartconfig(
          verticalindicatorstrokewidth: 3.0,
          verticalindicatorcolor: colors.black26,
          showverticalindicator: true,
          verticalindicatorfixedposition: false,
          backgroundcolor: colors.red,
          footerheight: 30.0,
        ),
      ),
    ),
  );
}

monthly chart

widget sample4(buildcontext context) {
  final fromdate = datetime(2018, 11, 22);
  final todate = datetime.now();

  final date1 = datetime.now().subtract(duration(days: 2));
  final date2 = datetime.now().subtract(duration(days: 3));

  final date3 = datetime.now().subtract(duration(days: 35));
  final date4 = datetime.now().subtract(duration(days: 36));

  final date5 = datetime.now().subtract(duration(days: 65));
  final date6 = datetime.now().subtract(duration(days: 64));

  return center(
    child: container(
      color: colors.red,
      height: mediaquery.of(context).size.height / 2,
      width: mediaquery.of(context).size.width,
      child: bezierlinechart(
        bezierlinechartscale: bezierlinechartscale.monthly,
        fromdate: fromdate,
        todate: todate,
        selecteddate: todate,
        series: [
          bezierline(
            label: "duty",
            onmissingvalue: (datetime) {
              if (datetime.month.iseven) {
                return 10.0;
              }
              return 5.0;
            },
            data: [
              datapoint<datetime>(value: 10, xaxis: date1),
              datapoint<datetime>(value: 50, xaxis: date2),
              datapoint<datetime>(value: 20, xaxis: date3),
              datapoint<datetime>(value: 80, xaxis: date4),
              datapoint<datetime>(value: 14, xaxis: date5),
              datapoint<datetime>(value: 30, xaxis: date6),
            ],
          ),
        ],
        config: bezierlinechartconfig(
          verticalindicatorstrokewidth: 3.0,
          verticalindicatorcolor: colors.black26,
          showverticalindicator: true,
          verticalindicatorfixedposition: false,
          backgroundcolor: colors.red,
          footerheight: 30.0,
        ),
      ),
    ),
  );
}

yearly chart

widget sample5(buildcontext context) {
  final fromdate = datetime(2012, 11, 22);
  final todate = datetime.now();

  final date1 = datetime.now().subtract(duration(days: 2));
  final date2 = datetime.now().subtract(duration(days: 3));

  final date3 = datetime.now().subtract(duration(days: 300));
  final date4 = datetime.now().subtract(duration(days: 320));

  final date5 = datetime.now().subtract(duration(days: 650));
  final date6 = datetime.now().subtract(duration(days: 652));

  return center(
    child: container(
      color: colors.red,
      height: mediaquery.of(context).size.height / 2,
      width: mediaquery.of(context).size.width,
      child: bezierlinechart(
        bezierlinechartscale: bezierlinechartscale.yearly,
        fromdate: fromdate,
        todate: todate,
        selecteddate: todate,
        series: [
          bezierline(
            label: "duty",
            onmissingvalue: (datetime) {
              if (datetime.year.iseven) {
                return 20.0;
              }
              return 5.0;
            },
            data: [
              datapoint<datetime>(value: 10, xaxis: date1),
              datapoint<datetime>(value: 50, xaxis: date2),
              datapoint<datetime>(value: 100, xaxis: date3),
              datapoint<datetime>(value: 100, xaxis: date4),
              datapoint<datetime>(value: 40, xaxis: date5),
              datapoint<datetime>(value: 47, xaxis: date6),
            ],
          ),
          bezierline(
            label: "flight",
            linecolor: colors.black26,
            onmissingvalue: (datetime) {
              if (datetime.month.iseven) {
                return 10.0;
              }
              return 3.0;
            },
            data: [
              datapoint<datetime>(value: 20, xaxis: date1),
              datapoint<datetime>(value: 30, xaxis: date2),
              datapoint<datetime>(value: 150, xaxis: date3),
              datapoint<datetime>(value: 80, xaxis: date4),
              datapoint<datetime>(value: 45, xaxis: date5),
              datapoint<datetime>(value: 45, xaxis: date6),
            ],
          ),
        ],
        config: bezierlinechartconfig(
          verticalindicatorstrokewidth: 3.0,
          verticalindicatorcolor: colors.black26,
          showverticalindicator: true,
          verticalindicatorfixedposition: false,
          backgroundgradient: lineargradient(
            colors: [
              colors.red[300],
              colors.red[400],
              colors.red[400],
              colors.red[500],
              colors.red,
            ],
            begin: alignment.topcenter,
            end: alignment.bottomcenter,
          ),
          footerheight: 30.0,
        ),
      ),
    ),
  );
}