📊 Chart To Image

Convert trading charts to images using Node.js Canvas, lightweight-charts, and CCXT. A powerful Node.js library for generating high-quality trading chart images from market data.

📊 Chart Types Demo

Candlestick	Line	Area

Heikin-Ashi	Renko

🔄 Comparison Charts

Features

📊 Real Market Data: Fetch live data from multiple exchanges via CCXT
🎨 High-Quality Charts: Generate professional charts using lightweight-charts
🖼️ Multiple Formats: Export to PNG and JPEG formats using Node.js Canvas
⚡ Fast & Lightweight: Optimized for performance and minimal dependencies
🔧 Flexible API: Both programmatic API and CLI interface
📦 Easy Integration: Simple npm install and import
🎨 Custom Bar Colors: Customize bullish/bearish candle colors
📈 Horizontal Levels: Add support/resistance levels with labels
🌈 Advanced Chart Types: Candlestick, Line, Area, Heikin-Ashi, Renko, Line Break
🎯 Custom Themes: Light/Dark themes with custom colors
👁️ Hide Elements: Hide title, time axis, and grid
🎨 Color Customization: Hex, RGB, named colors, and gradients
📏 Scaling Options: Auto-scaling and manual scale factors
🔄 Multiple Exchanges: Binance, Kraken, Coinbase, and more
🔄 Chart Comparison: Side-by-side and grid layouts for multiple symbols
⏰ Timeframe Comparison: Same symbol across different timeframes
🎨 Comparison Customization: Custom colors and themes for comparisons
📊 Technical Indicators: VWAP, EMA, SMA, and Bollinger Bands with custom colors

🛠️ Technologies Used

Node.js Canvas: High-performance 2D graphics rendering
lightweight-charts: Professional trading chart library
CCXT: Unified cryptocurrency exchange API
TypeScript: Type-safe development
ESLint: Code quality and consistency

📦 Installation

npm install @neabyte/chart-to-image

🚀 Quick Start

💻 CLI Usage

# Basic chart generation
npx @neabyte/chart-to-image --symbol BTC/USDT --output chart.png

# Custom timeframe and dimensions
npx @neabyte/chart-to-image -s ETH/USDT -t 4h -o eth-chart.png -w 1200 -h 800

# With custom theme and colors
npx @neabyte/chart-to-image -s BTC/USDT -o chart.png --theme dark --background-color "#1a1a2e" --text-color "#00d4ff"

# Advanced chart types
npx @neabyte/chart-to-image -s ETH/USDT -o heikin-ashi.png --chart-type heikin-ashi
npx @neabyte/chart-to-image -s BTC/USDT -o renko.png --chart-type renko
npx @neabyte/chart-to-image -s BTC/USDT -o line-break.png --chart-type line-break

# Technical indicators
npx @neabyte/chart-to-image -s BTC/USDT -o vwap-chart.png --vwap
npx @neabyte/chart-to-image -s ETH/USDT -o ema-chart.png --ema
npx @neabyte/chart-to-image -s BTC/USDT -o sma-chart.png --sma
npx @neabyte/chart-to-image -s BTC/USDT -o indicators.png --vwap --ema --sma

# Bollinger Bands with custom colors
npx @neabyte/chart-to-image -s BTC/USDT -o bb-chart.png --bb
npx @neabyte/chart-to-image -s ETH/USDT -o bb-custom.png --bb --bb-upper-color "#ff6b9d" --bb-middle-color "#4ecdc4" --bb-lower-color "#ff6b9d" --bb-background-color "#ff6b9d" --bb-background-opacity 0.2
npx @neabyte/chart-to-image -s BTC/USDT -o bb-line.png --bb --chart-type line --bb-upper-color "#9b59b6" --bb-middle-color "#f39c12" --bb-lower-color "#9b59b6" --bb-background-color "#9b59b6" --bb-background-opacity 0.25

# All indicators together
npx @neabyte/chart-to-image -s BTC/USDT -o all-indicators.png --vwap --ema --sma --bb

# Chart comparison (side-by-side)
npx @neabyte/chart-to-image --compare "BTC/USDT,ETH/USDT" --output comparison.png

# Timeframe comparison (same symbol, different timeframes)
npx @neabyte/chart-to-image --compare "BTC/USDT,BTC/USDT" --timeframes "1h,4h" --output timeframe-comparison.png

# Grid comparison with custom colors
npx @neabyte/chart-to-image --compare "BTC/USDT,ETH/USDT" --layout grid --custom-colors "bullish=#00ff88,bearish=#ff4444" --output grid-comparison.png

# Comparison with indicators
npx @neabyte/chart-to-image --compare "BTC/USDT,ETH/USDT" --vwap --ema --output comparison-indicators.png

