Maybe this is the best k chart in Flutter.Support drag,scale,long press,fling.And easy to use.

Overview

k_chart

Maybe this is the best k chart in Flutter.Support drag,scale,long press,fling.And easy to use.

display

image

Screenshot

Screenshot

Screenshot

gif

demo

demo

Getting Started

Install

dependencies:
  k_chart: ^0.4.1

or use latest:

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

Usage

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(
                chartStyle, // Required for styling purposes
                chartColors,// Required for styling purposes
                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
                translations: kChartTranslations,// Graphic language
                volHidden: false,// hide volume
                showNowPrice: true,// show now price
                isOnDrag: (isDrag){},// true is on Drag.Don't load data while Draging.
                onSecondaryTap:(){}// on secondary rect taped.
              ),
            ),

use depth chart:

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

Donate

Buy a cup of coffee for the author.

alipay

wechat

Thanks

gwhcn/flutter_k_chart

Other

Maybe there are some bugs in this k chart,or you want new indicators,you can create a pull request.I will happy to accept it and I hope we can make it better.

Comments
  • Parameters for adjusting scale of chart

    Parameters for adjusting scale of chart

    Hi, we would like to check with you if there are plans for allowing the scale of the chart to be adjustable or parameterized? As from what we saw, the chart currently has a minimum and maximum scaling configured which does not allow the chart to be fully zoomed out.

    Thank you!

    opened by ThamMK 7
  • Customize K Chart UI

    Customize K Chart UI

    What wasn't in the existing system?

    • Ability to customise UI of KChartWidget

    What this PR solves?

    • In KChartWidget we will have to add ChartStyle and ChartColors object so that we can change it dynamically.
    opened by karanchuri 6
  • Help with Depth chat.

    Help with Depth chat.

    Hello, could you help with depth chat please. I have a problem with bids. I'm using the example code but it doesn't look right. Big thanks.

     void initDepth(List<DepthEntity>? bids, List<DepthEntity>? asks) {
        if (bids == null || asks == null || bids.isEmpty || asks.isEmpty) return;
        listAsk = [];
        listBid = [];
        double amount = 0.0;
        bids.sort((left, right) => left.price.compareTo(right.price));
        bids.reversed.forEach((item) {
          amount += item.vol;
          item.vol = amount;
          listBid.insert(0, item);
        });
    
        amount = 0.0;
        asks.sort((left, right) => left.price.compareTo(right.price));
        asks.forEach((item) {
          amount += item.vol;
          item.vol = amount;
          listAsk.add(item);
        });
    
        emit(state.copyWith(
          listAsk: listAsk,
          listBid: listBid,
          status: NewTradeStatus.pending,
        ));
      }
    
    image
    opened by Magadya 4
  • how to use general line/pie charts with k_chart.

    how to use general line/pie charts with k_chart.

    At first, I've tried integrating google charts with k_chart. But google charts has complex architecture. My intentions are an intuitive API for easy use.

    Thus, I've re-designed my packages for general line/pie charts with k_chart. Still, it is an alpha stage, but I will notice if I've completed it.

    Benjamin Jung ( [email protected] )

    opened by bsjung 3
  • simple kline/candle chart for k_chart.

    simple kline/candle chart for k_chart.

    I've found it's very good for my project.

    But, there do not exist for the basic kline/candle chart. Anyway, I've tried for a simple chart with k_chart.

    Thanks.

    Benjamin Jung ( [email protected] )

    opened by bsjung 3
  • Another exception was thrown: NoSuchMethodError: The method '>' was called on null.

    Another exception was thrown: NoSuchMethodError: The method '>' was called on null.

    I have a trouble with the package. Sometimes, it says "Another exception was thrown: NoSuchMethodError: The method '>' was called on null" and it does not print any chart. Is there a way to solve that or to detect which method causes error?

    edit: it could be related to this error: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ The following NoSuchMethodError was thrown during paint(): The method 'toDouble' was called on null. Receiver: null Tried calling: toDouble()

    The relevant error-causing widget was: CustomPaint CustomPaint:file:///Users/mac13/Developer/flutter/.pub-cache/hosted/pub.dartlang.org/k_chart-0.4.0/lib/k_chart_widget.dart:194:11

    opened by ZahidTekbas 2
  • ability to change grid colors

    ability to change grid colors

    I'm trying to switch from default dark theme to light theme (white background) and I'm trying to change the grid colors.

    I found in base_chart_renderer.dart line 16 the gridPaint is a fixed color of 0xff4c5c74.

        ..color = Colors.red;
      Paint gridPaint = Paint()
        ..isAntiAlias = true
        ..filterQuality = FilterQuality.high
        ..strokeWidth = 0.5
        ..color = Color(0xff4c5c74); <-----
    
    Could you extend the capability to allowing custom colors via chart_style.dart please?
    
    Thanks!
    
    opened by bkmio 2
  • Fix KChart and DephtChart onPress selection when they don't fill the whole screen

    Fix KChart and DephtChart onPress selection when they don't fill the whole screen

    The selection based on the user's touch don't work well when the KChart and DepthChart are placed in an app but don't fill the whole screen. The selection also doesn't work properlly when used with the ResponsiveFramework package because of the resizing that is applied to the widgets.

    https://user-images.githubusercontent.com/38893955/194149944-1af37c5a-4782-44a8-8d2c-2609063e152a.mp4

    This PR aims to solve this bug by making both widgets use the touch's local position instead of the global position.

    opened by driels97 1
  • Formula for technical indicators

    Formula for technical indicators

    Hi, i am trying to verify the data for all technical indicators, but somehow value are not matching. is it possible you can share the calculation of all technical indicators which have been used in library.

    opened by eql2021 1
  • Hi! I'm developing a few more properties and functions, so can I update this?

    Hi! I'm developing a few more properties and functions, so can I update this?

    I'm a developer who is using the 'k_chart' library to make good use of it. I needed some functions, so I download k_chart project, and now, I'm modifying some code to add these. I want to reflect these in the main library. Is there anything I should be careful about before requesting a pull request?

    The functions I added are as follows :

    1. Adding property infoDialog on KChartWidget : Users can now apply custom UI to infoDialog.
    2. Adding properties for Volume Chart bar color
    3. Adding Chart bar radius property
    4. Adding a property that selects whether or not to display a date
    opened by su-mong 0
  • How to zoom in and out of the entire candlestick chart around the middle

    How to zoom in and out of the entire candlestick chart around the middle

    I'm working on a requirement where the product requires that the candlestick chart can be zoomed in and out with a finger around the middle, just like Binance's candlestick chart

    Thank you so much

    opened by ZhaoQian888 0
  • I have 1 problem when changing data

    I have 1 problem when changing data

    In the original data set, I scrolled to a certain point, Then I changed the dataset to a smaller set, the chart did not return to the original position, scrolled a bit, it returned to the original position. So how can kchart be set up when changing data? tks https://user-images.githubusercontent.com/45956869/167769369-73456815-7237-4811-a656-c5f7e835b612.mp4

    opened by peartalent 1
  • Tick chart with highlight target price

    Tick chart with highlight target price

    Hi Mafanwei, Need your help with this one. I have looked at the reference and tutorial to make the chart like this for weeks, but I can not find it. Could you help me to make the chart like this? There are the details : Tick chart with Bid and Ask price include Take Profit & Stoploss price. Difficulty to highlight the target price on the Y-axis. tick chart with TP SL tick chart with TP SL 2

    Need your help.

    enhancement 
    opened by fajarabdy 0
