candl
v0.6.0
Published
Your Simple Candlestick Chart Lib
Downloads
138
Maintainers
Readme
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;
Code Quality
No coverage yet.
Before 1.0.0, unit tests will be a posteriori.
After it, unit tests will be a priori (TDD).