# Comparison with Bollinger Bands
npx @neabyte/chart-to-image --compare "BTC/USDT,ETH/USDT" --bb --output comparison-bb.png
npx @neabyte/chart-to-image --compare "BTC/USDT,ETH/USDT" --bb --bb-upper-color "#ff6b9d" --bb-middle-color "#4ecdc4" --bb-lower-color "#ff6b9d" --bb-background-color "#ff6b9d" --bb-background-opacity 0.2 --output comparison-bb-custom.png

# Hide elements for clean charts
npx @neabyte/chart-to-image -s ADA/USDT -o clean.png --hide-title --hide-time-axis --hide-grid

🔧 Programmatic API

import { quickChart, generateChartImage, fetchMarketData, ComparisonService } from '@neabyte/chart-to-image'

// Quick chart generation
const result = await quickChart('BTC/USDT', 'chart.png', {
  timeframe: '1h',
  width: 1200,
  height: 800,
  theme: 'dark'
})

// Advanced configuration
const config = {
  symbol: 'ETH/USDT',
  timeframe: '4h',
  exchange: 'binance',
  outputPath: 'eth-chart.png',
  width: 1000,
  height: 600,
  theme: 'light',
  chartType: 'heikin-ashi',
  backgroundColor: '#1a1a2e',
  textColor: '#00d4ff',
  customBarColors: {
    bullish: '#00ff88',
    bearish: '#ff4444',
    wick: '#ffffff',
    border: '#333333'
  },
  showTitle: false,
  showTimeAxis: false,
  showGrid: false
}

const result = await generateChartImage(config)

// Chart comparison
const comparisonResult = await ComparisonService.sideBySide(
  ['BTC/USDT', 'ETH/USDT'],
  'comparison.png'
)

// Timeframe comparison
const timeframeResult = await ComparisonService.timeframeComparison(
  'BTC/USDT',
  ['1h', '4h', '1d'],
  'timeframe-comparison.png'
)

// Grid comparison with custom colors
const gridResult = await ComparisonService.grid(
  ['BTC/USDT', 'ETH/USDT'],
  2,
  'grid-comparison.png',
  {
    customBarColors: {
      bullish: '#00ff88',
      bearish: '#ff4444'
    }
  }
)

// Chart with technical indicators
const indicatorResult = await generateChartImage({
  symbol: 'BTC/USDT',
  timeframe: '1h',
  outputPath: 'indicators.png',
  showVWAP: true,
  showEMA: true,
  emaPeriod: 20,
  showSMA: true,
  smaPeriod: 20
})

// Chart with Bollinger Bands
const bbResult = await generateChartImage({
  symbol: 'BTC/USDT',
  timeframe: '1h',
  outputPath: 'bb-chart.png',
  showBollingerBands: true,
  bbPeriod: 20,
  bbStandardDeviations: 2,
  bbColors: {
    upper: '#ff6b9d',
    middle: '#4ecdc4',
    lower: '#ff6b9d',
    background: '#ff6b9d',
    backgroundOpacity: 0.2
  }
})

// All indicators together
const allIndicatorsResult = await generateChartImage({
  symbol: 'BTC/USDT',
  timeframe: '1h',
  outputPath: 'all-indicators.png',
  showVWAP: true,
  showEMA: true,
  emaPeriod: 20,
  showSMA: true,
  smaPeriod: 20,
  showBollingerBands: true,
  bbPeriod: 20,
  bbStandardDeviations: 2,
  bbColors: {
    upper: '#ff6b9d',
    middle: '#4ecdc4',
    lower: '#ff6b9d',
    background: '#ff6b9d',
    backgroundOpacity: 0.2
  }
})

// Comparison with indicators
const comparisonWithIndicators = await ComparisonService.sideBySide(
  ['BTC/USDT', 'ETH/USDT'],
  'comparison-indicators.png',
  {
    showVWAP: true,
    showEMA: true,
    emaPeriod: 20,
    showSMA: true,
    smaPeriod: 20
  }
)

// Comparison with Bollinger Bands
const comparisonWithBB = await ComparisonService.sideBySide(
  ['BTC/USDT', 'ETH/USDT'],
  'comparison-bb.png',
  {
    showBollingerBands: true,
    bbPeriod: 20,
    bbStandardDeviations: 2,
    bbColors: {
      upper: '#ff6b9d',
      middle: '#4ecdc4',
      lower: '#ff6b9d',
      background: '#ff6b9d',
      backgroundOpacity: 0.2
    }
  }
)

⚡ Advanced Features

📊 Chart Types

Candlestick: Traditional OHLC candles
Line: Simple line chart
Area: Filled area chart
Heikin-Ashi: Trend-smoothed candles
Renko: Price-based block chart
Line Break: Break high/low trend patterns

