{"id":31940337,"url":"https://github.com/dsnchz/solid-lightweight-charts","last_synced_at":"2025-10-14T08:53:31.361Z","repository":{"id":292796267,"uuid":"981943377","full_name":"dsnchz/solid-lightweight-charts","owner":"dsnchz","description":"TradingView Lightweight Charts™ as SolidJS components","archived":false,"fork":false,"pushed_at":"2025-06-13T13:29:43.000Z","size":892,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-08T21:27:59.591Z","etag":null,"topics":["canvas","canvas-chart","canvas-chart-library","charting-library","charts","data-visualization","financial-analysis","solidjs","trading","visualization"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dsnchz.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-12T06:24:47.000Z","updated_at":"2025-07-23T18:45:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"6eac39fc-a5c4-40c3-b96f-c4306e0eb7d3","html_url":"https://github.com/dsnchz/solid-lightweight-charts","commit_stats":null,"previous_names":["dsnchz/solid-lightweight-charts"],"tags_count":3,"template":false,"template_full_name":"thedanchez/template-solidjs-library","purl":"pkg:github/dsnchz/solid-lightweight-charts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsnchz%2Fsolid-lightweight-charts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsnchz%2Fsolid-lightweight-charts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsnchz%2Fsolid-lightweight-charts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsnchz%2Fsolid-lightweight-charts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dsnchz","download_url":"https://codeload.github.com/dsnchz/solid-lightweight-charts/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsnchz%2Fsolid-lightweight-charts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279018312,"owners_count":26086348,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","canvas-chart","canvas-chart-library","charting-library","charts","data-visualization","financial-analysis","solidjs","trading","visualization"],"created_at":"2025-10-14T08:52:58.182Z","updated_at":"2025-10-14T08:53:31.355Z","avatar_url":"https://github.com/dsnchz.png","language":"TypeScript","readme":"\u003cp\u003e\n  \u003cimg width=\"100%\" src=\"https://assets.solidjs.com/banner?type=Ecosystem\u0026background=tiles\u0026project=solid-lightweight-charts\" alt=\"solid-lightweight-charts\"\u003e\n\u003c/p\u003e\n\n# @dschz/solid-lightweight-charts\n\n[![License](https://img.shields.io/badge/license-MIT-green)](LICENSE)\n[![Lightweight Charts](https://img.shields.io/badge/lightweight--charts-5.0.0+-orange?style=flat-square)](https://github.com/tradingview/lightweight-charts)\n[![npm](https://img.shields.io/npm/v/@dschz/solid-lightweight-charts?color=blue)](https://www.npmjs.com/package/@dschz/solid-lightweight-charts)\n[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@dschz/solid-lightweight-charts)](https://bundlephobia.com/package/@dschz/solid-lightweight-charts)\n[![JSR](https://jsr.io/badges/@dschz/solid-lightweight-charts/score)](https://jsr.io/@dschz/solid-lightweight-charts)\n[![CI](https://github.com/dsnchz/solid-lightweight-charts/actions/workflows/ci.yaml/badge.svg)](https://github.com/dsnchz/solid-lightweight-charts/actions/workflows/ci.yaml)\n[![Discord](https://img.shields.io/badge/Discord-%235865F2.svg?logo=discord\u0026logoColor=white)](https://discord.gg/jV4MghpHUA)\n\n\u003e 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.\n\n![Solid Lightweight Charts Showcase](assets/solid-lightweight-charts-showcase.png)\n\n## 📋 Table of Contents\n\n- [✨ Features](#-features)\n- [🎉 What's New in v0.3.0](#-whats-new-in-v030)\n- [📆 Installation](#-installation)\n- [🚀 Quick Usage](#-quick-usage)\n  - [TimeChart (Time-based Data)](#timechart-time-based-data)\n  - [PriceChart (Numeric X-axis)](#pricechart-numeric-x-axis)\n  - [YieldCurveChart (Duration-based)](#yieldcurvechart-duration-based)\n- [📏 Chart Sizing \u0026 Layout](#-chart-sizing--layout)\n  - [Understanding the Component Structure](#understanding-the-component-structure)\n  - [How to Size Your Charts](#how-to-size-your-charts)\n  - [Understanding autoSize](#understanding-autosize)\n  - [Container Class](#container-class)\n  - [Common Patterns](#common-patterns)\n- [📊 Chart Examples](#chart-examples)\n  - [Multiple Panes and Markers](#multiple-panes-and-markers)\n  - [Custom Series](#custom-series)\n  - [Series Primitives](#series-primitives)\n  - [Pane Primitives](#pane-primitives)\n- [🛠 Playground \u0026 Examples](#-playground--examples)\n- [📚 Resources](#-resources)\n- [📄 License](#-license)\n\n## ✨ Features\n\n- ⚡ **SolidJS-native reactivity** for all chart options and data updates\n- 🔀 **Multiple chart types** with specialized APIs:\n  - `TimeChart` for time-based financial data\n  - `PriceChart` for numeric-based price data\n  - `YieldCurveChart` for rate curves and duration-based data\n- 📈 **Built-in series support**: Line, Area, Candlestick, Bar, Histogram, Baseline\n- 🎨 **Custom series support** with full TypeScript integration across all chart types\n- 📍 **Series markers** with declarative prop support and reactive updates\n- 📆 **Namespaced APIs** (e.g. `\u003cTimeChart.Series /\u003e`, `\u003cPriceChart.Series /\u003e`)\n- 📊 **Multi-Pane support** for advanced multi-series visualization\n- 🖼️ **Pane/Series primitives** for interactive drawings (trend lines, alerts, annotations)\n- 🔄 **Lifecycle/Event hooks** for chart, series data, primitives and markers.\n- 🔖 **Core API compatibility** - access underlying `lightweight-charts` APIs when needed\n- 🧹 **Automatic cleanup** and proper lifecycle management\n\n## 🎉 What's New in v0.3.0\n\n- Major new features and improvements, including chart event subscription support, default class on chart containers, and improved sizing behavior.\n- For a full list of changes and details, see the [CHANGELOG.md](./CHANGELOG.md).\n\n## 📆 Installation\n\nInstall via your favorite package manager:\n\n```bash\nnpm install solid-js lightweight-charts @dschz/solid-lightweight-charts\npnpm install solid-js lightweight-charts @dschz/solid-lightweight-charts\nyarn install solid-js lightweight-charts @dschz/solid-lightweight-charts\nbun install solid-js lightweight-charts @dschz/solid-lightweight-charts\n```\n\n\u003e These are **peer dependencies**, so they must be installed manually:\n\u003e\n\u003e - `solid-js`\n\u003e - `lightweight-charts`\n\n## 🚀 Quick Usage\n\n### TimeChart (Time-based Data)\n\n```tsx\nimport { TimeChart } from \"@dschz/solid-lightweight-charts\";\n\n\u003cTimeChart\u003e\n  \u003cTimeChart.Series\n    type=\"Line\"\n    data={[\n      { time: \"2023-01-01\", value: 100 },\n      { time: \"2023-01-02\", value: 105 },\n    ]}\n    lineWidth={2}\n    color=\"#2962FF\"\n  /\u003e\n\u003c/TimeChart\u003e;\n```\n\n### PriceChart (Numeric X-axis)\n\n```tsx\nimport { PriceChart } from \"@dschz/solid-lightweight-charts\";\n\n\u003cPriceChart\u003e\n  \u003cPriceChart.Series\n    type=\"Line\"\n    data={[\n      { time: 0, value: 100 },\n      { time: 1, value: 105 },\n    ]}\n    lineWidth={2}\n    color=\"#2962FF\"\n  /\u003e\n\u003c/PriceChart\u003e;\n```\n\n### YieldCurveChart (Duration-based)\n\n```tsx\nimport { YieldCurveChart } from \"@dschz/solid-lightweight-charts\";\n\n\u003cYieldCurveChart\u003e\n  \u003cYieldCurveChart.Series\n    type=\"Line\"\n    data={[\n      { time: 0, value: 3.5 }, // 0M\n      { time: 12, value: 3.8 }, // 12M\n      { time: 60, value: 4.2 }, // 5Y\n    ]}\n    lineWidth={2}\n    color=\"#2962FF\"\n  /\u003e\n\u003c/YieldCurveChart\u003e;\n```\n\n## 📏 Chart Sizing \u0026 Layout\n\nChart components (`TimeChart`, `PriceChart`, `YieldCurveChart`) **do not apply any default sizing styles**. You have complete control over how your charts are sized.\n\n### Understanding the Component Structure\n\nIt's important to understand that chart components have **two levels of configuration**:\n\n```tsx\n\u003cTimeChart\n  class=\"h-[400px] w-full\" // Applied to container div\n  style={{ border: \"1px solid red\" }} // Applied to container div\n  autoSize={true} // Passed to Lightweight Charts\n  width={800} // Passed to Lightweight Charts (ignored if autoSize=true)\n  height={400} // Passed to Lightweight Charts (ignored if autoSize=true)\n\u003e\n  \u003cTimeChart.Series type=\"Line\" data={data} /\u003e\n\u003c/TimeChart\u003e\n```\n\n**Container Level** (`class`, `style`, `id`):\n\n- Controls the HTML div that wraps the chart\n- Handles sizing, positioning, borders, backgrounds, etc.\n- Uses standard CSS/HTML attributes\n\n**Chart Level** (`autoSize`, `width`, `height`, chart options):\n\n- Passed directly to the underlying Lightweight Charts instance\n- Controls chart-specific behavior and rendering\n- Uses Lightweight Charts API\n\n### How to Size Your Charts\n\n**Option 1: CSS Classes (Recommended)**\n\n```tsx\n\u003cTimeChart class=\"h-[400px] w-full\"\u003e\n  \u003cTimeChart.Series type=\"Line\" data={data} /\u003e\n\u003c/TimeChart\u003e\n```\n\n**Option 2: Inline Styles**\n\n```tsx\n\u003cTimeChart style={{ height: \"400px\", width: \"100%\" }}\u003e\n  \u003cTimeChart.Series type=\"Line\" data={data} /\u003e\n\u003c/TimeChart\u003e\n```\n\n**Option 3: Fixed Dimensions (autoSize=false)**\n\n```tsx\n\u003cTimeChart autoSize={false} width={800} height={400}\u003e\n  \u003cTimeChart.Series type=\"Line\" data={data} /\u003e\n\u003c/TimeChart\u003e\n```\n\n### Understanding autoSize\n\n- **`autoSize: true` (default)**: Chart fills its container div. The `width` and `height` props are ignored.\n- **`autoSize: false`**: Chart uses explicit `width` and `height` props for fixed dimensions.\n\n**Key Point**: When `autoSize={true}`, the chart will automatically resize to match whatever size you've given the container div via `class` or `style`.\n\n### Container Class\n\nAll chart containers include the `solid-lwc-container` class for easy global styling:\n\n```css\n.solid-lwc-container {\n  height: 400px;\n  width: 100%;\n}\n```\n\n### Common Patterns\n\n**Responsive with Tailwind:**\n\n```tsx\n\u003cTimeChart class=\"h-[400px] w-full md:h-[500px]\"\u003e\n  \u003cTimeChart.Series type=\"Line\" data={data} /\u003e\n\u003c/TimeChart\u003e\n```\n\n**Fixed size for specific use cases:**\n\n```tsx\n\u003cTimeChart autoSize={false} width={600} height={300}\u003e\n  \u003cTimeChart.Series type=\"Line\" data={data} /\u003e\n\u003c/TimeChart\u003e\n```\n\n**Parent container sizing:**\n\n```tsx\n\u003cdiv class=\"h-[400px] w-full\"\u003e\n  \u003cTimeChart style={{ height: \"100%\", width: \"100%\" }}\u003e\n    \u003cTimeChart.Series type=\"Line\" data={data} /\u003e\n  \u003c/TimeChart\u003e\n\u003c/div\u003e\n```\n\n**Container styling + chart options:**\n\n```tsx\n\u003cTimeChart\n  class=\"h-[500px] w-full border rounded-lg shadow\"\n  rightPriceScale={{ visible: true }}\n  timeScale={{ timeVisible: true }}\n\u003e\n  \u003cTimeChart.Series type=\"Line\" data={data} /\u003e\n\u003c/TimeChart\u003e\n```\n\n\u003e **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.\n\n## 📊 Chart Examples\n\n### Multiple Panes and Markers\n\n```tsx\nimport { TimeChart } from \"@dschz/solid-lightweight-charts\";\n\n\u003cTimeChart\u003e\n  {/* Main pane with price data and declarative markers */}\n  \u003cTimeChart.Series\n    type=\"Candlestick\"\n    data={candleData}\n    markers={(data) =\u003e [\n      {\n        time: data[10].time,\n        position: \"aboveBar\",\n        color: \"#f68410\",\n        shape: \"circle\",\n        text: \"Buy\",\n      },\n      {\n        time: data[20].time,\n        position: \"belowBar\",\n        color: \"#e91e63\",\n        shape: \"arrowDown\",\n        text: \"Sell\",\n      },\n    ]}\n    onSetMarkers={(markers) =\u003e console.log(\"Markers updated:\", markers)}\n  /\u003e\n\n  {/* Secondary pane with volume */}\n  \u003cTimeChart.Pane\u003e\n    \u003cTimeChart.Series\n      type=\"Histogram\"\n      data={volumeData}\n      priceScaleId=\"volume\"\n      color=\"rgba(76, 175, 80, 0.8)\"\n    /\u003e\n  \u003c/TimeChart.Pane\u003e\n\u003c/TimeChart\u003e;\n```\n\n### Custom Series\n\n```tsx\nimport { TimeChart } from \"@dschz/solid-lightweight-charts\";\n\n// Define your custom pane view\nconst customPaneView = {\n  updateAllViews() {\n    /* implementation */\n  },\n  paneViews() {\n    /* implementation */\n  },\n  priceValueBuilder(plotRow) {\n    /* implementation */\n  },\n  isWhitespace(data) {\n    /* implementation */\n  },\n  defaultOptions() {\n    /* implementation */\n  },\n};\n\n\u003cTimeChart\u003e\n  \u003cTimeChart.CustomSeries\n    paneView={customPaneView}\n    data={customData}\n    onCreateSeries={(series) =\u003e console.log(\"Custom series created:\", series)}\n  /\u003e\n\u003c/TimeChart\u003e;\n```\n\n### Series Primitives\n\n```tsx\nimport { TimeChart, type SeriesPrimitive } from \"@dschz/solid-lightweight-charts\";\nimport type {\n  ISeriesPrimitiveAxisView,\n  IPrimitivePaneView,\n  IPrimitivePaneRenderer,\n  Time,\n  SeriesAttachedParameter,\n} from \"lightweight-charts\";\n\n// Trend line primitive with proper TypeScript implementation\nclass TrendLinePrimitive implements SeriesPrimitive\u003c\"Line\", Time\u003e {\n  private _paneViews: TrendLinePaneView[];\n  private _point1: { time: Time; value: number };\n  private _point2: { time: Time; value: number };\n\n  constructor(point1: { time: Time; value: number }, point2: { time: Time; value: number }) {\n    this._point1 = point1;\n    this._point2 = point2;\n    this._paneViews = [new TrendLinePaneView(this)];\n  }\n\n  updateAllViews() {\n    this._paneViews.forEach((pv) =\u003e pv.update());\n  }\n\n  paneViews() {\n    return this._paneViews;\n  }\n\n  attached(param: SeriesAttachedParameter\u003cTime, \"Line\"\u003e) {\n    // Implementation for when primitive is attached\n  }\n\n  detached() {\n    // Cleanup when primitive is detached\n  }\n\n  getPoint1() {\n    return this._point1;\n  }\n  getPoint2() {\n    return this._point2;\n  }\n}\n\nclass TrendLinePaneView implements IPrimitivePaneView {\n  private _source: TrendLinePrimitive;\n  private _renderer: TrendLinePaneRenderer;\n\n  constructor(source: TrendLinePrimitive) {\n    this._source = source;\n    this._renderer = new TrendLinePaneRenderer();\n  }\n\n  update() {\n    this._renderer.setData({\n      point1: this._source.getPoint1(),\n      point2: this._source.getPoint2(),\n    });\n  }\n\n  renderer() {\n    return this._renderer;\n  }\n\n  zOrder() {\n    return \"normal\" as const;\n  }\n}\n\nclass TrendLinePaneRenderer implements IPrimitivePaneRenderer {\n  private _data: { point1: any; point2: any } | null = null;\n\n  setData(data: { point1: any; point2: any } | null) {\n    this._data = data;\n  }\n\n  draw(target: any) {\n    if (!this._data) return;\n    // Canvas 2D rendering implementation\n    target.useBitmapCoordinateSpace((scope: any) =\u003e {\n      const ctx = scope.context;\n      // Draw trend line using this._data.point1 and this._data.point2\n      // ... drawing logic\n    });\n  }\n}\n\nconst trendLine = new TrendLinePrimitive(\n  { time: \"2023-01-01\" as Time, value: 100 },\n  { time: \"2023-01-10\" as Time, value: 120 },\n);\n\n\u003cTimeChart\u003e\n  \u003cTimeChart.Series\n    type=\"Line\"\n    data={priceData}\n    primitives={[trendLine]}\n    onAttachPrimitives={(primitives) =\u003e console.log(\"Primitives attached:\", primitives)}\n  /\u003e\n\u003c/TimeChart\u003e;\n```\n\n### Pane Primitives\n\n```tsx\nimport { TimeChart, type PanePrimitive } from \"@dschz/solid-lightweight-charts\";\nimport type {\n  IPanePrimitivePaneView,\n  IPrimitivePaneRenderer,\n  PaneAttachedParameter,\n  Time,\n} from \"lightweight-charts\";\n\n// Watermark primitive with proper TypeScript implementation\nclass WatermarkPrimitive implements PanePrimitive\u003cTime\u003e {\n  private _paneViews: WatermarkPaneView[];\n  private _text: string;\n  private _color: string;\n  private _fontSize: number;\n\n  constructor(text: string, color = \"rgba(128, 128, 128, 0.3)\", fontSize = 48) {\n    this._text = text;\n    this._color = color;\n    this._fontSize = fontSize;\n    this._paneViews = [new WatermarkPaneView(this)];\n  }\n\n  updateAllViews() {\n    this._paneViews.forEach((pv) =\u003e pv.update());\n  }\n\n  paneViews() {\n    return this._paneViews;\n  }\n\n  attached(param: PaneAttachedParameter\u003cTime\u003e) {\n    // Pane primitives can use this for initialization\n  }\n\n  detached() {\n    // Cleanup if needed\n  }\n\n  getText() {\n    return this._text;\n  }\n  getColor() {\n    return this._color;\n  }\n  getFontSize() {\n    return this._fontSize;\n  }\n}\n\nclass WatermarkPaneView implements IPanePrimitivePaneView {\n  private _source: WatermarkPrimitive;\n  private _renderer: WatermarkPaneRenderer;\n\n  constructor(source: WatermarkPrimitive) {\n    this._source = source;\n    this._renderer = new WatermarkPaneRenderer();\n  }\n\n  update() {\n    this._renderer.setData({\n      text: this._source.getText(),\n      color: this._source.getColor(),\n      fontSize: this._source.getFontSize(),\n    });\n  }\n\n  renderer() {\n    return this._renderer;\n  }\n\n  zOrder() {\n    return \"bottom\" as const;\n  }\n}\n\nclass WatermarkPaneRenderer implements IPrimitivePaneRenderer {\n  private _data: { text: string; color: string; fontSize: number } | null = null;\n\n  setData(data: { text: string; color: string; fontSize: number } | null) {\n    this._data = data;\n  }\n\n  draw(target: any) {\n    if (!this._data) return;\n\n    target.useBitmapCoordinateSpace((scope: any) =\u003e {\n      const ctx = scope.context;\n      const { width, height } = scope.bitmapSize;\n\n      ctx.save();\n      ctx.font = `${this._data!.fontSize}px Arial`;\n      ctx.fillStyle = this._data!.color;\n      ctx.textAlign = \"center\";\n      ctx.textBaseline = \"middle\";\n\n      // Draw watermark in center of pane\n      ctx.fillText(this._data!.text, width / 2, height / 2);\n      ctx.restore();\n    });\n  }\n}\n\nconst watermark = new WatermarkPrimitive(\"DEMO CHART\");\n\n\u003cTimeChart\u003e\n  \u003cTimeChart.Series type=\"Line\" data={priceData} /\u003e\n\n  \u003cTimeChart.Pane\n    primitives={[watermark]}\n    onAttachPrimitives={(primitives) =\u003e console.log(\"Pane primitives attached\")}\n  \u003e\n    \u003cTimeChart.Series type=\"Histogram\" data={volumeData} /\u003e\n  \u003c/TimeChart.Pane\u003e\n\u003c/TimeChart\u003e;\n```\n\n\u003e **💡 Complete Examples**: For fully working primitive implementations with comprehensive TypeScript types, see the interactive examples in our playground:\n\u003e\n\u003e - [`SeriesPrimitivesExample.tsx`](./playground/pages/SeriesPrimitivesExample.tsx) - Trend lines, support/resistance, price alerts, annotations\n\u003e - [`PanePrimitivesExample.tsx`](./playground/pages/PanePrimitivesExample.tsx) - Watermarks, grid overlays, corner badges\n\n## 🛠 Playground \u0026 Examples\n\nSee [`playground/App.tsx`](./playground/App.tsx) for a complete working showcase with live interactive examples:\n\n**Core Chart Types:**\n\n- TimeChart with multiple panes (Candlestick+Line, Volume, Area) and series markers\n- PriceChart with multiple panes (Line+Area, Histogram) and series markers\n- YieldCurveChart with multiple panes (Line, Area) and series markers\n\n**Advanced Features (New in v0.2.0):**\n\n- **Series Primitives Example** - Interactive trend lines, support/resistance levels, price alerts, and text annotations\n- **Pane Primitives Example** - Watermarks, custom grid overlays, and corner badges with live updates\n- **Custom Series Integration** - Complete examples with proper TypeScript interfaces\n- **Dynamic Management** - Real-time updates, lifecycle management, and memory optimization\n\nRun the playground locally:\n\n```bash\ngit clone https://github.com/dsnchz/solid-lightweight-charts\ncd solid-lightweight-charts\nbun install\nbun start\n```\n\n## 📚 Resources\n\n- [TradingView Lightweight Charts Docs](https://tradingview.github.io/lightweight-charts/)\n- [Lightweight Charts GitHub](https://github.com/tradingview/lightweight-charts)\n- [Discord](https://discord.gg/jV4MghpHUA)\n\n\u003e Full documentation and advanced guides coming soon.\n\n## 📄 License\n\nMIT © [Daniel Sanchez](https://github.com/dsnchz)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdsnchz%2Fsolid-lightweight-charts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdsnchz%2Fsolid-lightweight-charts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdsnchz%2Fsolid-lightweight-charts/lists"}