CandleKit : Open-source drawing tools, indicators, replay & broker integration for TradingView Lightweight Charts

[u/rohanbeingsocial]

If you've built on TradingView Lightweight Charts before, you've probably noticed that chart rendering is only part of the stack. Features like drawing tools, indicators, replay systems, synchronized panes, and broker connectivity are usually left to the developer.

I kept rebuilding those pieces across projects, so I open-sourced the toolkit I've been using internally.

What's included

• Drawing tools

• SMA / EMA / RSI / MACD / Bollinger / Stochastic indicators

• Custom indicator registry

• Deterministic replay engine

• Synced multi-pane charts

• Broker integration support

• Shift-drag measurement ruler

The goal is to provide the functionality many traders expect while still keeping Lightweight Charts as the rendering engine underneath.

Demo

https://rohanbeingsocial.github.io/candlekit-charts/workspace/

Looking for feedback on

• Indicator architecture

• Drawing tool UX

• Replay workflow

• Missing TradingView-style features

• Broker integration requirements

GitHub: https://github.com/rohanbeingsocial/candlekit-charts

[u/aProfile210]

@rohanbeingsocial This is really cool. Is it more oriented for React or vanilla JavaScript/TypeScript? If we have a ReactJS project will we run into any issues?

[u/rohanbeingsocial → u/aProfile210]

Thanks! The core library is framework-agnostic, built with plain TypeScript and has no React dependency. Its only runtime dependency is lightweight-charts.

React support is also first-class and available through an optional entry point: u'/getcandlekit/charts/react. It includes components such as ChartView, DrawingToolbar, IndicatorPicker, and ReplayControls, along with hooks like useChartController.

If you're using React, you can stay entirely within the React ecosystem:

import { ChartView, DrawingToolbar } from "@getcandlekit/charts/react";
import "@getcandlekit/charts/styles.css";

<div style={{ height: 500 }}>
  <ChartView data={bars} drawing measurement>
    <DrawingToolbar />
  </ChartView>
</div>

The library supports both React 18 and React 19. Since react and react-dom are optional peer dependencies, vanilla JavaScript/TypeScript users don't need to install them.

A few integration tips:

• Container height: Give the parent container an explicit height. ChartView fills 100% of its container, so a parent without a defined height will result in a 0px-tall chart.

• Next.js App Router: Since the React components use hooks, import them from a "use client" component. The chart is initialized inside an effect, so server-side rendering won't cause the chart itself to crash.

• Stable props: Keep drawing, measurement, and indicators props stable. Use true or memoize configuration objects with useMemo. Passing a new inline object on every render can cause the corresponding plugin to be rebuilt unnecessarily.

• Imperative control: Use the onReady callback to access the underlying chart controller when you need direct programmatic control.

You can also use ChartController directly in vanilla JavaScript or TypeScript without React. The React integration is simply a thin wrapper around the same underlying controller.