Friday, March 29, 2024

Flutter Chart Library

Today iam going to share another chart library called K chart. Its support line and bar chart also combination of both .I think K chart is the one of the best chart compared to other premium charting library like syncfusion .Its already support most of the all features of premium type chart like scaling,drag,long press,fling etc.I have used syncfusion chart in one of our project and Kchart look exactly simpler to syncfusion chart .

In Feature wise this chart may be very helpful for people working on share market type applications. Horizontal and vertical line marker is the another feature set of Kchart.

demo

Installation

Add following to your package’s pubspec.yaml file:
Check following url to get latest version on Pub and replace below section

dependencies:
  k_chart: ^0.1.1

or use latest:

k_chart:
    git:
      url: https://github.com/mafanwei/k_chart

Example

When you change the data, you must call this:

DataUtil.calculate(datas); //This function has some optional parameters: n is BOLL N-day closing price. k is BOLL param.

use k line chart:

Container(
              height: 450,
              width: double.infinity,
              child: KChartWidget(
                datas,// Required,Data must be an ordered list,(history=>now)
                isLine: isLine,// Decide whether it is k-line or time-sharing
                mainState: _mainState,// Decide what the main view shows
                secondaryState: _secondaryState,// Decide what the sub view shows
                fixedLength: 2,// Displayed decimal precision
                timeFormat: TimeFormat.YEAR_MONTH_DAY,
                onLoadMore: (bool a) {},// Called when the data scrolls to the end. When a is true, it means the user is pulled to the end of the right side of the data. When a
                // is false, it means the user is pulled to the end of the left side of the data.
                maDayList: [5,10,20],// Display of MA,This parameter must be equal to DataUtil.calculate‘s maDayList
                bgColor: [Colors.black, Colors.black],// The background color of the chart is gradient
                isChinese: true,// Graphic language
                isOnDrag: (isDrag){},// true is on Drag.Don't load data while Draging.
              ),
            ),

use depth chart:

DepthChart(_bids, _asks) //Note: Datas must be an ordered list,

if you want change DepthChart color, you can use just like this:

 Container(
            height: 230,
            width: double.infinity,
            color: Colors.grey, //background color
            child: DepthChart(_bids, _asks,buyPathColor: Colors.blue, sellPathColor: Colors.green),
          )