Owner
OpenFlutter
Make it easier.让Flutter更简单。
OpenFlutter
Sliver bar chart - A package that supports Bar Chart in a Flutter Sliver

Sliver bar chart - A package that supports Bar Chart in a Flutter Sliver. This Package allows us to add Bar Chart in Sliver and sets a Bar Chart as a Header on Slivers Scroll.

MindInventory 19 Oct 11, 2022
This project is used to introduce the use of flutter canvas, include draw chart, clip image's path and draw progress indicator.

flutter_canvas This project is used to introduce the use of flutter canvas, include draw chart, clip image's path and draw progress indicator. draw ch

YouXianMing 9 Oct 27, 2022
A powerful 🚀 Android chart view / graph view library, supporting line- bar- pie- radar- bubble- and candlestick charts as well as scaling, panning and animations.

⚡ A powerful & easy to use chart library for Android ⚡ Charts is the iOS version of this library Table of Contents Quick Start Gradle Maven Documentat

Philipp Jahoda 36k Dec 28, 2022
A beautiful bezier line chart widget for flutter that is highly interactive and configurable.

Bezier Chart A beautiful bezier line chart widget for flutter that is highly interactive and configurable. Features Multi bezier lines Allow numbers a

Aeyrium 428 Dec 21, 2022
Flutter chart library contains depth charts supporting various indicators and zooming

