klinecharts/pro

Financial chart built out of the box based on KLineChart.

pro's Issues

How to run this locally?

How can i run this package locally to make UI changes?

获取历史K线在没有返回结果之前切还标的，getHistoryKLineData没有及时回调

如何在用户更改指标或设置时将指标和设置保存至服务器？

目前创建图表时提供了指标和设置的参数，也提供了指标和设置的get/set方法，但是没有提供用户改变指标设置时能够触发函数的接口。
希望能够提供保存指标设置数据的方法。

can show axis on both left and right

can show axis on both left and right

类似这样的需求：
左边显示百分比，右边显示价格。

How to use custom indicators?

I'm using KLineChartPro for my project and would like to add custom indicators that are not included in the built-in list of available indicators. I've searched the documentation, but I couldn't find any information on how to implement and register custom indicators.

Could you please provide a guide or an example of how to create and use custom indicators with KLineChartPro?

How to add custom data

How to add custom data from a specific date range

CustomDatafeed 能不能给一个列子？

还有你 这个库要怎么用呢？

Saving Indicators

Hello @liihuu,

I want to thank you for your excellent work on this library, which has greatly aided my chart analysis.
However, I couldn't find documentation on saving and reloading later chart indicators, such as Fibonacci retracements.

Best regards

bug

请求场景：
周期：10分钟
K线总数：240根
BUG：
当总数小于500时会疯狂调用接口，且把多次调用的数据叠加在图上

源DEMO:
ChartProComponent.tsx
const get = async () => {
const [from, to] = adjustFromTo(p, new Date().getTime(), 500)
const kLineDataList = await props.datafeed.getHistoryKLineData(s, p, from, to)
widget?.applyNewData(kLineDataList, kLineDataList.length > 0)
props.datafeed.subscribe(s, p, data => {
widget?.updateData(data)
})
loading = false
setLoadingVisible(false)
}
此处应改判断查得的数据是否大于等于500

自定义数据该怎么使用

自定义数据该怎么使用

无法运行polygon数据源示例

https://pro.klinecharts.com/getting-started.html

klinecharts-pro.umd.js:1 
        
       Uncaught TypeError: Cannot read properties of undefined (reading 'registerOverlay')
    at klinecharts-pro.umd.js:1:175612
    at Array.forEach (<anonymous>)
    at klinecharts-pro.umd.js:1:175598
    at klinecharts-pro.umd.js:1:212
    at klinecharts-pro.umd.js:1:251
(匿名) @ klinecharts-pro.umd.js:1
(匿名) @ klinecharts-pro.umd.js:1
(匿名) @ klinecharts-pro.umd.js:1
(匿名) @ klinecharts-pro.umd.js:1
pro.html:23 
        
       Uncaught TypeError: klinechartspro.DefaultDatafeed is not a constructor
    at pro.html:23:15

No groupId was added when drawing, causing the delete button to not delete this part of the overlays

https://github.com/klinecharts/pro/blob/4234b79f0bcfc26734d0a721c38cbd6d23aa38f5/src/widget/drawing-bar/index.tsx#LL103C41-L103C41

this line should be like line77:

props.onDrawingItemClick({ groupId: GROUP_ID, name: item.icon, visible: visible(), lock: lock(), mode: mode() as OverlayMode })

要显示买入/买出点要怎么做？

如标题

How to run this in dev mode with solidJs

能否发布一个react组件？

希望有个react可以直接调用的组件。

KLineChart-pro Error Updater

Hello
Thanks for your program

Why am I seeing this error and how should I resolve the issue?

node --version
v14.21.3

npm run build

@klinecharts/[email protected] build /home/mas/nodejs/chart/KLineChart-pro-main
npm run build-core && npm run build-dts

@klinecharts/[email protected] build-core /home/mas/nodejs/chart/KLineChart-pro-main
tsc && vite build

node_modules/klinecharts/types/index.d.ts:743:2 - error TS2416: Property 'update' in type 'Widget' is not assignable to the same property in base type 'Updater'.
Type '(level: UpdateLevel) => void' is not assignable to type '(level?: UpdateLevel | undefined) => void'.
Types of parameters 'level' and 'level' are incompatible.
Type 'UpdateLevel | undefined' is not assignable to type 'UpdateLevel'.
Type 'undefined' is not assignable to type 'UpdateLevel'.

743 update(level: UpdateLevel): void;
~~~~~~

