Giter Club home page Giter Club logo

flutter-candlesticks-chart's Introduction

pub package

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 theme Dark theme with info box on touch Light theme
testing testing testing

Usage

Install for Flutter with pub.

Configuration

Property Default Value Description
data Required Field List of CandleStickChartData
enableGridLines Required Field Enable or disable grid lines
volumeProp 0.2 Proportion of container to be given to volume bars
gridLineStyle see constructor below Grid line style configuration as ChartGridLineStyle
candleSticksStyle see constructor below Chart style configuration as CandleSticksStyle
lineValues [] List of LineValue which are used to draw a value label
formatValueLabelFn null Function used to format value labels
cursorPosition null Offset used for current cursor position
infoBoxStyle lighTheme (see below) Info box style configuration as ChartInfoBoxStyle
cursorStyle see constructor below Cursor style configuration as CandleChartCursorStyle
chartEvents [] List of ChartEvent
chartEventStyle see constructor below Chart event style configuration as ChartEventStyle
loadingWidget null Widget 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;
  //...
}

flutter-candlesticks-chart's People

Contributors

tiagofumo avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.