https://github.com/dsnchz/solid-lightweight-charts
TradingView Lightweight Charts™ as SolidJS components
https://github.com/dsnchz/solid-lightweight-charts
canvas canvas-chart canvas-chart-library charting-library charts data-visualization financial-analysis solidjs trading visualization
Last synced: 8 days ago
JSON representation
TradingView Lightweight Charts™ as SolidJS components
- Host: GitHub
- URL: https://github.com/dsnchz/solid-lightweight-charts
- Owner: dsnchz
- License: mit
- Created: 2025-05-12T06:24:47.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-06-13T13:29:43.000Z (4 months ago)
- Last Synced: 2025-09-08T21:27:59.591Z (about 1 month ago)
- Topics: canvas, canvas-chart, canvas-chart-library, charting-library, charts, data-visualization, financial-analysis, solidjs, trading, visualization
- Language: TypeScript
- Homepage:
- Size: 871 KB
- Stars: 9
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# @dschz/solid-lightweight-charts
[](LICENSE)
[](https://github.com/tradingview/lightweight-charts)
[](https://www.npmjs.com/package/@dschz/solid-lightweight-charts)
[](https://bundlephobia.com/package/@dschz/solid-lightweight-charts)
[](https://jsr.io/@dschz/solid-lightweight-charts)
[](https://github.com/dsnchz/solid-lightweight-charts/actions/workflows/ci.yaml)
[](https://discord.gg/jV4MghpHUA)
> A fully typed SolidJS wrapper around TradingView's [Lightweight Charts](https://github.com/tradingview/lightweight-charts), providing declarative, reactive charting with support for time series, price, and yield curve data.
## 📋 Table of Contents
- [✨ Features](#-features)
- [🎉 What's New in v0.3.0](#-whats-new-in-v030)
- [📆 Installation](#-installation)
- [🚀 Quick Usage](#-quick-usage)
- [TimeChart (Time-based Data)](#timechart-time-based-data)
- [PriceChart (Numeric X-axis)](#pricechart-numeric-x-axis)
- [YieldCurveChart (Duration-based)](#yieldcurvechart-duration-based)
- [📏 Chart Sizing & Layout](#-chart-sizing--layout)
- [Understanding the Component Structure](#understanding-the-component-structure)
- [How to Size Your Charts](#how-to-size-your-charts)
- [Understanding autoSize](#understanding-autosize)
- [Container Class](#container-class)
- [Common Patterns](#common-patterns)
- [📊 Chart Examples](#chart-examples)
- [Multiple Panes and Markers](#multiple-panes-and-markers)
- [Custom Series](#custom-series)
- [Series Primitives](#series-primitives)
- [Pane Primitives](#pane-primitives)
- [🛠 Playground & Examples](#-playground--examples)
- [📚 Resources](#-resources)
- [📄 License](#-license)
## ✨ Features
- ⚡ **SolidJS-native reactivity** for all chart options and data updates
- 🔀 **Multiple chart types** with specialized APIs:
- `TimeChart` for time-based financial data
- `PriceChart` for numeric-based price data
- `YieldCurveChart` for rate curves and duration-based data
- 📈 **Built-in series support**: Line, Area, Candlestick, Bar, Histogram, Baseline
- 🎨 **Custom series support** with full TypeScript integration across all chart types
- 📍 **Series markers** with declarative prop support and reactive updates
- 📆 **Namespaced APIs** (e.g. ``, ``)
- 📊 **Multi-Pane support** for advanced multi-series visualization
- 🖼️ **Pane/Series primitives** for interactive drawings (trend lines, alerts, annotations)
- 🔄 **Lifecycle/Event hooks** for chart, series data, primitives and markers.
- 🔖 **Core API compatibility** - access underlying `lightweight-charts` APIs when needed
- 🧹 **Automatic cleanup** and proper lifecycle management
## 🎉 What's New in v0.3.0
- Major new features and improvements, including chart event subscription support, default class on chart containers, and improved sizing behavior.
- For a full list of changes and details, see the [CHANGELOG.md](./CHANGELOG.md).
## 📆 Installation
Install via your favorite package manager:
```bash
npm install solid-js lightweight-charts @dschz/solid-lightweight-charts
pnpm install solid-js lightweight-charts @dschz/solid-lightweight-charts
yarn install solid-js lightweight-charts @dschz/solid-lightweight-charts
bun install solid-js lightweight-charts @dschz/solid-lightweight-charts
```
> These are **peer dependencies**, so they must be installed manually:
>
> - `solid-js`
> - `lightweight-charts`
## 🚀 Quick Usage
### TimeChart (Time-based Data)
```tsx
import { TimeChart } from "@dschz/solid-lightweight-charts";
;
```
### PriceChart (Numeric X-axis)
```tsx
import { PriceChart } from "@dschz/solid-lightweight-charts";
;
```
### YieldCurveChart (Duration-based)
```tsx
import { YieldCurveChart } from "@dschz/solid-lightweight-charts";
;
```
## 📏 Chart Sizing & Layout
Chart components (`TimeChart`, `PriceChart`, `YieldCurveChart`) **do not apply any default sizing styles**. You have complete control over how your charts are sized.
### Understanding the Component Structure
It's important to understand that chart components have **two levels of configuration**:
```tsx
```
**Container Level** (`class`, `style`, `id`):
- Controls the HTML div that wraps the chart
- Handles sizing, positioning, borders, backgrounds, etc.
- Uses standard CSS/HTML attributes
**Chart Level** (`autoSize`, `width`, `height`, chart options):
- Passed directly to the underlying Lightweight Charts instance
- Controls chart-specific behavior and rendering
- Uses Lightweight Charts API
### How to Size Your Charts
**Option 1: CSS Classes (Recommended)**
```tsx
```
**Option 2: Inline Styles**
```tsx
```
**Option 3: Fixed Dimensions (autoSize=false)**
```tsx
```
### Understanding autoSize
- **`autoSize: true` (default)**: Chart fills its container div. The `width` and `height` props are ignored.
- **`autoSize: false`**: Chart uses explicit `width` and `height` props for fixed dimensions.
**Key Point**: When `autoSize={true}`, the chart will automatically resize to match whatever size you've given the container div via `class` or `style`.
### Container Class
All chart containers include the `solid-lwc-container` class for easy global styling:
```css
.solid-lwc-container {
height: 400px;
width: 100%;
}
```
### Common Patterns
**Responsive with Tailwind:**
```tsx
```
**Fixed size for specific use cases:**
```tsx
```
**Parent container sizing:**
```tsx
```
**Container styling + chart options:**
```tsx
```
> **Important**: Charts need explicit dimensions to render. If you see a blank chart, make sure you've provided sizing through CSS classes, inline styles, or fixed dimensions.
## 📊 Chart Examples
### Multiple Panes and Markers
```tsx
import { TimeChart } from "@dschz/solid-lightweight-charts";
{/* Main pane with price data and declarative markers */}
[
{
time: data[10].time,
position: "aboveBar",
color: "#f68410",
shape: "circle",
text: "Buy",
},
{
time: data[20].time,
position: "belowBar",
color: "#e91e63",
shape: "arrowDown",
text: "Sell",
},
]}
onSetMarkers={(markers) => console.log("Markers updated:", markers)}
/>
{/* Secondary pane with volume */}
;
```
### Custom Series
```tsx
import { TimeChart } from "@dschz/solid-lightweight-charts";
// Define your custom pane view
const customPaneView = {
updateAllViews() {
/* implementation */
},
paneViews() {
/* implementation */
},
priceValueBuilder(plotRow) {
/* implementation */
},
isWhitespace(data) {
/* implementation */
},
defaultOptions() {
/* implementation */
},
};
console.log("Custom series created:", series)}
/>
;
```
### Series Primitives
```tsx
import { TimeChart, type SeriesPrimitive } from "@dschz/solid-lightweight-charts";
import type {
ISeriesPrimitiveAxisView,
IPrimitivePaneView,
IPrimitivePaneRenderer,
Time,
SeriesAttachedParameter,
} from "lightweight-charts";
// Trend line primitive with proper TypeScript implementation
class TrendLinePrimitive implements SeriesPrimitive<"Line", Time> {
private _paneViews: TrendLinePaneView[];
private _point1: { time: Time; value: number };
private _point2: { time: Time; value: number };
constructor(point1: { time: Time; value: number }, point2: { time: Time; value: number }) {
this._point1 = point1;
this._point2 = point2;
this._paneViews = [new TrendLinePaneView(this)];
}
updateAllViews() {
this._paneViews.forEach((pv) => pv.update());
}
paneViews() {
return this._paneViews;
}
attached(param: SeriesAttachedParameter
detached() {
// Cleanup when primitive is detached
}
getPoint1() {
return this._point1;
}
getPoint2() {
return this._point2;
}
}
class TrendLinePaneView implements IPrimitivePaneView {
private _source: TrendLinePrimitive;
private _renderer: TrendLinePaneRenderer;
constructor(source: TrendLinePrimitive) {
this._source = source;
this._renderer = new TrendLinePaneRenderer();
}
update() {
this._renderer.setData({
point1: this._source.getPoint1(),
point2: this._source.getPoint2(),
});
}
renderer() {
return this._renderer;
}
zOrder() {
return "normal" as const;
}
}
class TrendLinePaneRenderer implements IPrimitivePaneRenderer {
private _data: { point1: any; point2: any } | null = null;
setData(data: { point1: any; point2: any } | null) {
this._data = data;
}
draw(target: any) {
if (!this._data) return;
// Canvas 2D rendering implementation
target.useBitmapCoordinateSpace((scope: any) => {
const ctx = scope.context;
// Draw trend line using this._data.point1 and this._data.point2
// ... drawing logic
});
}
}
const trendLine = new TrendLinePrimitive(
{ time: "2023-01-01" as Time, value: 100 },
{ time: "2023-01-10" as Time, value: 120 },
);
console.log("Primitives attached:", primitives)}
/>
;
```
### Pane Primitives
```tsx
import { TimeChart, type PanePrimitive } from "@dschz/solid-lightweight-charts";
import type {
IPanePrimitivePaneView,
IPrimitivePaneRenderer,
PaneAttachedParameter,
Time,
} from "lightweight-charts";
// Watermark primitive with proper TypeScript implementation
class WatermarkPrimitive implements PanePrimitive
constructor(text: string, color = "rgba(128, 128, 128, 0.3)", fontSize = 48) {
this._text = text;
this._color = color;
this._fontSize = fontSize;
this._paneViews = [new WatermarkPaneView(this)];
}
updateAllViews() {
this._paneViews.forEach((pv) => pv.update());
}
paneViews() {
return this._paneViews;
}
attached(param: PaneAttachedParameter
detached() {
// Cleanup if needed
}
getText() {
return this._text;
}
getColor() {
return this._color;
}
getFontSize() {
return this._fontSize;
}
}
class WatermarkPaneView implements IPanePrimitivePaneView {
private _source: WatermarkPrimitive;
private _renderer: WatermarkPaneRenderer;
constructor(source: WatermarkPrimitive) {
this._source = source;
this._renderer = new WatermarkPaneRenderer();
}
update() {
this._renderer.setData({
text: this._source.getText(),
color: this._source.getColor(),
fontSize: this._source.getFontSize(),
});
}
renderer() {
return this._renderer;
}
zOrder() {
return "bottom" as const;
}
}
class WatermarkPaneRenderer implements IPrimitivePaneRenderer {
private _data: { text: string; color: string; fontSize: number } | null = null;
setData(data: { text: string; color: string; fontSize: number } | null) {
this._data = data;
}
draw(target: any) {
if (!this._data) return;
target.useBitmapCoordinateSpace((scope: any) => {
const ctx = scope.context;
const { width, height } = scope.bitmapSize;
ctx.save();
ctx.font = `${this._data!.fontSize}px Arial`;
ctx.fillStyle = this._data!.color;
ctx.textAlign = "center";
ctx.textBaseline = "middle";
// Draw watermark in center of pane
ctx.fillText(this._data!.text, width / 2, height / 2);
ctx.restore();
});
}
}
const watermark = new WatermarkPrimitive("DEMO CHART");
console.log("Pane primitives attached")}
>
;
```
> **💡 Complete Examples**: For fully working primitive implementations with comprehensive TypeScript types, see the interactive examples in our playground:
>
> - [`SeriesPrimitivesExample.tsx`](./playground/pages/SeriesPrimitivesExample.tsx) - Trend lines, support/resistance, price alerts, annotations
> - [`PanePrimitivesExample.tsx`](./playground/pages/PanePrimitivesExample.tsx) - Watermarks, grid overlays, corner badges
## 🛠 Playground & Examples
See [`playground/App.tsx`](./playground/App.tsx) for a complete working showcase with live interactive examples:
**Core Chart Types:**
- TimeChart with multiple panes (Candlestick+Line, Volume, Area) and series markers
- PriceChart with multiple panes (Line+Area, Histogram) and series markers
- YieldCurveChart with multiple panes (Line, Area) and series markers
**Advanced Features (New in v0.2.0):**
- **Series Primitives Example** - Interactive trend lines, support/resistance levels, price alerts, and text annotations
- **Pane Primitives Example** - Watermarks, custom grid overlays, and corner badges with live updates
- **Custom Series Integration** - Complete examples with proper TypeScript interfaces
- **Dynamic Management** - Real-time updates, lifecycle management, and memory optimization
Run the playground locally:
```bash
git clone https://github.com/dsnchz/solid-lightweight-charts
cd solid-lightweight-charts
bun install
bun start
```
## 📚 Resources
- [TradingView Lightweight Charts Docs](https://tradingview.github.io/lightweight-charts/)
- [Lightweight Charts GitHub](https://github.com/tradingview/lightweight-charts)
- [Discord](https://discord.gg/jV4MghpHUA)
> Full documentation and advanced guides coming soon.
## 📄 License
MIT © [Daniel Sanchez](https://github.com/dsnchz)