Found 1 error in node_modules/klinecharts/types/index.d.ts:743

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @klinecharts/[email protected] build-core: tsc && vite build
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @klinecharts/[email protected] build-core script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/mas/.npm/_logs/2023-09-03T08_17_41_817Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @klinecharts/[email protected] build: npm run build-core && npm run build-dts
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @klinecharts/[email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

我的图表一直是第一次获取到的数据在不断重复

import {getStockRecentKMinuteRT, getStockKRT} from '@/api/stockrt'
import {parseTime} from '@/utils/utils'

export default class CustomDatafeed {
  /**
   * 模糊搜索标的
   * 在搜索框输入的时候触发
   * 返回标的信息数组
   */
  searchSymbols(search) {
    // 根据模糊字段远程拉取标的数据
    console.log(search)
  }

  /**
   * 获取历史k线数据
   * 当标的和周期发生变化的时候触发
   *
   * 返回标的k线数据数组
   */
  getHistoryKLineData(symbol, period, from, to) {
    // 完成数据请求
    console.log(symbol, period, from, to, parseTime(from, '{y}-{m}-{d} {h}:{i}:{s}'), parseTime(to, '{y}-{m}-{d} {h}:{i}:{s}'))
    let api = getStockRecentKMinuteRT
    const params = {
      code: symbol.ticker,
      period: `${period.multiplier}`,
      start_date: parseTime(from, '{y}-{m}-{d} {h}:{i}:{s}'),
      end_date:  parseTime(to, '{y}-{m}-{d} {h}:{i}:{s}')
    }
    if (period.timespan != 'minute') {
      api = getStockKRT
      params.period = period.timespan == 'day' ? 'daily': (period.timespan == 'week' ? 'weekly': 'monthly')
      params.start_date = parseTime(from, '{y}{m}{d}')
      params.end_date = parseTime(to, '{y}{m}{d}')
    }
    return new Promise((resolve, reject) => {
        api(params).then((res) => {
            const _its = res.data.items || []
            const _items = _its.map(item => {
                return {
                    timestamp: (new Date(item.time||item.date)).getTime(),
                    open: item.open,
                    close: item.close,
                    high: item.highest,
                    low: item.lowest,
                    volume: item.volume,
                    turnover: item.turnover || 1
                }
            })
            resolve(_items)
        }).catch(() => {
            resolve([])
        })
    })
  }

  /**
   * 订阅标的在某个周期的实时数据
   * 当标的和周期发生变化的时候触发
   *
   * 通过callback告知图表接收数据
   */
  subscribe(symbol, period, callback) {
    // 完成ws订阅或者http轮询
    console.log('subscribe', symbol, period, callback)
  }

  /**
   * 取消订阅标的在某个周期的实时数据
   * 当标的和周期发生变化的时候触发
   *
   */
  unsubscribe(symbol, period) {
    // 完成ws订阅取消或者http轮询取消
    console.log('unsubscribe', symbol, period)
  }
}

当我拖动图表的时候，我能看到getHistoryKLineData被触发，然后通过新的from/to来获取到数据，我看了下接口请求的参数和返回的数据都是正常。但是图表里面显示的一直都是第一次调用getHistoryKLineData时的数据的重复显示！

主图图标自定义类型和叠加K线

希望大佬增加主图自定义类型和叠加K线功能，开放主图的绘制接口

There is a problem when drawing rectangles not along horizontal lines

https://github.com/klinecharts/pro/blob/4234b79f0bcfc26734d0a721c38cbd6d23aa38f5/src/extension/rect.ts#LL17C8-L17C8

使用customdata时有bug

async getHistoryKLineData(symbol, period, from, to)选择日线没有问题，切换到小时和分钟线时候的from和to 会没有值 NaN

how to add custom data on the charts

i want to show chart data from specific dates how can i do that??

需要vue3或者nuxt3版本UI的可以参考这个

https://github.com/anyongjin/klinechart-ui-demo
这是从pro项目用nuxt改写的demo，用vue或者nuxt的同学可以省点功夫。
推荐从demo项目里自由挑选改写需要的部分。

能不能给一一个使用的例子啊，现在除了直接引用script不知道怎么跑起来

如题

【功能增强】添加Tick的图和基于Tick行情的指标图

对TS不熟啊，如图，能否在K线基础上添加基于快照的图，不是分时线，而是每个行情快照的最新价 画成图，还有比如买卖1价和自定义的指标

Main and sub indicator deletion does not work correctly

@liihuu

I am looking at adding and deleting indicators as in this example from Kline, but the indicators other than the indicator I want to delete are deleted. Here is my example

   this.paneId = this.kLineChart.createIndicator(this.selectedVolume);

    addIndicator(obj) {
      if(obj.type === 'main') {
        this.kLineChart.createIndicator(obj.value, true, { id: 'candle_pane' })
      } else {
        this.kLineChart.createIndicator(obj.value)
      }
    },
    removeIndicator(obj) {
      console.log('obj remove', obj)
      if(obj.type === 'main') {
        this.kLineChart.removeIndicator('candle_pane', obj.val);
      } else {
        this.kLineChart.removeIndicator(this.paneId,obj.val);
      }

When I delete the main indicator, all main indicators are deleted. In Sub indicator, indicators other than the value I first set are not deleted.

The data required for the chart is small values

My chart doesn't work with these values

Create a React KlinePro

You would reach lot of developers

移动端支持

图表在移动端下会有一些问题

1. 触控交互
2. 样式（如超出屏幕、显示不全等）

有没有计划兼容一下移动端，可以阉割一些功能