flutter_candlesticks_chart 0.1.1

Flutter Android iOS web

Flutter candlesticks chart widget with support for cursor and events

flutter_candlesticks_chart #

Flutter candlesticks chart widget based on trentpiercy's flutter-candlesticks which uses a MIT license. As I had a lot of changes to add, and the original repository seemed unchanged for a long while, I thought it would be better to just create a new repository.

Dark themeDark theme with info box on touchLight theme
testingtestingtesting

Usage #

TODO: Add to pub and copy link here

Install for Flutter with pub.

Configuration #

PropertyDefault ValueDescription
dataRequired FieldList of CandleStickChartData
enableGridLinesRequired FieldEnable or disable grid lines
volumeProp0.2Proportion of container to be given to volume bars
gridLineStylesee constructor belowGrid line style configuration as ChartGridLineStyle
candleSticksStylesee constructor belowChart style configuration as CandleSticksStyle
lineValues[]List of LineValue which are used to draw a value label
formatValueLabelFnnullFunction used to format value labels
cursorPositionnullOffset used for current cursor position
infoBoxStylelighTheme (see below)Info box style configuration as ChartInfoBoxStyle
cursorStylesee constructor belowCursor style configuration as CandleChartCursorStyle
chartEvents[]List of ChartEvent
chartEventStylesee constructor belowChart event style configuration as ChartEventStyle
loadingWidgetnullWidget used to show during chart loading

Example #

var last = data.last;
var lineColor = last.close >= last.open ? Colors.green : Colors.red;
CandleStickChart(
    data: data,
    lines: [
        LineValue(
            value: lastData.close,
            lineColor: lineColor,
            dashed: true,
        ),
    ],
),

Full App Example #

Check example/example.dart

Classes and constructors #

// CandleStickChart constructor
class CandleStickChart extends StatefulWidget {
  CandleStickChart({
    Key key,
    @required this.data,
    this.volumeProp = 0.2,
    this.gridLineStyle = const ChartGridLineStyle(),
    this.candleSticksStyle = const CandleSticksStyle(),
    this.lineValues = const [],
    this.formatValueLabelFn,
    this.formatValueLabelWithK = false,
    this.cursorPosition,
    this.infoBoxStyle,
    this.cursorStyle = const CandleChartCursorStyle(),
    this.chartEvents = const [],
    this.chartEventStyle = const ChartEventStyle(),
    this.loadingWidget,
  }) : super(key: key) {
    assert(data != null);
    if (gridLineStyle.fullscreenGridLine) {
      assert(enableGridLines);
    }
    if (formatValueLabelFn != null) {
      assert(!formatValueLabelWithK);
    }
  }
  final List<CandleStickChartData> data;
  final ChartGridLineStyle gridLineStyle;
  final bool enableGridLines;
  final CandleSticksStyle candleSticksStyle;
  final double volumeProp;
  final List<LineValue> lineValues;
  final FormatFn formatValueLabelFn;
  final bool formatValueLabelWithK;
  final ChartInfoBoxStyle infoBoxStyle;
  final Offset cursorPosition;
  final CandleChartCursorStyle cursorStyle;
  final List<ChartEvent> chartEvents;
  final ChartEventStyle chartEventStyle;
  final Widget loadingWidget;
  //...
}

typedef FormatFn = String Function(double val);

class CandleStickChartData {
  CandleStickChartData({
    @required this.open,
    @required this.high,
    @required this.low,
    @required this.close,
    this.dateTime,
    this.volume,
  });
  double open;
  double high;
  double low;
  double close;
  DateTime dateTime;
  double volume;
  //...
}

class ChartGridLineStyle {
  const ChartGridLineStyle({
    this.gridLineColor = Colors.grey,
    this.gridLineAmount = 5,
    this.gridLineWidth = 0.5,
    this.gridLineLabelColor = Colors.grey,
    this.xAxisLabelCount = 3,
    this.showXAxisLabels = false,
    this.fullscreenGridLine = false,
    this.enableGridLines = true,
  });
  final Color gridLineColor;
  final int gridLineAmount;
  final double gridLineWidth;
  final Color gridLineLabelColor;
  final int xAxisLabelCount;
  final bool showXAxisLabels;
  final bool fullscreenGridLine;
  final bool enableGridLines;
  //...
}

class CandleSticksStyle {
  const CandleSticksStyle({
    this.shadowLineWidth = 1.0,
    this.labelPrefix = "\$",
    this.increaseColor = Colors.green,
    this.decreaseColor = Colors.red,
    this.xAxisLabelHeight = 22,
    this.valueLabelBoxType = ValueLabelBoxType.roundedRect,
    this.valueMarginRatio = 0.15,
  });

  final double shadowLineWidth;
  final String labelPrefix;
  final Color increaseColor;
  final Color decreaseColor;
  final double xAxisLabelHeight;
  final ValueLabelBoxType valueLabelBoxType; 
  final double valueMarginRatio;
  //...
}

class LineValue {
  final double value;
  final Color textColor;
  final Color lineColor;
  final bool dashed;
  final double lineWidth;

  LineValue({
    @required this.value,
    this.textColor = Colors.white,
    this.lineColor = Colors.black,
    this.dashed = false,
    this.lineWidth = 0.5,
  });
  //...
}

class CandleChartI18N {
  const CandleChartI18N({
    this.open = 'Open',
    this.close = 'Close',
    this.high = 'High',
    this.low = 'Low',
    this.volume = 'Volume',
  });

  final String open;
  final String close;
  final String high;
  final String low;
  final String volume;
  //...
}

class ChartInfoBoxThemes {
  static ChartInfoBoxStyle getDarkTheme() {
    return ChartInfoBoxStyle(
      backgroundColor: Colors.black87,
      backgroundOpacity: 0.8,
      textColor: Colors.white,
      borderColor: Colors.white,
      textFontSize: 14,
      borderWidth: 2.5,
      fontWeight: FontWeight.normal,
      formatValuesFn: (double val) {
        return CandleStickChartValueFormat.formatPricesWithK(val);
      },
      dateFormatStr: 'MM/dd/yyyy',
      infoBoxFingerOffset: 40,
      margin: 1.25,
      padding: 3,
      chartI18N: CandleChartI18N(),
    );
  }

  static ChartInfoBoxStyle getLightTheme() {
    var layout = getDarkTheme();
    layout
      ..backgroundColor = Colors.white70
      ..backgroundOpacity = 0.92
      ..borderColor = Colors.black
      ..textFontSize = 12
      ..textColor = Colors.black;
    return layout;
  }
}

class CandleChartCursorStyle {
  const CandleChartCursorStyle({
    this.showCursorCircle = true,
    this.cursorColor = Colors.black,
    this.cursorLabelBoxColor = Colors.black,
    this.cursorTextColor = Colors.white,
    this.cursorJumpToCandleCenter = false,
    this.cursorLineWidth = 0.5,
    this.cursorOffset = const Offset(0, 50),
    this.cursorLineDashed = false,
    this.cursorXAxisFormatString = 'MM/dd/yyyy',
  });

  final bool showCursorCircle;
  final Color cursorColor;
  final Color cursorTextColor;
  final Color cursorLabelBoxColor;
  final double cursorLineWidth;
  final bool cursorLineDashed;
  final bool cursorJumpToCandleCenter;
  final String cursorXAxisFormatString;
  final Offset cursorOffset;
  //...
}

class ChartEvent {
  ChartEvent({
    @required this.dateTime,
    @required this.circleText,
    @required this.fn,
  });

  final DateTime dateTime;
  final String circleText;
  final void Function(ChartEvent eg) fn;
  //...
}

class ChartEventStyle {
  const ChartEventStyle({
    this.textStyle,
    this.circleRadius,
    this.circlePaint,
    this.circleBorderPaint,
  });
  final TextStyle textStyle;
  final double circleRadius;
  final Paint circlePaint;
  final Paint circleBorderPaint;
  //...
}
4
likes
90
pub points
41%
popularity

Flutter candlesticks chart widget with support for cursor and events

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

tiagofumo@gmail.com

License

MIT (LICENSE)

Dependencies

cupertino_icons, flutter, intl

More

Packages that depend on flutter_candlesticks_chart