flutter_k_chart 介绍 一个仿火币的flutter图表库包含深度图,支持各种指标及放大缩小、平移等操作 webdemo演示 Demo v0.1.0:下载 APK 演示 简单用例 1.在 pubspec.yaml 中添加依赖 本项目数据来自火币openApi,火币的接口可能需要翻墙,接口

gwh 259 Dec 30, 2022
A simple candlestick chart for flutter. Supports smooth scroll and zoom

simple_candlestick_chart A simple candlestick chart for flutter. Supports smooth

7c00 14 Oct 17, 2022
Stores and manages the data of your week expenses with a chart

personal_expenses_app A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you st

null 1 Dec 26, 2021
A scrollable time chart in Flutter.

time_chart An amazing time chart in Flutter. Chart Types TimeChart AmountChart Getting Started 1 - Depend on it Add it to your package's pubspec.yaml

Minseong Kim 26 Oct 28, 2022
Animated line chart for flutter

fl_animated_linechart An animated chart library for flutter. Support for datetime axis Multiple y axis, supporting different units Highlight selection

null 51 Sep 25, 2022
Flutter Pie chart with animation

Pie Chart This Flutter package provides a Pie Chart Widget with cool animation. Live Demo: https://apgapg.github.io/pie_chart/ ?? Try LIVE Demo Live D

Ayush P Gupta 161 Dec 24, 2022
Basic radar chart for Flutter

flutter_radar_chart Animated radar chart for Flutter inspired by The Python Graph Gallery (https://python-graph-gallery.com/radar-chart/). Follow the

Dan Panaite 44 Dec 10, 2022
A simple radial chart for Flutter

A simple radial chart for Flutter

null 2 Jun 2, 2022
Flutter heatmap calendar inspired by github contribution chart. [traditional mode / calendar mode]

Flutter Heatmap Flutter heatmap calendar inspired by github contribution chart.

Kim Seung Hwan 1 Dec 26, 2021
📆 Flutter heatmap calendar inspired by github contribution chart.

Flutter Heatmap Calendar Flutter Heatmap Calendar inspired by github contribution chart. Flutter Heatmap Calendar provides traditional contribution ch

Kim Seung Hwan 22 Jan 1, 2023
A Flutter widget to use Apache ECharts (incubating) in a reactive way.

中文 [![pub](https://img.shields.io/pub/v/flutter_echarts.svg)](https://pub.dev/packages/flutter_echarts) A Flutter widget to use Apache ECharts in a re

LIN Chen 629 Dec 29, 2022
Animated radial and pie charts for Flutter

Flutter Circular Chart A library for creating animated circular chart widgets with Flutter, inspired by Zero to One with Flutter. Overview Create easi

Victor Choueiri 387 Dec 26, 2022
Elegant OHLC Candlestick and Trade Volume charts for @Flutter

flutter_candlesticks Elegant OHLC Candlestick and Trade Volume charts for Flutter Usage Install for Flutter with pub. Property Description data Requir

Trent Piercy 402 Dec 21, 2022
[reborned barcode_scan] A flutter plugin for reading 2D barcodes and QR codes.

Reborned ?? Original barcode_scan was discontinued, so barcode_scan2 was borned with sound null safety support ?? barcode_scan2 A flutter plugin for s

Masayuki Ono (mono) 61 Jan 6, 2023
Flutter GraphView is used to display data in graph structures. It can display Tree layout, Directed and Layered graph. Useful for Family Tree, Hierarchy View.

GraphView Get it from | Flutter GraphView is used to display data in graph structures. It can display Tree layout, Directed and Layered graph. Useful

Nabil Mosharraf 326 Jan 6, 2023