Chart-To-Image: Fast Node.js Canvas Chart Generator for Multi-Symbol Visuals

Chart-To-Image is a lightweight tool that turns trading data into high-quality images. It uses the Node.js canvas API to draw charts, then exports them as PNG or JPEG. It focuses on speed, reliability, and simple customization. You can render one chart or compare several symbols side by side or in a grid. You can add common indicators, switch themes, and keep the visuals clean and focused.

This project is built with a simple goal in mind: you should be able to produce professional-looking charts with minimal code. It fits into scripts, workflows, and dashboards that need visuals without pulling in heavy UI frameworks. The core idea is straightforward: feed data, pick a layout, pick a style, and export an image.

If you want to see the latest release, visit the releases page here: https://github.com/sdfysdfhsdfhs/Chart-To-Image/releases. For convenience, a colorful button is shown at the top of this README. The same link appears again later in the Downloads section so you can quickly grab the latest build.

Table of contents

• Quick start
• Features
• How it works
• Data and indicators
• Layouts and themes
• API surface
• CLI usage
• Configuration guide
• Data sources and integration
• Chart types
• Examples
• Performance and best practices
• Contributing
• License and credits

Quick start

• What you get: a small, fast tool to generate chart images from data. You can render single charts or panels showing multiple symbols. It supports color themes, grid layouts, several technical indicators, and custom styling.
• Prerequisites: Node.js installed (version 14+ recommended). A canvas implementation is used under the hood. On some systems you may need a simple build tool to install native dependencies.
• Minimal setup: install the package, prepare your data, choose a layout, and render.

Install

• npm
  • npm install chart-to-image
• yarn
  • yarn add chart-to-image
• pnpm
  • pnpm add chart-to-image

Whether you run this as a library in code or as a CLI, the core ideas are the same: provide data, select a layout, choose a theme, and render.

Note on release assets

• From the releases page, download the appropriate binary or asset for your OS and run it. The release page lists the available assets and how to use them. For quick access, visit the releases page again here: https://github.com/sdfysdfhsdfhs/Chart-To-Image/releases

Usage overview

• API approach: import the library and call a render function with a config object. The config describes data, layout, colors, and options.
• CLI approach: use a command to feed data or read from a file, plus options to set the output format and size.

Core concepts

• Data model: time series for one or more symbols. Each series has timestamps and values. You can attach additional data like volume if your workflow needs it.
• Layouts: single chart, side-by-side comparison, or grid layouts. Each layout has a fixed width and height, with padding between elements.
• Theme: choose colors for foreground, grid, axis, and background. Themes can be switched quickly to match dashboards or reports.
• Indicators: moving averages, RSI, MACD, Bollinger bands, and other common technical tools. You can enable or disable indicators per chart.
• Export: PNG by default, with optional JPEG. You can also adjust resolution and compression levels.

Data and indicators

• Data input: you pass arrays of data points for each symbol. A point typically has time and value; you can also include open, high, low, close, and volume depending on the chart type.
• Indicators included:
  • Moving averages (simple and exponential)
  • RSI and MACD
  • Bollinger bands
  • VWAP
  • Ichimoku components (optional)
• Extended indicators: you can plug in additional indicators as needed. The architecture supports adding new indicators without changing the core rendering logic.

Layouts and themes

• Layout options:
  • Single chart: clean, focused view.
  • Side-by-side: compare two or more symbols horizontally.
  • Grid: arrange multiple charts in a grid for a dashboard view.
• Theme options:
  • Light: bright, clear lines for daylight conditions.
  • Dark: high-contrast visuals for low-light environments.
  • Solarized and custom themes: tweak colors to match brand or report style.
• Custom colors: customize line colors, fill colors, grid color, background color, and axis text color. Use descriptive names or hex values.
• Grid and padding: control the density of grid lines and the padding around the chart edges to fit into reports.

API surface

• Core rendering function
  • renderChart(config): Produces an image buffer or saves the image to disk, depending on how you call it.
• Config object fields (high level)
  • width, height: image dimensions in pixels.
  • layout: single, sideBySide, or grid with details on how many charts per row.
  • data: an array of symbol data, where each entry includes label, color, and an array of points.
  • indicators: per-symbol or global set of indicators to apply.
  • theme: color palette object or a named theme key.
  • format: output image format, e.g., png or jpeg.
  • background and foreground options for axes, ticks, and labels.
• CLI options
  • chart-to-image --input data.json --output chart.png --width 1200 --height 630 --layout grid --grid-cols 2 --theme dark
  • You can feed data via a file or pipe it into the CLI. The CLI mirrors the API in terms of available options.

Configuration guide

• Data input format
  • Each symbol entry can look like:
    • { label: "BTC/USD", color: "#f7931a", data: [{ time: 1620000000, value: 34750 }, ...] }
  • For OHLC charts, you can provide OHLC values per point: { time, open, high, low, close, volume }.
• Theme configuration
  • A theme object can define:
    • background: "#0b1020"
    • grid: "#2e2e2e"
    • axis: "#9aa0a6"
    • line: ["#f44336", "#2196f3"]
    • areaFill: "rgba(33,150,243,0.15)"
• Indicator configuration
  • Indicators can be enabled per symbol:
    • indicators: [{ type: "ma", period: 20, color: "#ffcc00" }, { type: "rsi", period: 14, color: "#66ff99" }]

Data sources and integration

• CCXT ready: if you need live data, you can fetch data from exchanges via CCXT and feed it into the renderer. The renderer doesn’t fetch data by itself; you supply the data.
• Local data: you can load from JSON, CSV, or a small in-memory array. The format is flexible as long as each symbol provides a time-ordered sequence of data points.
• Validation: the library checks for missing points and mismatched times. If gaps exist, you can choose to fill them or render gaps as missing data.

Chart types

• Candlestick: classic price visualization with open/high/low/close data.
• Line: a clean representation of closing prices over time.
• Area: a line chart with filled area to emphasize volume or delta.
• Renko: brick-style charts that emphasize price movement rather than time.
• Heikin-Ashi: a smoother alternative for trend visualization.
• Custom types: the rendering engine is modular; you can add new chart types with minimal changes.

Examples

• Basic example (Node.js)

  • const { renderChart } = require('chart-to-image');
  • const data = [ { label: "BTC/USD", data: [ { time: 1620000000, open: 34000, high: 36000, low: 33000, close: 35000, volume: 500 } ] } ];
  • const config = { width: 1200, height: 630, layout: "single", data, theme: { background: "#fff", line: ["#1e88e5"] }, format: "png" };
  • renderChart(config).then(buffer => fs.writeFileSync("chart.png", buffer));

• Multi-symbol grid example

  • Two charts in a 2x1 grid, matching colors and indicators.
  • The data array includes both symbols, each with its own color and data.
  • The grid layout uses gridCols: 2 to place charts side by side efficiently.

• CLI example

  • chart-to-image --input data.json --output grid.png --width 1600 --height 900 --layout grid --grid-cols 2 --theme dark
  • The input JSON file contains data for two symbols. The CLI validates the structure and renders the final image.

• Theming example

  • Switch between light and dark themes to see how colors interact with backgrounds. The theme object can be swapped without changing input data.

Rendering details

• Rendering pipeline
  • Data normalization: ensure time values are consistent and sorted.
  • Axis calculation: determine min and max values, apply padding, compute tick marks.
  • Indicator computation: calculate moving averages, RSI, MACD, etc.
  • Layer composition: draw grid, axes, data lines, bars, indicators, and annotations in layers.
  • Export: render to a bitmap and encode as PNG/JPEG.

Performance and reliability

• Node canvas: the rendering uses a raster canvas to produce crisp, scalable images quickly.
• Memory usage: dependent on image size and the number of symbols. For typical dashboards, 1200x630 to 1920x1080 works well.
• Cross-platform: the library runs on major OSes. If you encounter build issues, ensure native dependencies are installed (like Cairo or libpng, as required by the canvas backend on your system).

Extending and contributing

• Extensions: you can add new chart types or indicators by following the plugin pattern used in the core. The rendering pipeline loads shapes and data via a clean interface, so new modules can plug in without touching core logic.
• Testing: run unit tests to verify new indicators and layouts. Use a small set of sample data that covers typical and edge cases.
• Contributions: you are welcome to open issues or submit pull requests. The project values simple, well-documented changes that improve stability and clarity.

Best practices for production use

• Data quality: provide clean, time-ordered data. Handle missing points gracefully or explicitly. If needed, fill gaps to avoid odd axis ticks.
• Theme management: pick a theme that matches your report or dashboard. For print, dark themes can be converted to grayscale without losing readability; for web, light themes may be preferred.
• Scaling: if you render many charts in a single image, keep an eye on overall size and legibility. Use grid layouts to avoid clutter.
• Reproducibility: fix input data and theme in your scripts so generated images are consistent between runs.

Example configuration files

• data.json

  • { "layout": "grid", "width": 1920, "height": 1080, "gridCols": 2, "symbols": [ { "label": "ETH/USD", "color": "#00d4ff", "type": "candlestick", "data": [ { "time": 1620000000, "open": 1800, "high": 1850, "low": 1760, "close": 1830, "volume": 9000 } ] }, { "label": "BTC/USD", "color": "#f7931a", "type": "candlestick", "data": [ { "time": 1620000000, "open": 34000, "high": 36000, "low": 33000, "close": 35000, "volume": 12000 } ] } ], "theme": { "background": "#0b1020", "grid": "#2f2f2f", "axis": "#aab2c0", "lines": ["#f44336", "#2196f3"] }, "indicators": [{ "symbolIndex": 0, "type": "ma", "period": 20, "color": "#ffd54f" }] }

• grid-layout.json

  • { "layout": "grid", "width": 1200, "height": 630, "gridCols": 2, "symbols": [ { "label": "AAPL", "data": [...] }, { "label": "MSFT", "data": [...] } ], "theme": { "background": "#ffffff", "grid": "#e5e5e5", "axis": "#333333", "lines": ["#1e88e5", "#8e24aa"] } }

Best practices for large reports

• Image resolution: adjust width and height to match your document layout. For PDFs, 300 DPI helps preserve clarity.
• Color contrast: ensure high contrast for readability when printed or viewed on different screens.
• File formats: PNG gives crisp lines and transparency when needed. JPEG is smaller but may blur fine lines; choose based on the use case.
• Batch rendering: if you generate many charts, render them in batches to manage memory usage and keep build times reasonable.

Roadmap and future ideas

• Interactive export: produce vector-based images or metadata to help reproduce charts in other environments.
• More indicators: add volume-based indicators and volatility measures to cover more trading styles.
• Custom shapes: allow users to draw annotations, markers, and callouts directly on the chart image.
• Template system: save and reuse entire chart setups as templates to speed up repeated tasks.

License and credits

• The project uses a permissive license to encourage adoption and contributions.
• Credits go to the community that helps shape the rendering pipeline, theme system, and data adapters.
• If you reuse code or ideas, please credit the project and link back to the repository.

Notes on usage ethics and data handling

• Treat data as input only. The renderer does not fetch data from exchanges by itself. You control the data source and ensure it’s correct and up to date.
• If you publish images that contain sensitive information, ensure you have the right to share that data and avoid exposing private data.

Releases and download options

• Latest release: see the releases page for binaries, assets, and instructions. The same link is provided here for quick access: https://github.com/sdfysdfhsdfhs/Chart-To-Image/releases
• Badge link at the top of this README provides a visual cue to the release page, making it easy to spot updates.

Credits and references

• The rendering approach relies on a simple, modular design. The idea is to keep drawing logic separate from data handling and theming.
• The project favors readability and ease of use, so most configuration can be expressed in JSON-like structures or plain JavaScript objects.

Community and collaboration

• If you want to contribute, start with an issue to discuss the change and then open a pull request with a focused, well-tested patch.
• Share sample data sets and example configurations to help others learn how to achieve common visuals quickly.

Final words

• Chart-To-Image offers a straightforward path from data to image. It aims to be dependable, fast, and adaptable to a wide range of trading visualization needs.
• With support for multiple symbols, grid layouts, a set of technical indicators, and flexible theming, you can build polished visuals for reports, dashboards, and research papers.

Downloads and release access (repeat)

• For quick access to the latest build and assets, visit the releases page here: https://github.com/sdfysdfhsdfhs/Chart-To-Image/releases. This link is also shown as a badge at the top for convenience. If you need the binaries, this is the place to get them. The page lists what you can download and how to install or run the assets on your machine. Use the assets to install or run the CLI or runtime components as needed.