Modern Javascript Lib of interactive Chart with ticks ( TradingView like ).
Provides a set of classe such Chart & Fectcher, so they can be used in vanilla JS, TS project or Vuejs or else,
by providing a dom NodeElement at Chart instanciation.
You can check out the demo here: https://dmidz.github.io/tickschart/
- Efficient horizontally scrollable chart drawn with HTML Canvas
- Resizable scales to zoom in / out
- Crosshair displaying current ticks infos
- Indicators system easy to expand
- decoupled data Fetcher helper to easily connect to an API
- many more to come :)
This repo is based on Vite, a wonderful environment for smooth JS dev, just clone this current derived repo and run:
npm install
npm run dev
You should be able to browse the provided local address such http://localhost:5173/ and watch the Chart ( vuejs version ) in action.
The data comes from a unique file of real past 1000 BTC H4 ticks used in loop for the dev ( this is why you will see gap at joins ) but it is very easy to plug it to a real API.
Check and copy this example demo/vanilla-js.
//__ main.js
import { Chart, Fetcher, defaultTick, intervalsMs } from 'https://cdn.jsdelivr.net/npm/@dmidz/[email protected]/+esm';
//...
// ! adapt this path to your public sample path or API url
const ticksURL = `https://dmidz.github.io/tickschart/data/ticks_BTC_4h/${ sampleTimeStart }-${ ticksPerLoad }.json`;
//...
const fetcher = new Fetcher( defaultTick, fetchAPI, options );
const chart = new Chart( parentElement, tickStep, getTick, options );
// add a Volume indicator in 'row' mode ( stacked under main chart )
chart.addIndicator( 'Volume', 'row', { maProperty: 'vol', maLength: 14, maType: 'sma' } );
// add an MA indicators in 'layer' mode ( on chart )
chart.addIndicator( 'MA', 'layer', { property: 'close', length: 200, type: 'sma', style: { color: '#ff0000' } } );
// finally init display at the time you wish, originRatio is the displacement of time wanted along the screen width
// ex: time now + .75 will scroll to place now time at 3/4 screen width from left
// ex: time now + 0 will scroll to place now time at screen left
chart.setX( Date.now(), { xOriginRatio } );Serve your public directory or run:
npm run dev
Navigate to http://localhost:5173/demo/vanilla-js/index.html
Install package
npm install @dmidz/tickschart
Check and copy this example demo/vanilla-ts.
//__ main.ts
import { Chart, Fetcher, defaultTick, intervalsMs } from '@dmidz/tickschart';
// ...
// ! adapt this path to your public sample path or API url
const ticksURL = `https://dmidz.github.io/tickschart/data/ticks_BTC_4h/${ sampleTimeStart }-${ ticksPerLoad }.json`;
// ...Compile ts file & serve the html page, you should see a chart with BTC H4 ticks. Or run:
npm run dev
and navigate to http://localhost:5173/demo/vanilla-ts/index.html
Once running correctly, you can start customizing, for ex the fetch so it binds to your ticks API.
// TODO: provide demo/node-api example with Binance public market ticks API for ex