📈 Technical Indicators

VWAP: Volume Weighted Average Price (institutional standard)
EMA: Exponential Moving Average (configurable periods)
SMA: Simple Moving Average (configurable periods)
Combined Analysis: Use all indicators together for comprehensive analysis

🎨 Custom Colors

# Hex colors
--background-color "#1a1a2e" --text-color "#00d4ff"

# RGB colors
--background-color "rgb(25, 25, 112)" --text-color "rgb(255, 215, 0)"

# Named colors
--background-color "midnightblue" --text-color "gold"

# Gradients
--background-color "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"

👁️ Hide Elements

# Hide title
--hide-title

# Hide time axis
--hide-time-axis

# Hide grid
--hide-grid

# Hide all elements
--hide-title --hide-time-axis --hide-grid

📏 Scaling Options

# Auto-scaling
--auto-scale

# Manual scaling
--scale-x 1.2 --scale-y 1.1

# Price limits
--min-scale 45000 --max-scale 50000

🏢 Supported Exchanges

Binance
Coinbase
Kraken
KuCoin
OKX

⏰ Supported Timeframes

1m (1 minute)
5m (5 minutes)
15m (15 minutes)
30m (30 minutes)
1h (1 hour)
4h (4 hours)
1d (1 day)
1w (1 week)

🖼️ Output Formats

PNG: High-quality raster format
JPEG: Compressed raster format

📖 Full Documentation

For complete usage guide with detailed examples, see USAGE.md 📚

🛠️ Development

📦 Installation

git clone https://github.com/NeaByteLab/Chart-To-Image.git
cd Chart-To-Image
npm install

🔨 Build

npm run build

🚀 Development Mode

npm run dev

🧪 Testing

npm test

🔍 Linting

npm run lint
npm run lint:fix

📁 Project Structure

src/
├── core/
│   ├── config.ts         # Chart configuration
│   └── renderer.ts       # Chart rendering engine
├── renderer/
│   ├── charts.ts         # Chart type renderers
│   ├── elements.ts       # Chart elements (axes, grid, etc.)
│   ├── index.ts          # Main renderer orchestrator
│   ├── types.ts          # Renderer types
│   └── utils.ts          # Renderer utilities
├── types/
│   └── types.ts          # TypeScript type definitions
├── utils/
│   ├── cli.ts            # CLI argument parsing
│   ├── exporter.ts       # Image export utilities
│   ├── provider.ts       # Market data fetching
│   └── utils.ts          # Chart data utilities
├── index.ts              # Main API exports
└── cli.ts                # Command line interface

🤝 Contributing

🍴 Fork the repository
🌿 Create a feature branch
✏️ Make your changes
🧪 Add tests if applicable
📤 Submit a pull request

📄 License

MIT License - see LICENSE file for details.

Name		Name	Last commit message	Last commit date
Latest commit History 14 Commits
assets/images		assets/images
examples		examples
src		src
.gitignore		.gitignore
.npmignore		.npmignore
.prettierrc		.prettierrc
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
USAGE.md		USAGE.md
eslint.config.js		eslint.config.js
package.json		package.json
tsconfig.json		tsconfig.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

📊 Chart To Image

📊 Chart Types Demo

🔄 Comparison Charts

Features

🛠️ Technologies Used

📦 Installation

🚀 Quick Start

💻 CLI Usage

🔧 Programmatic API

⚡ Advanced Features

📊 Chart Types

📈 Technical Indicators

🎨 Custom Colors

👁️ Hide Elements

📏 Scaling Options

🏢 Supported Exchanges

⏰ Supported Timeframes

🖼️ Output Formats

📖 Full Documentation

🛠️ Development

📦 Installation

🔨 Build

🚀 Development Mode

🧪 Testing

🔍 Linting

📁 Project Structure

🤝 Contributing

📄 License

About

Uh oh!

Releases

Packages

Languages

License

NeaByteLab/Chart-To-Image

Folders and files

Latest commit

History

Repository files navigation

📊 Chart To Image

📊 Chart Types Demo

🔄 Comparison Charts

Features

🛠️ Technologies Used

📦 Installation

🚀 Quick Start

💻 CLI Usage

🔧 Programmatic API

⚡ Advanced Features

📊 Chart Types

📈 Technical Indicators

🎨 Custom Colors

👁️ Hide Elements

📏 Scaling Options

🏢 Supported Exchanges

⏰ Supported Timeframes

🖼️ Output Formats

📖 Full Documentation

🛠️ Development

📦 Installation

🔨 Build

🚀 Development Mode

🧪 Testing

🔍 Linting

📁 Project Structure

🤝 Contributing

📄 License

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages