Candl NPM | npm.io

What is Candl ?

Candl is a chart library that makes it easy to set up fully customizable candlestick charts.

💪 Plug N Play.
🛠️ Fully customizable.
⚡ Multi-Layers 2D Canvas for better performance.
🖱️ Mouse & Touch* interaction built-in.
🎲 Mock data generators built-in.
🕒 Underlying Day.js for date handling.

(*) not available yet

Get Started

Installation

npm i candl --save

Documentation

Full Example with Mock Data

Very basic example of a seeded chart in React with TypeScript.

import { useEffect, useRef } from "react";
import {
  Candl,
  CandlMock,
  CandlSerie,
  CandlTimeFrame,
  get1MBaseViews,
} from "candl";

const CandlWrapper: React.FC = () => {
  // Reference to the container of the chart
  const containerRef = useRef<HTMLDivElement | null>(null);

  // Reference to the chart
  const candlRef = useRef<Candl | null>(null);

  useEffect(() => {
    if (containerRef.current) {
      // Create the chart
      candlRef.current = new Candl(containerRef.current);

      // Create a serie for 1M TimeFrame
      const mySerie: CandlSerie = new CandlSerie(CandlTimeFrame.Time1Minute);

      // Add mocked data with 10 000 candles
      mySerie.setData(
        CandlMock.generateMockData(CandlTimeFrame.Time1Minute, 10000)
      );

      // Add default 1M base views to the serie
      mySerie.setViews(get1MBaseViews());

      // Add serie to Candl
      candlRef.current.addSerie(CandlTimeFrame.Time1Minute, mySerie);

      // Jump to the end of the chart
      candlRef.current.setOffset({
        x: candlRef.current.getLastCandleOffset(),
        y: candlRef.current.getOffset().y,
      });

      // Force update of the chart
      candlRef.current.forceUpdate();
    }

    return () => {
      // Don't forget to clean the chart
      if (candlRef.current != null) {
        candlRef.current.clean();
      }
    };
  }, []);

  return (
    <div
      style={{
        position: "relative",
        width: "100%",
        height: "100%",
      }}
      ref={containerRef}
    />
  );
};
export default CandlWrapper;