This is a sample project that uses KlineCharts to draw financial candlestick charts. The UI interface is modified from KLineChart Pro (KLineChart Pro uses Solid-js, this project is rewritten in Vue3).
This project uses Nuxt 3 and Vue 3.
If you need the svelte version, please go to klinecharts-demo-svelte
This demo is based on 9.5.4. If you need to upgrade to version 10.0, please refer to the relevant file changes in klinecharts-demo-svelte
Since the customization requirements for the trading UI are usually high, packaging this project as a package may not be suitable for freely modifying. Therefore, it is recommended to directly clone this project, extract the required parts, and freely modify the page components and UI.
Using CoinGecko data (CoinGeckoDatafeed)
Source: https://www.coingecko.com/en/api/documentation. The free version does not require an API key, but the data is limited.
Using Polygon data (PolygonDatafeed)
Source: https://polygon.io/. An API key is required before using it.
Using custom data (MyDatafeed)
The backend service runs at http://127.0.0.1:8000. The interface data specification can refer to MyDatafeed.
Multilingual i18n Do not use the official nuxt i18n module, use this.
Multiple charts on a single page
Since the chart.vue component uses a global store, it does not support multiple charts on a single page. If you need to support it, you can use vue's provide, inject to replace the global store; or consider using iframe (untested)
yarn installyarn devyarn build && node .output/server/index.mjs