A small library of four market charts that draw on canvas and need nothing else to run. Each chart sits in its own folder with its own README and import path, and all four share one canvas surface, one render loop and one set of CSS variables for colour.
Install
- Clone
git clone https://github.com/drkxbt/charts- Install
npm install github:drkxbt/charts- Use
import { CandleChart } from "charts"
Features
- CandleChart: candles, volume, a crosshair, zoom and pan
- LineChart: a price line with a scrub hairline and morphing ranges
- DepthChart: order book depth with running totals
- Heatmap: a market treemap you can zoom into by sector
- Keyboard controls, CSS variable themes and reduced motion on all four
How it works
- Each chart owns a canvas sized to the screen's pixel ratio and repaints only while something on it is moving.
- Colours come from --chart-* CSS variables read on every paint, so a theme switch needs one redraw().
- The candle chart eases its view toward a target, so zooming, panning and the glide after a drag all move the same way.
- The line resamples the old and new shapes to the same length and blends them, which is how a range change morphs.
- The heatmap lays tiles out as a squarified treemap and glides them between layouts when you zoom into a sector.
Screenshots
CandleChartCandles, volume and zoom 
LineChartA price line you scrub across 
DepthChartOrder book depth with totals 
HeatmapMarket map with sector zoom
Stack
- TypeScript
- Canvas 2D
- CSS custom properties
- Node test runner
Run it locally
git clone https://github.com/drkxbt/chartscd chartsnpm installnpm run demo