Skip to main content Home Creators klinecharts klinechart klinecharts
klinecharts Integrates KLineChart npm package (v10) — canvas K-line/candlestick charts, setDataLoader, indicators, overlays, styles. Use when working with klinecharts, KLineChart, candlestick charts, setDataLoader, data loading, createIndicator, createOverlay, or financial chart integration in any framework. v10 API differs from v9.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/klinecharts/KLineChart --skill klinechartsThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... Related occupations SOC
Based on SOC occupation classification
name klinecharts description Integrates KLineChart npm package (v10) — canvas K-line/candlestick charts, setDataLoader, indicators, overlays, styles. Use when working with klinecharts, KLineChart, candlestick charts, setDataLoader, data loading, createIndicator, createOverlay, or financial chart integration in any framework. v10 API differs from v9.
KLineChart Integration Guide
Helps developers integrate KLineChart (npm: klinecharts, currently v10) into their projects.
Route by scenario
Check klinecharts in package.json if the version is unclear. v10 no longer uses applyNewData / updateData.
Minimal example
import { init, dispose } from 'klinecharts'
const chart = init ('chart'
setSymbol
ticker
'BTCUSDT'
pricePrecision
2
volumePrecision
0
setPeriod
span
1
type
'day'
setDataLoader
getBars
({ callback } ) =>
callback
timestamp
1517846400000
open
7424.6
high
7511.3
low
6032.3
close
7310.1
volume
224461
Required order: init → setSymbol → setPeriod → setDataLoader
Data model
{ timestamp : number , open : number , high : number , low : number , close : number , volume ?: number , turnover ?: number }
{ span : 5 , type : 'minute' }
{ ticker : string , pricePrecision : number , volumePrecision : number }
timestamp must be in milliseconds . turnover is only required for EMV and AVP indicators.
Data loading (setDataLoader) v10 uses setDataLoader instead of legacy data APIs. getBars may be async, but must always call callback.
chart.setDataLoader ({
getBars : ({ type , timestamp, symbol , period, callback } ) => {
callback (bars, { forward : true , backward : false })
},
subscribeBar : ({ symbol , period, callback } ) => {
},
unsubscribeBar : ({ symbol , period } ) => {
}
})
Always call callback from getBars, even on failure (pass [])
Bars sorted ascending by timestamp, no duplicates
subscribeBar pushes one bar at a time, not an arraymore controls pagination: boolean or { forward?, backward? } Changing period or symbol: chart.setPeriod(...) or chart.setSymbol(...) reloads automatically.
Framework integration The container must have explicit width and height . Call init on mount, dispose on unmount, and chart.resize() on size changes.
useEffect (() => {
const chart = init (containerRef.current !)
chart.setSymbol ({ ticker : 'TEST' , pricePrecision : 2 , volumePrecision : 0 })
chart.setPeriod ({ span : 1 , type : 'day' })
chart.setDataLoader (loader)
const ro = new ResizeObserver (() => chart.resize ())
ro.observe (containerRef.current !)
return () => { ro.disconnect (); dispose (containerRef.current !) }
}, [])
CDN: klinecharts.init(...) / klinecharts.dispose(...)
Indicators and overlays chart.createIndicator ('MACD' )
chart.createIndicator ({ name : 'MA' , paneId : 'candle_pane' }, true )
chart.createOverlay ('segment' )
chart.createOverlay ({ name : 'priceLine' , points : [{ timestamp, value }] })
Built-in indicators stackable on the main chart: BBI, BOLL, EMA, MA, SAR, SMA
Runtime lookup: getSupportedIndicators() / getSupportedOverlays()
Custom types: registerIndicator(...) / registerOverlay(...) — register before init.
Common instance APIs Method Purpose setStyles(partial)Update styles (shallow merge) setPaneOptions(opts)Pane height/state overrideYAxis(opts)Y-axis position/ticks subscribeAction(type, cb)Crosshair, click, etc. scrollToRealTime()Scroll to latest bar getDataList()Current bar data resetData()Reload data getConvertPictureUrl()Export image
Action types: onCrosshairChange, onCandleBarClick, onZoom, onScroll, onVisibleRangeChange, onPaneDrag
Initial layout init (container, {
layout : {
barSpaceLimit : { min : 2 , max : 40 },
pane : { minHeight : 120 },
yAxis : { position : 'right' }
},
locale : 'zh-CN' ,
timezone : 'Asia/Shanghai' ,
styles : 'dark'
})
v9 → v10 migration v9 (removed) v10 applyNewData(data)getBars with type 'init'updateData(bar)subscribeBar callbackapplyMoreData(data, more)getBars 'forward' / 'backward'setLoadDataCallbacksetDataLoadersetPriceVolumePrecisionsetSymbol({ pricePrecision, volumePrecision })setCustomApisetFormatterindicator calc returns array calc returns Record<timestamp, value>
Troubleshooting
No data — called setSymbol/setPeriod/setDataLoader in order? did getBars call callback? is timestamp in ms?Pagination broken — are more.forward / more.backward correct in callback?Realtime not updating — does subscribeBar push one bar? is timestamp ≥ last bar?Stale data after symbol switch — does unsubscribeBar close the old subscription?Blank container — is width/height 0? was resize called?
Further reading 