{"_id":"k-chart-pro","_rev":"2-16232a52a7e78247c13a1aae7c44b48b","name":"k-chart-pro","dist-tags":{"latest":"0.2.1"},"versions":{"0.2.0":{"name":"k-chart-pro","version":"0.2.0","keywords":["klinecharts","pro","candlestick","finance","stock","chart","canvas"],"author":{"name":"liihuu"},"license":"Apache-2.0","_id":"k-chart-pro@0.2.0","maintainers":[{"name":"tranzwalle","email":"mail2q@gmail.com"}],"homepage":"https://github.com/klinecharts/pro#readme","bugs":{"url":"https://github.com/klinecharts/pro/issues"},"dist":{"shasum":"e29f97b90d68f83fe0fa94b308ffdd6a81aa2cd8","tarball":"https://registry.npmjs.org/k-chart-pro/-/k-chart-pro-0.2.0.tgz","fileCount":9,"integrity":"sha512-an3+jJCW6Nlb1eJ26xQUg+cvKaG00X38ERPj3NBJhUnnAhJ5Px4iSwC4moaIHcYoYOWTFDLUvpYMudMHWzbvww==","signatures":[{"sig":"MEUCIE93SuQbpU6YzEkZk5p90MiM68M2fvKc6l5ptJ2l0lBFAiEAzZKZamF+LLQWZW+9ELP12ix9iVF7blOJRjrnaMi2pZo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1551014},"main":"./dist/klinecharts-pro.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/klinecharts-pro.js","gitHead":"04779876bf70cd2b1e1c39cd353350e24a1f303a","private":false,"scripts":{"build":"npm run build-core && npm run build-dts","docs:dev":"vitepress dev docs","build-dts":"dts-bundle-generator --no-banner true --umd-module-name klinechartspro -o dist/index.d.ts src/index.ts","build-core":"tsc && vite build","docs:build":"vitepress build docs","docs:deploy":"npm run docs:build && gh-pages -d website","docs:preview":"vitepress preview docs"},"_npmUser":{"name":"tranzwalle","email":"mail2q@gmail.com"},"repository":{"url":"git+https://github.com/klinecharts/pro.git","type":"git"},"_npmVersion":"11.9.0","description":"Financial chart built out of the box based on KLineChart.","directories":{},"_nodeVersion":"24.14.0","dependencies":{"lodash":"^4.17.21","solid-js":"^1.6.11"},"_hasShrinkwrap":false,"devDependencies":{"less":"^4.1.3","vite":"^4.1.1","eslint":"^8.35.0","vitest":"^0.28.4","gh-pages":"^5.0.0","vitepress":"^1.0.0-alpha.75","typescript":"^4.9.5","klinecharts":"^10.0.0-beta1","less-loader":"^11.1.0","@types/lodash":"^4.14.191","eslint-plugin-n":"^15.6.1","vite-plugin-solid":"^2.6.1","babel-preset-solid":"^1.6.10","dts-bundle-generator":"^7.2.0","eslint-plugin-import":"^2.27.5","eslint-plugin-promise":"^6.1.1","@solidjs/testing-library":"^0.6.0","@testing-library/jest-dom":"^5.16.5","@types/testing-library__jest-dom":"^5.14.5","@typescript-eslint/eslint-plugin":"^5.54.0","eslint-config-standard-with-typescript":"^34.0.0"},"peerDependencies":{"klinecharts":">=10.0.0-beta1"},"_npmOperationalInternal":{"tmp":"tmp/k-chart-pro_0.2.0_1777455611358_0.32206436959511797","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"k-chart-pro","version":"0.2.1","description":"Financial chart built out of the box based on KLineChart.","type":"module","main":"./dist/klinecharts-pro.umd.js","module":"./dist/klinecharts-pro.js","types":"./dist/index.d.ts","repository":{"type":"git","url":"git+https://github.com/klinecharts/pro.git"},"keywords":["klinecharts","pro","candlestick","finance","stock","chart","canvas"],"author":{"name":"liihuu"},"license":"Apache-2.0","private":false,"scripts":{"build-core":"tsc && vite build","build-dts":"dts-bundle-generator --no-banner true --umd-module-name klinechartspro -o dist/index.d.ts src/index.ts","build":"npm run build-core && npm run build-dts","docs:dev":"vitepress dev docs","docs:build":"vitepress build docs","docs:preview":"vitepress preview docs","docs:deploy":"npm run docs:build && gh-pages -d website"},"devDependencies":{"@solidjs/testing-library":"^0.6.0","@testing-library/jest-dom":"^5.16.5","@types/lodash":"^4.14.191","@types/testing-library__jest-dom":"^5.14.5","@typescript-eslint/eslint-plugin":"^5.54.0","babel-preset-solid":"^1.6.10","dts-bundle-generator":"^7.2.0","eslint":"^8.35.0","eslint-config-standard-with-typescript":"^34.0.0","eslint-plugin-import":"^2.27.5","eslint-plugin-n":"^15.6.1","eslint-plugin-promise":"^6.1.1","gh-pages":"^5.0.0","klinecharts":"^10.0.0-beta1","less":"^4.1.3","less-loader":"^11.1.0","typescript":"^4.9.5","vite":"^4.1.1","vite-plugin-solid":"^2.6.1","vitepress":"^1.0.0-alpha.75","vitest":"^0.28.4"},"dependencies":{"lodash":"^4.17.21","solid-js":"^1.6.11"},"peerDependencies":{"klinecharts":">=10.0.0-beta1"},"gitHead":"860731a241bd8e1e466a3bc46238a8dfacf8623c","_id":"k-chart-pro@0.2.1","bugs":{"url":"https://github.com/klinecharts/pro/issues"},"homepage":"https://github.com/klinecharts/pro#readme","_nodeVersion":"24.15.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-axusiBX7I3B2Yrj+wXnpNTiJI4QmaGKbBQ+pYIYMVHeGUY9MPx6Hka7/p3BuVev+/+MlQttQbLlvpmA6u8krLg==","shasum":"f3d8df668d50eaa68d2dd2d4ed2c44310abd6e3f","tarball":"https://registry.npmjs.org/k-chart-pro/-/k-chart-pro-0.2.1.tgz","fileCount":9,"unpackedSize":1577064,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCZCGyRKDcPtLZo1WVf8mawJ1T68XcKh8tdRU4BissrFAIgAU5w0sQUoi6uoDJYYIqBfJaMP9BBa2FAFPAeGyXivpI="}]},"_npmUser":{"name":"tranzwalle","email":"mail2q@gmail.com"},"directories":{},"maintainers":[{"name":"tranzwalle","email":"mail2q@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/k-chart-pro_0.2.1_1778081211909_0.93448642050267"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-29T09:40:11.245Z","modified":"2026-05-06T15:26:52.239Z","0.2.0":"2026-04-29T09:40:11.531Z","0.2.1":"2026-05-06T15:26:52.140Z"},"bugs":{"url":"https://github.com/klinecharts/pro/issues"},"author":{"name":"liihuu"},"license":"Apache-2.0","homepage":"https://github.com/klinecharts/pro#readme","keywords":["klinecharts","pro","candlestick","finance","stock","chart","canvas"],"repository":{"type":"git","url":"git+https://github.com/klinecharts/pro.git"},"description":"Financial chart built out of the box based on KLineChart.","maintainers":[{"name":"tranzwalle","email":"mail2q@gmail.com"}],"readme":"# k-chart-pro\n\n> Financial chart built out of the box based on [KLineChart v10](https://github.com/klinecharts/KLineChart).\n\nA production-ready financial charting component with built-in UI widgets, indicator management, drawing tools, and real-time data support. Powered by SolidJS and KLineChart v10.\n\n## Features\n\n- **Out-of-the-box UI**: Period bar, drawing toolbar, indicator modal, symbol search, settings, screenshot, and more\n- **KLineChart v10**: Latest major version with improved data loader architecture\n- **Real-time data**: Built-in WebSocket datafeed support via customizable Datafeed interface\n- **Indicators**: MA, EMA, SMA, VOL, MACD, BOLL, KDJ, RSI, etc.\n- **Drawing tools**: Line, ray, segment, fibonacci, rect, circle, and more\n- **Themes**: Light and dark themes with full CSS customizability\n- **Internationalization**: Built-in zh-CN and en-US locales\n- **TypeScript**: Full type definitions included\n\n## Install\n\n```bash\nnpm install k-chart-pro klinecharts\n```\n\n## Quick Start\n\n### Basic Usage\n\n```typescript\nimport { KLineChartPro, DefaultDatafeed } from 'k-chart-pro'\nimport 'k-chart-pro/dist/klinecharts-pro.css'\n\nconst chart = new KLineChartPro({\n  container: document.getElementById('chart'),\n  symbol: {\n    ticker: 'AAPL',\n    pricePrecision: 2,\n    volumePrecision: 0\n  },\n  period: { multiplier: 1, timespan: 'day', text: 'D' },\n  datafeed: new DefaultDatafeed('YOUR_POLYGON_API_KEY')\n})\n```\n\n### HTML/Script Tag\n\n```html\n<link rel=\"stylesheet\" href=\"https://unpkg.com/k-chart-pro/dist/klinecharts-pro.css\">\n<script src=\"https://unpkg.com/k-chart-pro/dist/klinecharts-pro.umd.js\"></script>\n<script>\n  const chart = new klinechartspro.KLineChartPro({\n    container: document.getElementById('chart'),\n    symbol: { ticker: 'AAPL', pricePrecision: 2, volumePrecision: 0 },\n    period: { multiplier: 1, timespan: 'day', text: 'D' },\n    datafeed: new klinechartspro.DefaultDatafeed('YOUR_API_KEY')\n  })\n</script>\n```\n\n## API Reference\n\n### ChartProOptions\n\n```typescript\ninterface ChartProOptions {\n  container: string | HTMLElement\n  symbol: SymbolOptions\n  period: PeriodOptions\n  datafeed: Datafeed\n  styles?: DeepPartial<Styles>\n  theme?: string\n  locale?: string\n  timezone?: string\n  drawingBarVisible?: boolean\n  watermark?: string | Node\n  periods?: PeriodOptions[]\n  mainIndicators?: string[]\n  subIndicators?: string[]\n}\n```\n\n| Property | Type | Required | Default | Description |\n|----------|------|----------|---------|-------------|\n| container | `string \\| HTMLElement` | Yes | - | Chart container element or element ID |\n| symbol | `SymbolOptions` | Yes | - | Initial trading symbol |\n| period | `PeriodOptions` | Yes | - | Initial time period |\n| datafeed | `Datafeed` | Yes | - | Data provider implementation |\n| styles | `DeepPartial<Styles>` | No | `{}` | Chart visual styles |\n| theme | `string` | No | `'light'` | UI theme name |\n| locale | `string` | No | `'zh-CN'` | UI language |\n| timezone | `string` | No | `'Asia/Shanghai'` | Display timezone |\n| drawingBarVisible | `boolean` | No | `true` | Show drawing toolbar |\n| watermark | `string \\| Node` | No | Logo SVG | Chart watermark |\n| periods | `PeriodOptions[]` | No | See below | Available time periods |\n| mainIndicators | `string[]` | No | `['MA']` | Default main pane indicators |\n| subIndicators | `string[]` | No | `['VOL']` | Default sub pane indicators |\n\n### SymbolOptions\n\n```typescript\ninterface SymbolOptions {\n  ticker: string\n  name?: string\n  shortName?: string\n  exchange?: string\n  market?: string\n  pricePrecision?: number\n  volumePrecision?: number\n  priceCurrency?: string\n  type?: string\n  logo?: string\n}\n```\n\n### PeriodOptions\n\n```typescript\ninterface PeriodOptions {\n  multiplier: number\n  timespan: string\n  text: string\n}\n```\n\nBuilt-in periods:\n```typescript\n[\n  { multiplier: 1, timespan: 'minute', text: '1m' },\n  { multiplier: 5, timespan: 'minute', text: '5m' },\n  { multiplier: 15, timespan: 'minute', text: '15m' },\n  { multiplier: 1, timespan: 'hour', text: '1H' },\n  { multiplier: 2, timespan: 'hour', text: '2H' },\n  { multiplier: 4, timespan: 'hour', text: '4H' },\n  { multiplier: 1, timespan: 'day', text: 'D' },\n  { multiplier: 1, timespan: 'week', text: 'W' },\n  { multiplier: 1, timespan: 'month', text: 'M' },\n  { multiplier: 1, timespan: 'year', text: 'Y' }\n]\n```\n\n### Datafeed Interface\n\n```typescript\ninterface Datafeed {\n  searchSymbols(search?: string): Promise<SymbolOptions[]>\n  getHistoryKLineData(\n    symbol: SymbolOptions,\n    period: PeriodOptions,\n    from: number,\n    to: number\n  ): Promise<KLineData[]>\n  subscribe(\n    symbol: SymbolOptions,\n    period: PeriodOptions,\n    callback: (data: KLineData) => void\n  ): void\n  unsubscribe(symbol: SymbolOptions, period: PeriodOptions): void\n}\n```\n\n| Method | Description |\n|--------|-------------|\n| `searchSymbols` | Search available trading symbols |\n| `getHistoryKLineData` | Fetch historical OHLCV data (timestamps in milliseconds) |\n| `subscribe` | Subscribe to real-time price updates |\n| `unsubscribe` | Unsubscribe from real-time updates |\n\n### ChartPro Methods\n\n```typescript\ninterface ChartPro {\n  setTheme(theme: string): void\n  getTheme(): string\n  setStyles(styles: DeepPartial<Styles>): void\n  getStyles(): Styles\n  setLocale(locale: string): void\n  getLocale(): string\n  setTimezone(timezone: string): void\n  getTimezone(): string\n  setSymbol(symbol: SymbolOptions): void\n  getSymbol(): SymbolOptions\n  setPeriod(period: PeriodOptions): void\n  getPeriod(): PeriodOptions\n}\n```\n\n## Custom Datafeed Example\n\n```typescript\nimport { Datafeed, SymbolOptions, PeriodOptions, DatafeedSubscribeCallback } from 'k-chart-pro'\nimport { KLineData } from 'klinecharts'\n\nclass MyDatafeed implements Datafeed {\n  async searchSymbols(search?: string): Promise<SymbolOptions[]> {\n    const response = await fetch(`/api/search?q=${search ?? ''}`)\n    return response.json()\n  }\n\n  async getHistoryKLineData(\n    symbol: SymbolOptions,\n    period: PeriodOptions,\n    from: number,\n    to: number\n  ): Promise<KLineData[]> {\n    const response = await fetch(\n      `/api/kline?symbol=${symbol.ticker}&period=${period.text}&from=${from}&to=${to}`\n    )\n    return response.json()\n  }\n\n  subscribe(\n    symbol: SymbolOptions,\n    period: PeriodOptions,\n    callback: DatafeedSubscribeCallback\n  ): void {\n    this._ws = new WebSocket(`wss://stream.example.com/${symbol.ticker}`)\n    this._ws.onmessage = (event) => {\n      const data = JSON.parse(event.data)\n      callback({\n        timestamp: data.t,\n        open: data.o,\n        high: data.h,\n        low: data.l,\n        close: data.c,\n        volume: data.v\n      })\n    }\n  }\n\n  unsubscribe(symbol: SymbolOptions, period: PeriodOptions): void {\n    this._ws?.close()\n  }\n\n  private _ws?: WebSocket\n}\n```\n\n## Theme Customization\n\n```typescript\nchart.setTheme('dark')\n\nchart.setStyles({\n  candle: {\n    bar: {\n      upColor: '#26a69a',\n      downColor: '#ef5350'\n    }\n  },\n  indicator: {\n    tooltip: {\n      features: [\n        { id: 'visible', position: 'middle' /* ... */ }\n      ]\n    }\n  }\n})\n```\n\n## Internationalization\n\n```typescript\nimport { loadLocales } from 'k-chart-pro'\n\n// Load locale data\nloadLocales({ 'custom': { /* translations */ } })\n\n// Switch locale\nchart.setLocale('en-US')\n```\n\n## Architecture\n\n```\nk-chart-pro/\n├── src/\n│   ├── types.ts              # Core TypeScript interfaces\n│   ├── KLineChartPro.tsx     # Main wrapper class\n│   ├── ChartProComponent.tsx # Core chart component (SolidJS)\n│   ├── DefaultDatafeed.ts    # Polygon.io datafeed implementation\n│   ├── extension/            # Drawing overlay extensions\n│   ├── widget/               # UI widgets (period bar, modals, etc.)\n│   ├── component/            # Reusable UI components\n│   └── i18n/                 # Localization files\n```\n\n### Key Dependencies\n\n- **KLineChart v10**: Core charting engine\n- **SolidJS**: Reactive UI framework\n- **Vite**: Build tool\n- **TypeScript**: Type safety\n\n## KLineChart v10 Migration Notes\n\nThis package has been upgraded from KLineChart v9 to v10. Key API changes:\n\n| v9 API | v10 API |\n|--------|---------|\n| `customApi: { formatDate }` | `formatter: { formatDate }` |\n| `applyNewData()` / `applyMoreData()` / `updateData()` / `loadMore()` | `setDataLoader({ getBars, subscribeBar, unsubscribeBar })` |\n| `ActionType.OnTooltipIconClick` | `'onCandleTooltipFeatureClick'` |\n| `indicator.tooltip.icons` | `indicator.tooltip.features` |\n| `setPriceVolumePrecision(p, v)` | `setSymbol({ pricePrecision, volumePrecision })` |\n| `getIndicatorByPaneId(paneId, name)` | `getIndicators({ paneId, name })` (returns array) |\n| `removeIndicator(paneId, name)` | `removeIndicator({ paneId, name })` |\n\n## License\n\nApache License 2.0\n\n## Links\n\n- [KLineChart](https://github.com/klinecharts/KLineChart)\n- [KLineChart Pro Original](https://github.com/klinecharts/pro)\n","readmeFilename":"README.md"}