https://github.com/trash-and-fire/svelte-lightweight-charts
Svelte wrapper for financial lightweight charts
https://github.com/trash-and-fire/svelte-lightweight-charts
candlestick candlestick-chart canvas charting-library charts financial-charts javascript lightweight-charts ohcl-chart ohlc stock-chart svelte typescript wrapper-library
Last synced: about 2 months ago
JSON representation
Svelte wrapper for financial lightweight charts
- Host: GitHub
- URL: https://github.com/trash-and-fire/svelte-lightweight-charts
- Owner: trash-and-fire
- License: mit
- Created: 2021-02-20T23:37:32.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-10-17T22:35:24.000Z (almost 2 years ago)
- Last Synced: 2025-03-19T10:25:04.360Z (7 months ago)
- Topics: candlestick, candlestick-chart, canvas, charting-library, charts, financial-charts, javascript, lightweight-charts, ohcl-chart, ohlc, stock-chart, svelte, typescript, wrapper-library
- Language: Svelte
- Homepage:
- Size: 1.14 MB
- Stars: 115
- Watchers: 5
- Forks: 17
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# svelte-lightweight-charts
This package is a Svelte wrapper for [lightweight-charts](https://github.com/tradingview/lightweight-charts)
## [Demo](https://trash-and-fire.github.io/svelte-lightweight-charts/official-samples.html)
Here are some official examples rewritten on Svelte. Each example you can open in the REPL to modify or fork
If you need more information you can see [demo app sources](./src/demo) or [example sources](./src/demo/samples)
## Installing
```bash
npm install lightweight-charts svelte-lightweight-charts
```
## Usage
```svelte
import { Chart, LineSeries } from "svelte-lightweight-charts";
const data = [
{ time: '2019-04-11', value: 80.01 },
{ time: '2019-04-12', value: 96.63 },
{ time: '2019-04-13', value: 76.64 },
{ time: '2019-04-14', value: 81.89 },
{ time: '2019-04-15', value: 74.43 },
{ time: '2019-04-16', value: 80.01 },
{ time: '2019-04-17', value: 96.63 },
{ time: '2019-04-18', value: 76.64 },
{ time: '2019-04-19', value: 81.89 },
{ time: '2019-04-20', value: 74.43 },
];
```
## Getting reference to lightweight-chart objects
You can use the `ref` property to get a reference to a lightweight-chart api-instance from any component.
```svelte
let chartApi;
chartApi = ref}/>
chartApi.timeScale().fitContent()}>Fit Content
```
The value of `ref` property must be a function: `(api: T | null) => void`.
It is guaranteed that ref-callback will be called with some value when the component is mounted and with null value when the component is unmounted.
If you change the ref-callback, then the previous callback will be called with a null value, and the next callback will be called with the actual value.
## Components
### Chart
`` - main chart container and wrapping dom element.
You can pass any option from [`ChartOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptions) as separate property.
Using `container` property you can get access to containing element:
```ts
container?: {
ref?: (element: HTMLElement | null) => void;
class?: string;
id?: string;
style?: string;
}
```
If you need a reference to the containing dom element you can use `ref` property. It might be useful to setup IntersectionObserver on this dom element.
Use `class` or `style` properties with `` to set up an adaptive chart:
```svelte
:global(.chart-container) {
aspect-ratio: 16 / 9;
width: 80%;
margin: auto;
}
```
#### SSR
The chart component will reserve the specified `width` and `height` during SSR if the chart is not auto-sized.
Events:
- [`on:crosshairMove`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#subscribeclick): `(event: CustomEvent) => void`
- [`on:click`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#subscribecrosshairmove): `(event: CustomEvent) => void`
Use the `ref` property to get a reference to a [`IChartApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi) instance
### Series
Following types of series are supported:
- ``
- ``
- ``
- ``
- ``
- ``
Series components should be nested inside a chart component.
You can pass any series option as separate property.
List of available options corresponding to each type of series can be found [here](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap)
Use the `ref` property to get reference to a [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) instance.
#### Passing data
To pass a data to a series you can use the `data` property. Look [here](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesDataItemTypeMap) to find what shape of data you need for each series type.
By default `data` represents only the **initial** data. Any subsequent data update does not update series.
If you want to change this behavior please add [`reactive={true}`](https://svelte.dev/repl/0efb2840a9844ed5a1d84f2a1c9a2269) to your series component. In this case series will apply a new data if it is not reference equal to previous array.
#### Passing markers
To pass markers to a series you can use the `markers` property. Markers should be an array of `SeriesMarker
### Price line
To draw price line add `` component inside any series.
```svelte
```
You can pass any options from [`PriceLineOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceLineOptions) as separate property. The `price` property is mandatory in dev mode.
Use the `ref` property to get reference to a [`IPriceLine`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceLine) instance.
#### Line drawing on click
You can draw price lines dynamically. For [example](https://svelte.dev/repl/3294790e6b5048a5abfb3d239405214b), you can draw a price line at a user-specified point.
### Time scale
`` - the component is a binding to the current time scale of the current chart.
This component has to be nested inside a chart component and should not have duplicates. Each chart has only one time scale.
You can pass any option from [`TimeScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/TimeScaleOptions) as separate property.
Events:
- [`on:visibleTimeRangeChange`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#subscribevisibletimerangechange) - `(event: CustomEvent) => void`
- [`on:visibleLogicalRangeChange`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#subscribevisiblelogicalrangechange) - `(event: CustomEvent) => void`
- [`on:sizeChange`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi#subscribesizechange) - `(event: CustomEvent<{ width: number; height: number }>) => void`
Use the `ref` property to get reference to a [`ITimeScaleApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ITimeScaleApi) instance.
Note: don't use `ChartOptions['timeScale']` and `` component at the same time. This can lead to uncontrolled overwriting of options.
### Price scale
`` - the component is a bindings to a certain price scale.
This component has to be nested inside chart component and requires an `id` property. Two price scales with the same `id` within the same chart result in undefined behaviour.
You can pass any option from [`PriceScaleOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceScaleOptions) as separate property.
Note: don't use `ChartOptions['leftPriceScale']'` or `ChartOptions['rightPriceScale']` or `ChartOptions['overlayPriceScale']` and `` at the same time. This can lead to uncontrolled overwriting of options.
## Typescript
Package is written on TypeScript and transpiled to plain `*.js` and `*.svelte` files. Definition files (including `*.svelte.d.ts`) are provided with package. It is a good place to find list of available properties that can be passed to each component.
## Related projects
Need a wrapper for another framework? Check out my [lightweight-charts-react-wrapper](https://github.com/trash-and-fire/lightweight-charts-react-wrapper)
## Licence
MIT
Review the license [requirements](https://github.com/tradingview/lightweight-charts#license) for the required "attribution notice" in the Lightweight Chart Repository.