├── .eslintignore ├── .eslintrc.cjs ├── .github ├── ISSUE_TEMPLATE │ └── bug_report.md └── workflows │ └── ci.yml ├── .gitignore ├── .npmrc ├── CHANGELOG.md ├── LICENSE ├── README.md ├── gulpfile.cjs ├── package.json ├── pnpm-lock.yaml ├── repl-maker.cjs ├── scripts └── svelte-jest.mjs ├── src ├── demo │ ├── app.svelte │ ├── data-series.ts │ ├── gallery.svelte │ ├── global.css │ ├── index.ts │ ├── official-samples.ts │ ├── repl.json │ └── samples │ │ ├── bar-chart.svelte │ │ ├── candlestick-chart.svelte │ │ ├── components │ │ ├── button.svelte │ │ └── switcher.svelte │ │ ├── custom-font-family.svelte │ │ ├── custom-locale.svelte │ │ ├── custom-price-formatter.svelte │ │ ├── custom-themes.svelte │ │ ├── custom-watermark.svelte │ │ ├── infinite-history.svelte │ │ ├── legend.svelte │ │ ├── moving-average.svelte │ │ ├── price-lines-with-titles.svelte │ │ ├── realtime-emulation.svelte │ │ ├── series-markers.svelte │ │ ├── synchronized-charts.svelte │ │ ├── take-screenshot.svelte │ │ ├── two-price-scales.svelte │ │ └── volume-study.svelte └── package │ ├── components │ ├── __tests__ │ │ ├── chart.ts │ │ ├── price-line.ts │ │ ├── price-scale.ts │ │ ├── series.ts │ │ └── time-scale.ts │ ├── area-series.interface.ts │ ├── area-series.svelte │ ├── bar-series.interface.ts │ ├── bar-series.svelte │ ├── baseline-series.interface.ts │ ├── baseline-series.svelte │ ├── candlestick-series.interface.ts │ ├── candlestick-series.svelte │ ├── chart.interface.ts │ ├── chart.svelte │ ├── histogram-series.interface.ts │ ├── histogram-series.svelte │ ├── internal │ │ ├── __tests__ │ │ │ └── context-provider.ts │ │ ├── context-provider.svelte │ │ ├── element.ts │ │ └── utils.ts │ ├── line-series.interface.ts │ ├── line-series.svelte │ ├── price-line.interface.ts │ ├── price-line.svelte │ ├── price-scale.interface.ts │ ├── price-scale.svelte │ ├── time-scale.interface.ts │ └── time-scale.svelte │ ├── index.ts │ └── internal │ ├── __tests__ │ ├── lines.ts │ ├── price-scale.ts │ ├── series.ts │ └── time-scale.ts │ ├── chart.ts │ ├── lines.ts │ ├── price-scale.ts │ ├── series.ts │ ├── time-scale.ts │ └── utils.ts ├── tsconfig.build.json ├── tsconfig.json ├── tsconfig.test.json └── webpack.config.cjs /.eslintignore: -------------------------------------------------------------------------------- 1 | # don't ever lint node_modules 2 | node_modules 3 | # don't lint build output (make sure it's set to your correct build folder name) 4 | dist 5 | # don't lint nyc coverage output 6 | coverage 7 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | function typescriptRules(annotations) { 2 | let result = { 3 | "no-console": "error", 4 | "@typescript-eslint/ban-types": [ 5 | "error", 6 | { 7 | extendDefaults: false, 8 | types: { 9 | String: { 10 | message: 'Use string instead', 11 | fixWith: 'string', 12 | }, 13 | Boolean: { 14 | message: 'Use boolean instead', 15 | fixWith: 'boolean', 16 | }, 17 | Number: { 18 | message: 'Use number instead', 19 | fixWith: 'number', 20 | }, 21 | Symbol: { 22 | message: 'Use symbol instead', 23 | fixWith: 'symbol', 24 | }, 25 | 26 | Function: { 27 | message: [ 28 | 'The `Function` type accepts any function-like value.', 29 | 'It provides no type safety when calling the function, which can be a common source of bugs.', 30 | 'It also accepts things like class declarations, which will throw at runtime as they will not be called with `new`.', 31 | 'If you are expecting the function to accept certain arguments, you should explicitly define the function shape.', 32 | ].join('\n'), 33 | }, 34 | 35 | // object typing 36 | Object: { 37 | message: [ 38 | 'The `Object` type actually means "any non-nullish value", so it is marginally better than `unknown`.', 39 | '- If you want a type meaning "any object", you probably want `Record` instead.', 40 | '- If you want a type meaning "any value", you probably want `unknown` instead.', 41 | ].join('\n'), 42 | }, 43 | } 44 | } 45 | ], 46 | "@typescript-eslint/no-inferrable-types": "off", 47 | "import/extensions": ["error", "always"], 48 | }; 49 | if (annotations !== false) { 50 | result["@typescript-eslint/typedef"] = [ 51 | "error", 52 | { 53 | arrowParameter: true, 54 | memberVariableDeclaration: true, 55 | parameter: true, 56 | propertyDeclaration: true, 57 | } 58 | ] 59 | result["@typescript-eslint/explicit-function-return-type"] = [ 60 | "error", 61 | { 62 | "allowExpressions": true, 63 | } 64 | ] 65 | } 66 | return result; 67 | } 68 | 69 | module.exports = { 70 | root: true, 71 | plugins: [ 72 | 'eslint-plugin-import', 73 | ], 74 | ignorePatterns: ["dist/*"], 75 | overrides: [ 76 | { 77 | extends: [ 78 | "eslint:recommended", 79 | "plugin:node/recommended" 80 | ], 81 | files: ['.eslintrc.cjs', 'webpack.config.cjs', 'gulpfile.cjs', 'repl-maker.cjs', 'scripts/**/*.{js,cjs}'], 82 | parserOptions: { 83 | "ecmaVersion": 2020 84 | }, 85 | env: { 86 | node: true, 87 | browser: false, 88 | es2020: true, 89 | }, 90 | rules: { 91 | "node/no-unpublished-require": "off", 92 | "node/no-unpublished-import": "off", 93 | } 94 | }, 95 | { 96 | parser: '@typescript-eslint/parser', 97 | plugins: [ 98 | '@typescript-eslint', 99 | ], 100 | extends: [ 101 | 'eslint:recommended', 102 | 'plugin:@typescript-eslint/recommended', 103 | ], 104 | files: ['**/*.ts'], 105 | env: { 106 | browser: true, 107 | node: false 108 | }, 109 | rules: typescriptRules(), 110 | }, 111 | { 112 | parser: '@typescript-eslint/parser', 113 | plugins: [ 114 | 'svelte3', 115 | '@typescript-eslint', 116 | ], 117 | processor: 'svelte3/svelte3', 118 | extends: [ 119 | 'eslint:recommended', 120 | 'plugin:@typescript-eslint/recommended', 121 | ], 122 | files: ['**/*.svelte'], 123 | excludedFiles: ['**/samples/**/*.svelte'], 124 | env: { 125 | browser: true, 126 | node: false 127 | }, 128 | rules: typescriptRules(), 129 | settings: { 130 | 'svelte3/typescript': require('typescript'), 131 | } 132 | }, 133 | { 134 | parser: '@typescript-eslint/parser', 135 | plugins: [ 136 | 'svelte3', 137 | '@typescript-eslint', 138 | ], 139 | processor: 'svelte3/svelte3', 140 | extends: [ 141 | 'eslint:recommended', 142 | 'plugin:@typescript-eslint/recommended', 143 | ], 144 | files: ['**/samples/**/*.svelte'], 145 | env: { 146 | browser: true, 147 | node: false 148 | }, 149 | rules: typescriptRules(false), 150 | settings: { 151 | 'svelte3/typescript': require('typescript'), 152 | } 153 | } 154 | ] 155 | }; 156 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **Link to REPL** 14 | Link to the [REPL](https://svelte.dev/repl) with a minimal reproduction of the bug. 15 | 16 | **Versions** 17 | - svelte-lightweight-charts@(write your version here) 18 | - lightweight-charts@(write your version here) 19 | 20 | **To Reproduce** 21 | Steps to reproduce the behavior: 22 | 1. Go to '...' 23 | 2. Click on '....' 24 | 3. Scroll down to '....' 25 | 4. See error 26 | 27 | **Expected behavior** 28 | A clear and concise description of what you expected to happen. 29 | 30 | **Screenshots** 31 | If applicable, add screenshots to help explain your problem. 32 | 33 | **Additional context** 34 | Add any other context about the problem here. 35 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: [pull_request] 4 | 5 | jobs: 6 | lint: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - name: Checkout 10 | uses: actions/checkout@v3 11 | 12 | - name: Install Node.js 13 | uses: actions/setup-node@v3 14 | with: 15 | node-version: 16 16 | 17 | - uses: pnpm/action-setup@v2 18 | name: Install pnpm 19 | id: pnpm-install 20 | with: 21 | version: 7 22 | 23 | - name: Get pnpm store directory 24 | id: pnpm-cache 25 | shell: bash 26 | run: | 27 | echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT 28 | 29 | - uses: actions/cache@v3 30 | name: Setup pnpm cache 31 | with: 32 | path: ${{ steps.pnpm-cache.outputs.STORE_PATH }} 33 | key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} 34 | restore-keys: | 35 | ${{ runner.os }}-pnpm-store- 36 | 37 | - name: Install dependencies 38 | run: pnpm install 39 | 40 | - name: Lint files 41 | run: pnpm run lint 42 | 43 | test: 44 | runs-on: ubuntu-latest 45 | 46 | steps: 47 | - name: Checkout 48 | uses: actions/checkout@v3 49 | 50 | - name: Install Node.js 51 | uses: actions/setup-node@v3 52 | with: 53 | node-version: 16 54 | 55 | - uses: pnpm/action-setup@v2 56 | name: Install pnpm 57 | id: pnpm-install 58 | with: 59 | version: 7 60 | 61 | - name: Get pnpm store directory 62 | id: pnpm-cache 63 | shell: bash 64 | run: | 65 | echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT 66 | 67 | - uses: actions/cache@v3 68 | name: Setup pnpm cache 69 | with: 70 | path: ${{ steps.pnpm-cache.outputs.STORE_PATH }} 71 | key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} 72 | restore-keys: | 73 | ${{ runner.os }}-pnpm-store- 74 | 75 | - name: Install dependencies 76 | run: pnpm install 77 | 78 | - name: Run tests 79 | run: pnpm run test 80 | env: 81 | CI: true 82 | 83 | validate: 84 | runs-on: ubuntu-latest 85 | 86 | steps: 87 | - name: Checkout 88 | uses: actions/checkout@v3 89 | 90 | - name: Install Node.js 91 | uses: actions/setup-node@v3 92 | with: 93 | node-version: 16 94 | 95 | - uses: pnpm/action-setup@v2 96 | name: Install pnpm 97 | id: pnpm-install 98 | with: 99 | version: 7 100 | 101 | - name: Get pnpm store directory 102 | id: pnpm-cache 103 | shell: bash 104 | run: | 105 | echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT 106 | 107 | - uses: actions/cache@v3 108 | name: Setup pnpm cache 109 | with: 110 | path: ${{ steps.pnpm-cache.outputs.STORE_PATH }} 111 | key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} 112 | restore-keys: | 113 | ${{ runner.os }}-pnpm-store- 114 | 115 | - name: Install dependencies 116 | run: pnpm install 117 | 118 | - name: Check - build package 119 | run: npm run build-package 120 | 121 | - name: Check - svelte errors 122 | run: npm run validate 123 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | public/bundle.* 4 | package-lock.json 5 | yarn.lock 6 | dist/ 7 | /.eslintcache 8 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | save-exact=true 2 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Svelte Lightweight Charts changelog 2 | 3 | ## 2.1.0 4 | 5 | - Added `markers` property to `<[Type]Series>` components. 6 | - Supported `kineticScroll` and `trackingMode` options on `` component. 7 | - Supported `autoSize` option on `` component. 8 | - Reduced layout shift on SSR. The chart component will reserve the specified width and height if the chart is not auto-sized. 9 | 10 | ## 2.0.0 11 | 12 | This major release raises the required `lightweight-charts` package version to 4.0.0 providing support for new features from the package. 13 | 14 | Check out `lightweight-charts@4.0.0` [release notes](https://github.com/tradingview/lightweight-charts/releases/tag/v4.0.0) first. 15 | 16 | ### Major updates 17 | 18 | - Compatibility with SvelteKit. The package comes as ESM compatible, which provides full support for modern tools and bundlers. 19 | 20 | ### Breaking changes 21 | 22 | - ESM only (CJS support can be added on demand in the future). 23 | - Removed deprecated chart action exports: `chart`, `ChartActionParams` and default export. 24 | - `<[Type]Series>`: removed `scaleMargins` property instead use the same property on `` component. 25 | - ``: `price` is required property now. 26 | - ``: `drawTicks` property is renamed to `ticksVisible`. 27 | 28 | ### New features 29 | 30 | - ``: added `invertFilledArea` property which when set to true will invert the filled area (draw above the line instead of below it). 31 | - ``: added `textColor` property. 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 trash-and-fire 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # svelte-lightweight-charts 2 | 3 | This package is a Svelte wrapper for [lightweight-charts](https://github.com/tradingview/lightweight-charts) 4 | 5 | ## [Demo](https://trash-and-fire.github.io/svelte-lightweight-charts/official-samples.html) 6 | 7 | Here are some official examples rewritten on Svelte. Each example you can open in the REPL to modify or fork 8 | 9 | If you need more information you can see [demo app sources](./src/demo) or [example sources](./src/demo/samples) 10 | 11 | ## Installing 12 | 13 | ```bash 14 | npm install lightweight-charts svelte-lightweight-charts 15 | ``` 16 | 17 | ## Usage 18 | 19 | ```svelte 20 | 35 | 36 | 37 | 38 | ``` 39 | 40 | ## Getting reference to lightweight-chart objects 41 | 42 | You can use the `ref` property to get a reference to a lightweight-chart api-instance from any component. 43 | ```svelte 44 | 47 | chartApi = ref}/> 48 | 49 | ``` 50 | The value of `ref` property must be a function: `(api: T | null) => void`. 51 | 52 | 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. 53 | 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. 54 | 55 | ## Components 56 | 57 | ### Chart 58 | 59 | `` - main chart container and wrapping dom element. 60 | You can pass any option from [`ChartOptions`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptions) as separate property. 61 | 62 | Using `container` property you can get access to containing element: 63 | ```ts 64 | container?: { 65 | ref?: (element: HTMLElement | null) => void; 66 | class?: string; 67 | id?: string; 68 | style?: string; 69 | } 70 | ``` 71 | 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. 72 | 73 | Use `class` or `style` properties with `` to set up an adaptive chart: 74 | ```svelte 75 | 79 | 80 | 81 | 88 | ``` 89 | 90 | #### SSR 91 | The chart component will reserve the specified `width` and `height` during SSR if the chart is not auto-sized. 92 | 93 | Events: 94 | - [`on:crosshairMove`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#subscribeclick): `(event: CustomEvent) => void` 95 | - [`on:click`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi#subscribecrosshairmove): `(event: CustomEvent) => void` 96 | 97 | Use the `ref` property to get a reference to a [`IChartApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IChartApi) instance 98 | 99 | ### Series 100 | 101 | Following types of series are supported: 102 | - `` 103 | - `` 104 | - `` 105 | - `` 106 | - `` 107 | - `` 108 | 109 | Series components should be nested inside a chart component. 110 | 111 | You can pass any series option as separate property. 112 | List of available options corresponding to each type of series can be found [here](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsMap) 113 | 114 | Use the `ref` property to get reference to a [`ISeriesApi`](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ISeriesApi) instance. 115 | 116 | #### Passing data 117 | 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. 118 | 119 | By default `data` represents only the **initial** data. Any subsequent data update does not update series. 120 | 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. 121 | 122 | #### Passing markers 123 | To pass markers to a series you can use the `markers` property. Markers should be an array of `SeriesMarker