jo_tb_fl_chart 0.1.25

A custom wrapper around a FL line chart to allow time based swiping and interval size changes.

jo_tb_fl_chart

A custom wrapper around a FL line chart to allow time based swiping and interval size changes.

Features

A simple lightweight widget that wraps an FL line chart and provides additional functionalities like swipe left and right, and changing the visible time interval for a diagram.

Getting Started

Leverage the widget as shown below:

return SafeArea(

  child: JOTimeBasedSwipingLineChart(
    datapoints:
        data.map((d) => JODataPoint(d.time, d.value1)).toList(), // get time and relevant value from ALL your data
    lowerBound: 0.0, // start of Y axis
    upperBound: 3500.0, // end of Y axis
    size: 60 * 60 * 1000, // in milliseconds -> here 1 hour
    swapAnimationDuration: const Duration(milliseconds: 250),
    lineColors: [Colors.purple],
    belowChartColors: [Colors.purple[200].withOpacity(0.3)],
    backgroundColor: Colors.white,
    axisColor: Colors.black,
    xAxisTextStyle: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 9.0),
    yAxisTextStyle: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 12.0),
    yAxisLabelStepSize: 500.0,
    showLegend: true, // should display a legend (interval from / to within the diagram
    legendTextStyle: TextStyle(color: Colors.black, fontSize: 12, fontWeight: FontWeight.bold, letterSpacing: 2),
  ),