├── .streamlit
    └── config.toml
├── MANIFEST.in
├── examples
    ├── requirements.txt
    ├── AreaChart.png
    ├── BarChart.png
    ├── LineChart.png
    ├── BaselineChart.png
    ├── DataToggling.png
    ├── HistogramChart.png
    ├── MultiPaneChart.png
    ├── CandlestickChart.png
    ├── PriceVolumeChart.png
    ├── OverlaidAreasChart.png
    ├── MultiPaneChartsFromCSV.png
    ├── MultiPaneChartsWithPandas.png
    ├── LineChart.py
    ├── AreaChart.py
    ├── DataToggling.py
    ├── HistogramChart.py
    ├── BaselineChart.py
    ├── BarChart.py
    ├── CandlestickChart.py
    ├── PriceVolumeChart.py
    ├── OverlaidAreasChart.py
    ├── MultiPaneChart.py
    ├── MultiPaneChartsWithPandas.py
    ├── MultiPaneChartsFromCSV.py
    └── MultiPaneChartsFromCSV.csv
├── streamlit_lightweight_charts
    ├── frontend
    │   ├── src
    │   │   ├── react-app-env.d.ts
    │   │   ├── index.tsx
    │   │   └── LightweightCharts.tsx
    │   ├── .prettierrc
    │   ├── .env
    │   ├── tsconfig.json
    │   ├── build
    │   │   ├── precache-manifest.e348f70e7319498a2e6b3a0c95da5ac1.js
    │   │   ├── asset-manifest.json
    │   │   ├── service-worker.js
    │   │   ├── static
    │   │   │   └── js
    │   │   │   │   ├── runtime-main.e0d8c599.js
    │   │   │   │   ├── main.509cd3c1.chunk.js
    │   │   │   │   ├── 2.70acfc76.chunk.js.LICENSE.txt
    │   │   │   │   ├── main.509cd3c1.chunk.js.map
    │   │   │   │   └── runtime-main.e0d8c599.js.map
    │   │   └── index.html
    │   ├── public
    │   │   └── index.html
    │   └── package.json
    ├── __init__.py
    └── dataSamples.py
├── dist
    ├── streamlit-lightweight-charts-0.7.20.tar.gz
    └── streamlit_lightweight_charts-0.7.20-py3-none-any.whl
├── setup.py
├── LICENSE
├── .gitignore
└── README.md


/.streamlit/config.toml:
--------------------------------------------------------------------------------
1 | [browser]
2 | gatherUsageStats = false


--------------------------------------------------------------------------------
/MANIFEST.in:
--------------------------------------------------------------------------------
1 | recursive-include streamlit_lightweight_charts/frontend/build *
2 | 


--------------------------------------------------------------------------------
/examples/requirements.txt:
--------------------------------------------------------------------------------
1 | streamlit>=0.62
2 | streamlit-lightweight-charts>=0.7.18
3 | 
4 | 


--------------------------------------------------------------------------------
/streamlit_lightweight_charts/frontend/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/examples/AreaChart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/freyastreamlit/streamlit-lightweight-charts/HEAD/examples/AreaChart.png


--------------------------------------------------------------------------------
/examples/BarChart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/freyastreamlit/streamlit-lightweight-charts/HEAD/examples/BarChart.png


--------------------------------------------------------------------------------
/examples/LineChart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/freyastreamlit/streamlit-lightweight-charts/HEAD/examples/LineChart.png


--------------------------------------------------------------------------------
/examples/BaselineChart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/freyastreamlit/streamlit-lightweight-charts/HEAD/examples/BaselineChart.png


--------------------------------------------------------------------------------
/examples/DataToggling.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/freyastreamlit/streamlit-lightweight-charts/HEAD/examples/DataToggling.png


--------------------------------------------------------------------------------
/examples/HistogramChart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/freyastreamlit/streamlit-lightweight-charts/HEAD/examples/HistogramChart.png


--------------------------------------------------------------------------------
/examples/MultiPaneChart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/freyastreamlit/streamlit-lightweight-charts/HEAD/examples/MultiPaneChart.png


--------------------------------------------------------------------------------
/examples/CandlestickChart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/freyastreamlit/streamlit-lightweight-charts/HEAD/examples/CandlestickChart.png


--------------------------------------------------------------------------------
/examples/PriceVolumeChart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/freyastreamlit/streamlit-lightweight-charts/HEAD/examples/PriceVolumeChart.png


--------------------------------------------------------------------------------
/streamlit_lightweight_charts/frontend/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "endOfLine": "lf",
3 |   "semi": false,
4 |   "trailingComma": "es5"
5 | }
6 | 


--------------------------------------------------------------------------------
/examples/OverlaidAreasChart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/freyastreamlit/streamlit-lightweight-charts/HEAD/examples/OverlaidAreasChart.png


--------------------------------------------------------------------------------
/examples/MultiPaneChartsFromCSV.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/freyastreamlit/streamlit-lightweight-charts/HEAD/examples/MultiPaneChartsFromCSV.png


--------------------------------------------------------------------------------
/examples/MultiPaneChartsWithPandas.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/freyastreamlit/streamlit-lightweight-charts/HEAD/examples/MultiPaneChartsWithPandas.png


--------------------------------------------------------------------------------
/dist/streamlit-lightweight-charts-0.7.20.tar.gz:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/freyastreamlit/streamlit-lightweight-charts/HEAD/dist/streamlit-lightweight-charts-0.7.20.tar.gz


--------------------------------------------------------------------------------
/dist/streamlit_lightweight_charts-0.7.20-py3-none-any.whl:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/freyastreamlit/streamlit-lightweight-charts/HEAD/dist/streamlit_lightweight_charts-0.7.20-py3-none-any.whl


--------------------------------------------------------------------------------
/streamlit_lightweight_charts/frontend/.env:
--------------------------------------------------------------------------------
1 | # Run the component's dev server on :3001
2 | # (The Streamlit dev server already runs on :3000)
3 | PORT=3001
4 | 
5 | # Don't automatically open the web browser on `npm run start`.
6 | BROWSER=none
7 | 


--------------------------------------------------------------------------------
/streamlit_lightweight_charts/frontend/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import ReactDOM from "react-dom"
 3 | import { StreamlitProvider } from "streamlit-component-lib-react-hooks"
 4 | import LightweightCharts from "./LightweightCharts"
 5 | 
 6 | ReactDOM.render(
 7 |   <React.StrictMode>
 8 |     <StreamlitProvider>
 9 |       <LightweightCharts />
10 |     </StreamlitProvider>
11 |   </React.StrictMode>,
12 |   document.getElementById("root")
13 | )
14 | 


--------------------------------------------------------------------------------
/streamlit_lightweight_charts/frontend/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "esModuleInterop": true,
 8 |     "allowSyntheticDefaultImports": true,
 9 |     "strict": true,
10 |     "forceConsistentCasingInFileNames": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "noEmit": true,
16 |     "jsx": "react"
17 |   },
18 |   "include": ["src"]
19 | }
20 | 


--------------------------------------------------------------------------------
/streamlit_lightweight_charts/frontend/build/precache-manifest.e348f70e7319498a2e6b3a0c95da5ac1.js:
--------------------------------------------------------------------------------
 1 | self.__precacheManifest = (self.__precacheManifest || []).concat([
 2 |   {
 3 |     "revision": "db6357f0bcc0d206ab0c3579b9cc45d0",
 4 |     "url": "./index.html"
 5 |   },
 6 |   {
 7 |     "revision": "98d8c28a96c309ff10d7",
 8 |     "url": "./static/js/2.70acfc76.chunk.js"
 9 |   },
10 |   {
11 |     "revision": "f263fa2f915c7728c49ada0765c8d30c",
12 |     "url": "./static/js/2.70acfc76.chunk.js.LICENSE.txt"
13 |   },
14 |   {
15 |     "revision": "79531bf4cf4d8373b518",
16 |     "url": "./static/js/main.509cd3c1.chunk.js"
17 |   },
18 |   {
19 |     "revision": "f67f485cd6c9968cb460",
20 |     "url": "./static/js/runtime-main.e0d8c599.js"
21 |   }
22 | ]);


--------------------------------------------------------------------------------
/streamlit_lightweight_charts/frontend/build/asset-manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "files": {
 3 |     "main.js": "./static/js/main.509cd3c1.chunk.js",
 4 |     "main.js.map": "./static/js/main.509cd3c1.chunk.js.map",
 5 |     "runtime-main.js": "./static/js/runtime-main.e0d8c599.js",
 6 |     "runtime-main.js.map": "./static/js/runtime-main.e0d8c599.js.map",
 7 |     "static/js/2.70acfc76.chunk.js": "./static/js/2.70acfc76.chunk.js",
 8 |     "static/js/2.70acfc76.chunk.js.map": "./static/js/2.70acfc76.chunk.js.map",
 9 |     "index.html": "./index.html",
10 |     "precache-manifest.e348f70e7319498a2e6b3a0c95da5ac1.js": "./precache-manifest.e348f70e7319498a2e6b3a0c95da5ac1.js",
11 |     "service-worker.js": "./service-worker.js",
12 |     "static/js/2.70acfc76.chunk.js.LICENSE.txt": "./static/js/2.70acfc76.chunk.js.LICENSE.txt"
13 |   },
14 |   "entrypoints": [
15 |     "static/js/runtime-main.e0d8c599.js",
16 |     "static/js/2.70acfc76.chunk.js",
17 |     "static/js/main.509cd3c1.chunk.js"
18 |   ]
19 | }


--------------------------------------------------------------------------------
/streamlit_lightweight_charts/frontend/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <title>Streamlit Component</title>
 5 |     <meta charset="UTF-8" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta name="description" content="Streamlit Component" />
 9 |   </head>
10 |   <body>
11 |     <noscript>You need to enable JavaScript to run this app.</noscript>
12 |     <div id="root"></div>
13 |     <!--
14 |       This HTML file is a template.
15 |       If you open it directly in the browser, you will see an empty page.
16 | 
17 |       You can add webfonts, meta tags, or analytics to this file.
18 |       The build step will place the bundled scripts into the <body> tag.
19 | 
20 |       To begin the development, run `npm start` or `yarn start`.
21 |       To create a production bundle, use `npm run build` or `yarn build`.
22 |     -->
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/setup.py:
--------------------------------------------------------------------------------
 1 | import setuptools
 2 | 
 3 | with open("README.md", "r") as fh:
 4 |     long_description = fh.read()
 5 | 
 6 | setuptools.setup(
 7 |     name="streamlit-lightweight-charts",
 8 |     version="0.7.20",
 9 |     author="Joe Rosa",
10 |     author_email="joe.rosa@itpmngt.co.uk",
11 |     license="MIT",
12 |     classifiers=[
13 |         "License :: OSI Approved :: MIT License",
14 |         "Programming Language :: Python :: 3",
15 |         "Programming Language :: Python :: 3.6",
16 |     ],
17 |     description="Wrapper for TradingView `lightweight-charts`",
18 |     long_description=long_description,
19 |     long_description_content_type="text/markdown",
20 |     url="https://github.com/freyastreamlit/streamlit-lightweight-charts",
21 |     packages=['streamlit_lightweight_charts'],
22 |     package_data={
23 |         'streamlit_lightweight_charts': ['frontend/build/*','frontend/build/static/js/*'],
24 |     },
25 |     include_package_data=True,
26 |     python_requires=">=3.6",
27 |     install_requires=[
28 |         "streamlit >= 0.62",
29 |     ],
30 | )
31 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 freyastreamlit
 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 | 


--------------------------------------------------------------------------------
/examples/LineChart.py:
--------------------------------------------------------------------------------
 1 | import streamlit as st
 2 | from streamlit_lightweight_charts import renderLightweightCharts
 3 | 
 4 | chartOptions = {
 5 |     "layout": {
 6 |         "textColor": 'black',
 7 |         "background": {
 8 |             "type": 'solid',
 9 |             "color": 'white'
10 |         }
11 |     }
12 | }
13 | 
14 | seriesLineChart = [{
15 |     "type": 'Line',
16 |     "data": [
17 |         { "time": '2018-12-22', "value": 32.51 },
18 |         { "time": '2018-12-23', "value": 31.11 },
19 |         { "time": '2018-12-24', "value": 27.02 },
20 |         { "time": '2018-12-25', "value": 27.32 },
21 |         { "time": '2018-12-26', "value": 25.17 },
22 |         { "time": '2018-12-27', "value": 28.89 },
23 |         { "time": '2018-12-28', "value": 25.46 },
24 |         { "time": '2018-12-29', "value": 23.92 },
25 |         { "time": '2018-12-30', "value": 22.68 },
26 |         { "time": '2018-12-31', "value": 22.67 },
27 |     ],
28 |     "options": {}
29 | }]
30 | 
31 | st.subheader("Line Chart sample")
32 | 
33 | renderLightweightCharts([
34 |     {
35 |         "chart": chartOptions,
36 |         "series": seriesLineChart
37 |     }
38 | ], 'line')


--------------------------------------------------------------------------------
/examples/AreaChart.py:
--------------------------------------------------------------------------------
 1 | import streamlit as st
 2 | from streamlit_lightweight_charts import renderLightweightCharts
 3 | 
 4 | chartOptions = {
 5 |     "layout": {
 6 |         "textColor": 'black',
 7 |         "background": {
 8 |             "type": 'solid',
 9 |             "color": 'white'
10 |         }
11 |     }
12 | }
13 | 
14 | seriesAreaChart = [{
15 |     "type": 'Area',
16 |     "data": [
17 |         { "time": '2018-12-22', "value": 32.51 },
18 |         { "time": '2018-12-23', "value": 31.11 },
19 |         { "time": '2018-12-24', "value": 27.02 },
20 |         { "time": '2018-12-25', "value": 27.32 },
21 |         { "time": '2018-12-26', "value": 25.17 },
22 |         { "time": '2018-12-27', "value": 28.89 },
23 |         { "time": '2018-12-28', "value": 25.46 },
24 |         { "time": '2018-12-29', "value": 23.92 },
25 |         { "time": '2018-12-30', "value": 22.68 },
26 |         { "time": '2018-12-31', "value": 22.67 },
27 |     ],
28 |     "options": {}
29 | }]
30 | 
31 | st.subheader("Area Chart sample")
32 | 
33 | renderLightweightCharts( [
34 |     {
35 |         "chart": chartOptions,
36 |         "series": seriesAreaChart,
37 |     }
38 | ], 'area')


--------------------------------------------------------------------------------
/examples/DataToggling.py:
--------------------------------------------------------------------------------
 1 | import streamlit as st
 2 | from streamlit_lightweight_charts import renderLightweightCharts
 3 | import streamlit_lightweight_charts.dataSamples as data
 4 | 
 5 | chartOptions = {
 6 |     "layout": {
 7 |         "textColor": 'black',
 8 |         "background": {
 9 |             "type": 'solid',
10 |             "color": 'white'
11 |         }
12 |     }
13 | }
14 | 
15 | st.subheader("Data Toggling for an Area Chart")
16 | 
17 | data_select = st.sidebar.radio('Select data source:', ('Area 01', 'Area 02'))
18 | 
19 | if data_select == 'Area 01':
20 |     renderLightweightCharts( [
21 |         {
22 |             "chart": chartOptions,
23 |             "series": [{
24 |                 "type": 'Area',
25 |                 "data": data.seriesMultipleChartArea01,
26 |                 "options": {}
27 |             }],
28 |         }
29 |     ], 'area')
30 | else:
31 |     renderLightweightCharts( [
32 |         {
33 |             "chart": chartOptions,
34 |             "series": [{
35 |                 "type": 'Area',
36 |                 "data": data.seriesMultipleChartArea02,
37 |                 "options": {}
38 |             }],
39 |         }
40 |     ], 'area')
41 | 


--------------------------------------------------------------------------------
/examples/HistogramChart.py:
--------------------------------------------------------------------------------
 1 | import streamlit as st
 2 | from streamlit_lightweight_charts import renderLightweightCharts
 3 | 
 4 | chartOptions = {
 5 |     "layout": {
 6 |         "textColor": 'black',
 7 |         "background": {
 8 |             "type": 'solid',
 9 |             "color": 'white'
10 |         }
11 |     }
12 | }
13 | 
14 | seriesHistogramChart = [{
15 |     "type": 'Histogram',
16 |     "data": [
17 |         { "value": 1, "time": 1642425322 },
18 |         { "value": 8, "time": 1642511722 },
19 |         { "value": 10, "time": 1642598122 },
20 |         { "value": 20, "time": 1642684522 },
21 |         { "value": 3, "time": 1642770922, "color": 'red' },
22 |         { "value": 43, "time": 1642857322 },
23 |         { "value": 41, "time": 1642943722, "color": 'red' },
24 |         { "value": 43, "time": 1643030122 },
25 |         { "value": 56, "time": 1643116522 },
26 |         { "value": 46, "time": 1643202922, "color": 'red' }
27 |     ],
28 |     "options": { "color": '#26a69a' }
29 | }]
30 | 
31 | st.subheader("Histogram Chart sample")
32 | 
33 | renderLightweightCharts([
34 |     {
35 |         "chart": chartOptions,
36 |         "series": seriesHistogramChart
37 |     }
38 | ], 'histogram')


--------------------------------------------------------------------------------
/streamlit_lightweight_charts/frontend/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "streamlit_lightweight_charts",
 3 |   "version": "0.0.8",
 4 |   "private": false,
 5 |   "license": "MIT",
 6 |   "dependencies": {
 7 |     "@testing-library/jest-dom": "^4.2.4",
 8 |     "@testing-library/react": "^9.3.2",
 9 |     "@testing-library/user-event": "^7.1.2",
10 |     "@types/jest": "^24.0.0",
11 |     "@types/node": "^12.0.0",
12 |     "@types/react": "^16.9.0",
13 |     "@types/react-dom": "^16.9.0",
14 |     "lightweight-charts": "^4.0.0",
15 |     "react": "^16.13.1",
16 |     "react-dom": "^16.13.1",
17 |     "react-scripts": "3.4.1",
18 |     "streamlit-component-lib-react-hooks": "^1.0.3"
19 |   },
20 |   "devDependencies": {
21 |     "typescript": "^4.6.2"
22 |   },
23 |   "scripts": {
24 |     "start": "react-scripts start",
25 |     "build": "react-scripts build",
26 |     "test": "react-scripts test",
27 |     "eject": "react-scripts eject"
28 |   },
29 |   "eslintConfig": {
30 |     "extends": "react-app"
31 |   },
32 |   "browserslist": {
33 |     "production": [
34 |       ">0.2%",
35 |       "not dead",
36 |       "not op_mini all"
37 |     ],
38 |     "development": [
39 |       "last 1 chrome version",
40 |       "last 1 firefox version",
41 |       "last 1 safari version"
42 |     ]
43 |   },
44 |   "homepage": "."
45 | }
46 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Byte-compiled / optimized / DLL files
 2 | __pycache__/
 3 | *.py[cod]
 4 | *$py.class
 5 | 
 6 | 
 7 | # PyInstaller
 8 | #  Usually these files are written by a python script from a template
 9 | #  before PyInstaller builds the exe, so as to inject date/other infos into it.
10 | *.manifest
11 | *.spec
12 | 
13 | # Installer logs
14 | pip-log.txt
15 | pip-delete-this-directory.txt
16 | 
17 | # Unit test / coverage reports
18 | htmlcov/
19 | .tox/
20 | .nox/
21 | .coverage
22 | .coverage.*
23 | .cache
24 | nosetests.xml
25 | coverage.xml
26 | *.cover
27 | *.py,cover
28 | .hypothesis/
29 | .pytest_cache/
30 | 
31 | # Jupyter Notebook
32 | .ipynb_checkpoints
33 | 
34 | # IPython
35 | profile_default/
36 | ipython_config.py
37 | 
38 | # pyenv
39 | .python-version
40 | 
41 | # pipenv
42 | #   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
43 | #   However, in case of collaboration, if having platform-specific dependencies or dependencies
44 | #   having no cross-platform support, pipenv may install dependencies that don't work, or not
45 | #   install all needed dependencies.
46 | #Pipfile.lock
47 | 
48 | # PEP 582; used by e.g. github.com/David-OConnor/pyflow
49 | __pypackages__/
50 | 
51 | .pypirc
52 | 
53 | ## Python build
54 | /build/
55 | /*.egg-info
56 | 
57 | .DS_STORE
58 | streamlit_lightweight_charts/frontend/node_modules
59 | .vscode


--------------------------------------------------------------------------------
/streamlit_lightweight_charts/frontend/build/service-worker.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Welcome to your Workbox-powered service worker!
 3 |  *
 4 |  * You'll need to register this file in your web app and you should
 5 |  * disable HTTP caching for this file too.
 6 |  * See https://goo.gl/nhQhGp
 7 |  *
 8 |  * The rest of the code is auto-generated. Please don't update this file
 9 |  * directly; instead, make changes to your Workbox build configuration
10 |  * and re-run your build process.
11 |  * See https://goo.gl/2aRDsh
12 |  */
13 | 
14 | importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
15 | 
16 | importScripts(
17 |   "./precache-manifest.e348f70e7319498a2e6b3a0c95da5ac1.js"
18 | );
19 | 
20 | self.addEventListener('message', (event) => {
21 |   if (event.data && event.data.type === 'SKIP_WAITING') {
22 |     self.skipWaiting();
23 |   }
24 | });
25 | 
26 | workbox.core.clientsClaim();
27 | 
28 | /**
29 |  * The workboxSW.precacheAndRoute() method efficiently caches and responds to
30 |  * requests for URLs in the manifest.
31 |  * See https://goo.gl/S9QRab
32 |  */
33 | self.__precacheManifest = [].concat(self.__precacheManifest || []);
34 | workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
35 | 
36 | workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("./index.html"), {
37 |   
38 |   blacklist: [/^\/_/,/\/[^/?]+\.[^/]+$/],
39 | });
40 | 


--------------------------------------------------------------------------------
/examples/BaselineChart.py:
--------------------------------------------------------------------------------
 1 | import streamlit as st
 2 | from streamlit_lightweight_charts import renderLightweightCharts
 3 | 
 4 | chartOptions = {
 5 |     "layout": {
 6 |         "textColor": 'black',
 7 |         "background": {
 8 |             "type": 'solid',
 9 |             "color": 'white'
10 |         }
11 |     }
12 | }
13 | 
14 | seriesBaselineChart = [{
15 |     "type": 'Baseline',
16 |     "data": [
17 |         { "value": 1, "time": 1642425322 },
18 |         { "value": 8, "time": 1642511722 },
19 |         { "value": 10, "time": 1642598122 },
20 |         { "value": 20, "time": 1642684522 },
21 |         { "value": 3, "time": 1642770922 },
22 |         { "value": 43, "time": 1642857322 },
23 |         { "value": 41, "time": 1642943722 },
24 |         { "value": 43, "time": 1643030122 },
25 |         { "value": 56, "time": 1643116522 },
26 |         { "value": 46, "time": 1643202922 }
27 |     ],
28 |     "options": {
29 |         "baseValue": { "type": "price", "price": 25 },
30 |         "topLineColor": 'rgba( 38, 166, 154, 1)',
31 |         "topFillColor1": 'rgba( 38, 166, 154, 0.28)',
32 |         "topFillColor2": 'rgba( 38, 166, 154, 0.05)',
33 |         "bottomLineColor": 'rgba( 239, 83, 80, 1)',
34 |         "bottomFillColor1": 'rgba( 239, 83, 80, 0.05)',
35 |         "bottomFillColor2": 'rgba( 239, 83, 80, 0.28)'
36 |     }
37 | }]
38 | 
39 | st.subheader("Baseline Chart sample")
40 | 
41 | renderLightweightCharts([
42 |     {
43 |         "chart": chartOptions,
44 |         "series": seriesBaselineChart
45 |     }
46 | ], 'baseline')


--------------------------------------------------------------------------------
/examples/BarChart.py:
--------------------------------------------------------------------------------
 1 | import streamlit as st
 2 | from streamlit_lightweight_charts import renderLightweightCharts
 3 | 
 4 | chartOptions = {
 5 |     "layout": {
 6 |         "textColor": 'black',
 7 |         "background": {
 8 |             "type": 'solid',
 9 |             "color": 'white'
10 |         }
11 |     }
12 | }
13 | 
14 | seriesBarChart = [{
15 |     "type": 'Bar',
16 |     "data": [
17 |         { "open": 10, "high": 10.63, "low": 9.49, "close": 9.55, "time": 1642427876 },
18 |         { "open": 9.55, "high": 10.30, "low": 9.42, "close": 9.94, "time": 1642514276 },
19 |         { "open": 9.94, "high": 10.17, "low": 9.92, "close": 9.78, "time": 1642600676 },
20 |         { "open": 9.78, "high": 10.59, "low": 9.18, "close": 9.51, "time": 1642687076 },
21 |         { "open": 9.51, "high": 10.46, "low": 9.10, "close": 10.17, "time": 1642773476 },
22 |         { "open": 10.17, "high": 10.96, "low": 10.16, "close": 10.47, "time": 1642859876 },
23 |         { "open": 10.47, "high": 11.39, "low": 10.40, "close": 10.81, "time": 1642946276 },
24 |         { "open": 10.81, "high": 11.60, "low": 10.30, "close": 10.75, "time": 1643032676 },
25 |         { "open": 10.75, "high": 11.60, "low": 10.49, "close": 10.93, "time": 1643119076 },
26 |         { "open": 10.93, "high": 11.53, "low": 10.76, "close": 10.96, "time": 1643205476 }
27 |     ],
28 |     "options": {
29 |         "upColor": '#26a69a',
30 |         "downColor": '#ef5350'
31 |     }
32 | }]
33 | 
34 | st.subheader("Bar Chart sample")
35 | 
36 | renderLightweightCharts([
37 |     {
38 |         "chart": chartOptions,
39 |         "series": seriesBarChart
40 |     }
41 | ], 'bar')


--------------------------------------------------------------------------------
/streamlit_lightweight_charts/frontend/build/static/js/runtime-main.e0d8c599.js:
--------------------------------------------------------------------------------
1 | !function(e){function t(t){for(var n,i,l=t[0],a=t[1],f=t[2],p=0,s=[];p<l.length;p++)i=l[p],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&s.push(o[i][0]),o[i]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(c&&c(t);s.length;)s.shift()();return u.push.apply(u,f||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,l=1;l<r.length;l++){var a=r[l];0!==o[a]&&(n=!1)}n&&(u.splice(t--,1),e=i(i.s=r[0]))}return e}var n={},o={1:0},u=[];function i(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.m=e,i.c=n,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(r,n,function(t){return e[t]}.bind(null,n));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="./";var l=this.webpackJsonpstreamlit_lightweight_charts=this.webpackJsonpstreamlit_lightweight_charts||[],a=l.push.bind(l);l.push=t,l=l.slice();for(var f=0;f<l.length;f++)t(l[f]);var c=a;r()}([]);
2 | //# sourceMappingURL=runtime-main.e0d8c599.js.map


--------------------------------------------------------------------------------
/examples/CandlestickChart.py:
--------------------------------------------------------------------------------
 1 | import streamlit as st
 2 | from streamlit_lightweight_charts import renderLightweightCharts
 3 | 
 4 | chartOptions = {
 5 |     "layout": {
 6 |         "textColor": 'black',
 7 |         "background": {
 8 |             "type": 'solid',
 9 |             "color": 'white'
10 |         }
11 |     }
12 | }
13 | 
14 | seriesCandlestickChart = [{
15 |     "type": 'Candlestick',
16 |     "data": [
17 |         { "open": 10, "high": 10.63, "low": 9.49, "close": 9.55, "time": 1642427876 },
18 |         { "open": 9.55, "high": 10.30, "low": 9.42, "close": 9.94, "time": 1642514276 },
19 |         { "open": 9.94, "high": 10.17, "low": 9.92, "close": 9.78, "time": 1642600676 },
20 |         { "open": 9.78, "high": 10.59, "low": 9.18, "close": 9.51, "time": 1642687076 },
21 |         { "open": 9.51, "high": 10.46, "low": 9.10, "close": 10.17, "time": 1642773476 },
22 |         { "open": 10.17, "high": 10.96, "low": 10.16, "close": 10.47, "time": 1642859876 },
23 |         { "open": 10.47, "high": 11.39, "low": 10.40, "close": 10.81, "time": 1642946276 },
24 |         { "open": 10.81, "high": 11.60, "low": 10.30, "close": 10.75, "time": 1643032676 },
25 |         { "open": 10.75, "high": 11.60, "low": 10.49, "close": 10.93, "time": 1643119076 },
26 |         { "open": 10.93, "high": 11.53, "low": 10.76, "close": 10.96, "time": 1643205476 }
27 |     ],
28 |     "options": {
29 |         "upColor": '#26a69a',
30 |         "downColor": '#ef5350',
31 |         "borderVisible": False,
32 |         "wickUpColor": '#26a69a',
33 |         "wickDownColor": '#ef5350'
34 |     }
35 | }]
36 | 
37 | st.subheader("Candlestick Chart sample")
38 | 
39 | renderLightweightCharts([
40 |     {
41 |         "chart": chartOptions,
42 |         "series": seriesCandlestickChart
43 |     }
44 | ], 'candlestick')


--------------------------------------------------------------------------------
/streamlit_lightweight_charts/frontend/build/index.html:
--------------------------------------------------------------------------------
1 | <!doctype html><html lang="en"><head><title>Streamlit Component</title><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Streamlit Component"/></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function t(t){for(var n,i,l=t[0],a=t[1],f=t[2],p=0,s=[];p<l.length;p++)i=l[p],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&s.push(o[i][0]),o[i]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(c&&c(t);s.length;)s.shift()();return u.push.apply(u,f||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,l=1;l<r.length;l++){var a=r[l];0!==o[a]&&(n=!1)}n&&(u.splice(t--,1),e=i(i.s=r[0]))}return e}var n={},o={1:0},u=[];function i(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.m=e,i.c=n,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(r,n,function(t){return e[t]}.bind(null,n));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="./";var l=this.webpackJsonpstreamlit_lightweight_charts=this.webpackJsonpstreamlit_lightweight_charts||[],a=l.push.bind(l);l.push=t,l=l.slice();for(var f=0;f<l.length;f++)t(l[f]);var c=a;r()}([])</script><script src="./static/js/2.70acfc76.chunk.js"></script><script src="./static/js/main.509cd3c1.chunk.js"></script></body></html>


--------------------------------------------------------------------------------
/examples/PriceVolumeChart.py:
--------------------------------------------------------------------------------
 1 | import streamlit as st
 2 | from streamlit_lightweight_charts import renderLightweightCharts
 3 | import streamlit_lightweight_charts.dataSamples as data
 4 | 
 5 | priceVolumeChartOptions = {
 6 |     "height": 400,
 7 |     "rightPriceScale": {
 8 |         "scaleMargins": {
 9 |             "top": 0.2,
10 |             "bottom": 0.25,
11 |         },
12 |         "borderVisible": False,
13 |     },
14 |     "overlayPriceScales": {
15 |         "scaleMargins": {
16 |             "top": 0.7,
17 |             "bottom": 0,
18 |         }
19 |     },
20 |     "layout": {
21 |         "background": {
22 |             "type": 'solid',
23 |             "color": '#131722'
24 |         },
25 |         "textColor": '#d1d4dc',
26 |     },
27 |     "grid": {
28 |         "vertLines": {
29 |             "color": 'rgba(42, 46, 57, 0)',
30 |         },
31 |         "horzLines": {
32 |             "color": 'rgba(42, 46, 57, 0.6)',
33 |         }
34 |     }
35 | }
36 | 
37 | priceVolumeSeries = [
38 |     {
39 |         "type": 'Area',
40 |         "data": data.priceVolumeSeriesArea,
41 |         "options": {
42 |             "topColor": 'rgba(38,198,218, 0.56)',
43 |             "bottomColor": 'rgba(38,198,218, 0.04)',
44 |             "lineColor": 'rgba(38,198,218, 1)',
45 |             "lineWidth": 2,
46 |         }
47 |     },
48 |     {
49 |         "type": 'Histogram',
50 |         "data": data.priceVolumeSeriesHistogram,
51 |         "options": {
52 |             "color": '#26a69a',
53 |             "priceFormat": {
54 |                 "type": 'volume',
55 |             },
56 |             "priceScaleId": "" # set as an overlay setting,
57 |         },
58 |         "priceScale": {
59 |             "scaleMargins": {
60 |                 "top": 0.7,
61 |                 "bottom": 0,
62 |             }
63 |         }
64 |     }
65 | ]
66 | st.subheader("Price with Volume Series Chart sample")
67 | 
68 | renderLightweightCharts([
69 |     {
70 |         "chart": priceVolumeChartOptions,
71 |         "series": priceVolumeSeries
72 |     }
73 | ], 'priceAndVolume')
74 | 
75 | 


--------------------------------------------------------------------------------
/streamlit_lightweight_charts/frontend/build/static/js/main.509cd3c1.chunk.js:
--------------------------------------------------------------------------------
1 | (this.webpackJsonpstreamlit_lightweight_charts=this.webpackJsonpstreamlit_lightweight_charts||[]).push([[0],{26:function(e,t,r){e.exports=r(36)},36:function(e,t,r){"use strict";r.r(t);var a=r(10),i=r.n(a),n=r(23),c=r.n(n),o=r(16),s=r(5),l=r(9),u=r(25),f=function(){var e=Object(o.useRenderData)().args.charts,t=Object(a.useRef)(null),r=Array(e.length).fill(Object(a.useRef)(null)),n=Object(a.useRef)([]);return Object(a.useEffect)((function(){if(!r.find((function(e){return!e.current}))){r.forEach((function(t,a){var i,c=n.current[a]=Object(u.a)(t.current,Object(l.a)({height:300,width:r[a].current.clientWidth},e[a].chart)),o=Object(s.a)(e[a].series);try{for(o.s();!(i=o.n()).done;){var f=i.value,d=void 0;switch(f.type){case"Area":d=c.addAreaSeries(f.options);break;case"Bar":d=c.addBarSeries(f.options);break;case"Baseline":d=c.addBaselineSeries(f.options);break;case"Candlestick":d=c.addCandlestickSeries(f.options);break;case"Histogram":d=c.addHistogramSeries(f.options);break;case"Line":d=c.addLineSeries(f.options);break;default:return}f.priceScale&&c.priceScale(f.options.priceScaleId||"").applyOptions(f.priceScale),d.setData(f.data),f.markers&&d.setMarkers(f.markers)}}catch(h){o.e(h)}finally{o.f()}c.timeScale().fitContent()}));var t=n.current.map((function(e){return e}));return e.length>1&&t.forEach((function(e){e&&(e.timeScale().subscribeVisibleTimeRangeChange((function(r){t.filter((function(t){return t!==e})).forEach((function(t){t.timeScale().applyOptions({rightOffset:e.timeScale().scrollPosition()})}))})),e.timeScale().subscribeVisibleLogicalRangeChange((function(r){r&&t.filter((function(t){return t!==e})).forEach((function(e){e.timeScale().setVisibleLogicalRange({from:null===r||void 0===r?void 0:r.from,to:null===r||void 0===r?void 0:r.to})}))})))})),function(){t.forEach((function(e){e.remove()}))}}}),[e,r,n]),i.a.createElement("div",{ref:t},r.map((function(e,t){return i.a.createElement("div",{ref:e,id:"lightweight-charts-".concat(t),key:"lightweight-charts-".concat(t)})})))};c.a.render(i.a.createElement(i.a.StrictMode,null,i.a.createElement(o.StreamlitProvider,null,i.a.createElement(f,null))),document.getElementById("root"))}},[[26,1,2]]]);
2 | //# sourceMappingURL=main.509cd3c1.chunk.js.map


--------------------------------------------------------------------------------
/streamlit_lightweight_charts/frontend/build/static/js/2.70acfc76.chunk.js.LICENSE.txt:
--------------------------------------------------------------------------------
 1 | /*
 2 | object-assign
 3 | (c) Sindre Sorhus
 4 | @license MIT
 5 | */
 6 | 
 7 | /*!
 8 |  * @license
 9 |  * TradingView Lightweight Charts v4.0.0
10 |  * Copyright (c) 2023 TradingView, Inc.
11 |  * Licensed under Apache License 2.0 https://www.apache.org/licenses/LICENSE-2.0
12 |  */
13 | 
14 | /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
15 | 
16 | /**
17 |  * @license
18 |  * Copyright 2018-2021 Streamlit Inc.
19 |  *
20 |  * Licensed under the Apache License, Version 2.0 (the "License");
21 |  * you may not use this file except in compliance with the License.
22 |  * You may obtain a copy of the License at
23 |  *
24 |  *    http://www.apache.org/licenses/LICENSE-2.0
25 |  *
26 |  * Unless required by applicable law or agreed to in writing, software
27 |  * distributed under the License is distributed on an "AS IS" BASIS,
28 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
29 |  * See the License for the specific language governing permissions and
30 |  * limitations under the License.
31 |  */
32 | 
33 | /** @license React v0.19.1
34 |  * scheduler.production.min.js
35 |  *
36 |  * Copyright (c) Facebook, Inc. and its affiliates.
37 |  *
38 |  * This source code is licensed under the MIT license found in the
39 |  * LICENSE file in the root directory of this source tree.
40 |  */
41 | 
42 | /** @license React v16.13.1
43 |  * react-is.production.min.js
44 |  *
45 |  * Copyright (c) Facebook, Inc. and its affiliates.
46 |  *
47 |  * This source code is licensed under the MIT license found in the
48 |  * LICENSE file in the root directory of this source tree.
49 |  */
50 | 
51 | /** @license React v16.14.0
52 |  * react-dom.production.min.js
53 |  *
54 |  * Copyright (c) Facebook, Inc. and its affiliates.
55 |  *
56 |  * This source code is licensed under the MIT license found in the
57 |  * LICENSE file in the root directory of this source tree.
58 |  */
59 | 
60 | /** @license React v16.14.0
61 |  * react-jsx-runtime.production.min.js
62 |  *
63 |  * Copyright (c) Facebook, Inc. and its affiliates.
64 |  *
65 |  * This source code is licensed under the MIT license found in the
66 |  * LICENSE file in the root directory of this source tree.
67 |  */
68 | 
69 | /** @license React v16.14.0
70 |  * react.production.min.js
71 |  *
72 |  * Copyright (c) Facebook, Inc. and its affiliates.
73 |  *
74 |  * This source code is licensed under the MIT license found in the
75 |  * LICENSE file in the root directory of this source tree.
76 |  */
77 | 


--------------------------------------------------------------------------------
/examples/OverlaidAreasChart.py:
--------------------------------------------------------------------------------
 1 | import streamlit as st
 2 | from streamlit_lightweight_charts import renderLightweightCharts
 3 | import streamlit_lightweight_charts.dataSamples as data
 4 | 
 5 | overlaidAreaSeriesOptions = {
 6 |     "height": 400,
 7 |     "rightPriceScale": {
 8 |         "scaleMargins": {
 9 |             "top": 0.1,
10 |             "bottom": 0.1,
11 |         },
12 |         "mode": 2, # PriceScaleMode: 0-Normal, 1-Logarithmic, 2-Percentage, 3-IndexedTo100
13 |         "borderColor": 'rgba(197, 203, 206, 0.4)',
14 |     },
15 |     "timeScale": {
16 |         "borderColor": 'rgba(197, 203, 206, 0.4)',
17 |     },
18 |     "layout": {
19 |         "background": {
20 |             "type": 'solid',
21 |             "color": '#100841'
22 |         },
23 |         "textColor": '#ffffff',
24 |     },
25 |     "grid": {
26 |         "vertLines": {
27 |             "color": 'rgba(197, 203, 206, 0.4)',
28 |             "style": 1, # LineStyle: 0-Solid, 1-Dotted, 2-Dashed, 3-LargeDashed
29 |         },
30 |         "horzLines": {
31 |             "color": 'rgba(197, 203, 206, 0.4)',
32 |             "style": 1, # LineStyle: 0-Solid, 1-Dotted, 2-Dashed, 3-LargeDashed
33 |         }
34 |     }
35 | }
36 | 
37 | seriesOverlaidChart = [
38 |     {
39 |         "type": 'Area',
40 |         "data": data.seriesMultipleChartArea01,
41 |         "options": {
42 |             "topColor": 'rgba(255, 192, 0, 0.7)',
43 |             "bottomColor": 'rgba(255, 192, 0, 0.3)',
44 |             "lineColor": 'rgba(255, 192, 0, 1)',
45 |             "lineWidth": 2,
46 |         },
47 |         "markers": [
48 |             {
49 |                 "time": '2019-04-08',
50 |                 "position": 'aboveBar',
51 |                 "color": 'rgba(255, 192, 0, 1)',
52 |                 "shape": 'arrowDown',
53 |                 "text": 'H',
54 |                 "size": 3
55 |             },
56 |             {
57 |                 "time": '2019-05-13',
58 |                 "position": 'belowBar',
59 |                 "color": 'rgba(255, 192, 0, 1)',
60 |                 "shape": 'arrowUp',
61 |                 "text": 'L',
62 |                 "size": 3
63 |             },
64 |         ]
65 |     },
66 |     {
67 |         "type": 'Area',
68 |         "data": data.seriesMultipleChartArea02,
69 |         "options": {
70 |             "topColor": 'rgba(67, 83, 254, 0.7)',
71 |             "bottomColor": 'rgba(67, 83, 254, 0.3)',
72 |             "lineColor": 'rgba(67, 83, 254, 1)',
73 |             "lineWidth": 2,
74 |         },
75 |         "markers": [
76 |             {
77 |                 "time": '2019-05-03',
78 |                 "position": 'aboveBar',
79 |                 "color": 'rgba(67, 83, 254, 1)',
80 |                 "shape": 'arrowDown',
81 |                 "text": 'PEAK',
82 |                 "size": 3
83 |             },
84 |         ]
85 |     }
86 | ]
87 | st.subheader("Overlaid Series with Markers")
88 | 
89 | renderLightweightCharts([
90 |     {
91 |         "chart": overlaidAreaSeriesOptions,
92 |         "series": seriesOverlaidChart
93 |     }
94 | ], 'overlaid')
95 | 


--------------------------------------------------------------------------------
/examples/MultiPaneChart.py:
--------------------------------------------------------------------------------
  1 | import streamlit as st
  2 | from streamlit_lightweight_charts import renderLightweightCharts
  3 | import streamlit_lightweight_charts.dataSamples as data
  4 | 
  5 | chartMultipaneOptions = [
  6 |     {
  7 |         "width": 600,
  8 |         "height": 400,
  9 |         "layout": {
 10 |             "background": {
 11 |                 "type": "solid",
 12 |                 "color": 'white'
 13 |             },
 14 |             "textColor": "black"
 15 |         },
 16 |         "grid": {
 17 |             "vertLines": {
 18 |                 "color": "rgba(197, 203, 206, 0.5)"
 19 |                 },
 20 |             "horzLines": {
 21 |                 "color": "rgba(197, 203, 206, 0.5)"
 22 |             }
 23 |         },
 24 |         "crosshair": {
 25 |             "mode": 0
 26 |         },
 27 |         "priceScale": {
 28 |             "borderColor": "rgba(197, 203, 206, 0.8)"
 29 |         },
 30 |         "timeScale": {
 31 |             "borderColor": "rgba(197, 203, 206, 0.8)",
 32 |             "barSpacing": 15
 33 |         },
 34 |         "watermark": {
 35 |             "visible": True,
 36 |             "fontSize": 48,
 37 |             "horzAlign": 'center',
 38 |             "vertAlign": 'center',
 39 |             "color": 'rgba(171, 71, 188, 0.3)',
 40 |             "text": 'Watermark Price',
 41 |         }
 42 |     },
 43 |     {
 44 |         "width": 600,
 45 |         "height": 100,
 46 |         "crosshair": {
 47 |             "mode": 0
 48 |         },
 49 |         "layout": {
 50 |             "background": {
 51 |                 "type": 'solid',
 52 |                 "color": 'transparent'
 53 |             },
 54 |             "textColor": 'black',
 55 |         },
 56 |         "grid": {
 57 |             "vertLines": {
 58 |                 "color": 'rgba(42, 46, 57, 0)',
 59 |             },
 60 |             "horzLines": {
 61 |                 "color": 'rgba(42, 46, 57, 0.6)',
 62 |             }
 63 |         },
 64 |         "timeScale": {
 65 |             "visible": False,
 66 |         }
 67 |     },
 68 |     {
 69 |         "width": 600,
 70 |         "height": 200,
 71 |         "layout": {
 72 |             "background": {
 73 |                 "type": "solid",
 74 |                 "color": 'white'
 75 |             },
 76 |             "textColor": "black"
 77 |         },
 78 |         "timeScale": {
 79 |             "visible": False,
 80 |         }
 81 |     }
 82 | 
 83 | ]
 84 | 
 85 | seriesCandlestickChart = [
 86 |     {
 87 |         "type": 'Candlestick',
 88 |         "data": data.priceCandlestickMultipane,
 89 |         "options": {
 90 |             "upColor": '#26a69a',
 91 |             "downColor": '#ef5350',
 92 |             "borderVisible": False,
 93 |             "wickUpColor": '#26a69a',
 94 |             "wickDownColor": '#ef5350'
 95 |         }
 96 |     }
 97 | ]
 98 | 
 99 | seriesAreaChart = [
100 |     {
101 |         "type": 'Baseline',
102 |         "data": data.priceBaselineMultipane,
103 |         "options": {
104 |             "baseValue": { "type": "price", "price": 180 },
105 |             "topLineColor": 'rgba( 38, 166, 154, 1)',
106 |             "topFillColor1": 'rgba( 38, 166, 154, 0.28)',
107 |             "topFillColor2": 'rgba( 38, 166, 154, 0.05)',
108 |             "bottomLineColor": 'rgba( 239, 83, 80, 1)',
109 |             "bottomFillColor1": 'rgba( 239, 83, 80, 0.05)',
110 |             "bottomFillColor2": 'rgba( 239, 83, 80, 0.28)'
111 |         }
112 |     }
113 | ]
114 | 
115 | seriesHistogramChart = [
116 |     {
117 |         "type": 'Histogram',
118 |         "data": data.priceVolumeMultipane,
119 |         "options": {
120 |             "color": '#26a69a',
121 |             "priceFormat": {
122 |                 "type": 'volume',
123 |             },
124 |             "priceScaleId": "" # set as an overlay setting,
125 |         },
126 |         "priceScale": {
127 |             "scaleMargins": {
128 |                 "top": 0,
129 |                 "bottom": 0,
130 |             },
131 |             "alignLabels": False
132 |         }
133 |     }
134 | ]
135 | 
136 | st.subheader("Multipane Chart with Watermark")
137 | 
138 | renderLightweightCharts([
139 |     {
140 |         "chart": chartMultipaneOptions[0],
141 |         "series": seriesCandlestickChart
142 |     },
143 |     {
144 |         "chart": chartMultipaneOptions[1],
145 |         "series": seriesHistogramChart
146 |     },
147 |             {
148 |         "chart": chartMultipaneOptions[2],
149 |         "series": seriesAreaChart
150 |     }
151 | ], 'multipane')


--------------------------------------------------------------------------------
/streamlit_lightweight_charts/frontend/src/LightweightCharts.tsx:
--------------------------------------------------------------------------------
  1 | import { useRenderData } from "streamlit-component-lib-react-hooks"
  2 | import {
  3 |   createChart,
  4 |   IChartApi,
  5 | } from "lightweight-charts"
  6 | import React, { useRef, useEffect } from "react"
  7 | 
  8 | const LightweightChartsMultiplePanes: React.VFC = () => {
  9 | 
 10 |   // returns the renderData passed from Python
 11 |   // { args: object, disabled: boolean, theme: object }
 12 |   const renderData = useRenderData()
 13 |   const chartsData = renderData.args["charts"]
 14 | 
 15 |   const chartsContainerRef = useRef<HTMLDivElement>(null)
 16 |   const chartElRefs = Array(chartsData.length).fill(useRef<HTMLDivElement>(null))
 17 |   const chartRefs = useRef<IChartApi[]>([])
 18 | 
 19 |     useEffect(() => {
 20 |       if (chartElRefs.find((ref) => !ref.current)) return;
 21 | 
 22 |       chartElRefs.forEach((ref, i) => {
 23 |         const chart = chartRefs.current[i] = createChart(
 24 |           ref.current as HTMLDivElement,{
 25 |             height: 300,
 26 |             width: chartElRefs[i].current.clientWidth,
 27 |             ...chartsData[i].chart,
 28 |           }
 29 |         );
 30 | 
 31 |         for (const series of chartsData[i].series){
 32 |           
 33 |           let chartSeries
 34 |           switch(series.type) {
 35 |             case 'Area':
 36 |               chartSeries = chart.addAreaSeries(series.options)
 37 |               break
 38 |             case 'Bar':
 39 |               chartSeries = chart.addBarSeries(series.options )
 40 |               break
 41 |             case 'Baseline':
 42 |               chartSeries = chart.addBaselineSeries(series.options)
 43 |               break
 44 |             case 'Candlestick':
 45 |               chartSeries = chart.addCandlestickSeries(series.options)
 46 |               break
 47 |             case 'Histogram':
 48 |               chartSeries = chart.addHistogramSeries(series.options)
 49 |               break
 50 |             case 'Line':
 51 |               chartSeries = chart.addLineSeries(series.options)
 52 |               break
 53 |             default:
 54 |                 return
 55 |           }
 56 | 
 57 |           if(series.priceScale)
 58 |             chart.priceScale(series.options.priceScaleId || '').applyOptions(series.priceScale)
 59 | 
 60 |           chartSeries.setData(series.data)
 61 | 
 62 |           if(series.markers)
 63 |             chartSeries.setMarkers(series.markers)
 64 | 
 65 |         }
 66 | 
 67 |         chart.timeScale().fitContent();
 68 | 
 69 |       })
 70 |   
 71 |       const charts = chartRefs.current.map((c) => c as IChartApi);
 72 |       
 73 |       if(chartsData.length > 1){ // sync charts
 74 |         charts.forEach((chart) => {
 75 |           if (!chart) return;
 76 | 
 77 |           chart.timeScale().subscribeVisibleTimeRangeChange((e) => {
 78 |             charts
 79 |               .filter((c) => c !== chart)
 80 |               .forEach((c) => {
 81 |                 c.timeScale().applyOptions({
 82 |                   rightOffset: chart.timeScale().scrollPosition()
 83 |           }) }) })
 84 | 
 85 |           chart.timeScale().subscribeVisibleLogicalRangeChange((range) => {
 86 |             if (range) {
 87 |               charts
 88 |                 .filter((c) => c !== chart)
 89 |                 .forEach((c) => {
 90 |                   c.timeScale().setVisibleLogicalRange({
 91 |                     from: range?.from,
 92 |                     to: range?.to
 93 |           }) }) } })
 94 | 
 95 |           // chart.subscribeCrosshairMove((handler) => {
 96 |           //   charts
 97 |           //     .filter((c) => c !== chart)
 98 |           //     .forEach((c) => {
 99 |           //       // if (handler.time !== undefined) {
100 |           //       //   var xx = c.timeScale().timeToCoordinate(handler.time);
101 |           //       //   c.setCrossHairXY(xx,50,true);
102 |           //       // } else if (handler.point !== undefined){
103 |           //       //   c.setCrossHairXY(handler.point.x,10,false);
104 |           //       // }
105 |           //       // c.timeScale().applyOptions({
106 |           //       //   rightOffset: chart.timeScale().scrollPosition()
107 |           //       // })
108 |           //       console.log('handler',handler)
109 |           //       if (handler.time !== undefined) {
110 |           //         const xx = c.timeScale().timeToCoordinate(handler.time);
111 |           //         if(xx) c.timeScale().scrollToPosition(xx,true)
112 |           //         console.log('const xx',xx)
113 |           //       }
114 |           //     })
115 |           // })
116 | 
117 |       }) }
118 | 
119 |       // const handleResize = () => {
120 |       //   chart.applyOptions({ width: chartsContainerRef?.current?.clientWidth })
121 |       // }
122 |       // window.addEventListener('resize', handleResize)
123 |       return () => { // required because how useEffect() works
124 |         charts.forEach((chart) => {
125 |           chart.remove()
126 |         })
127 |       }
128 | 
129 |     }, [ chartsData, chartElRefs, chartRefs])
130 | 
131 | 
132 |     return (
133 |       <div ref={chartsContainerRef}>
134 |         {chartElRefs.map((ref, i) => (
135 |           <div
136 |             ref={ref}
137 |             id={`lightweight-charts-${i}`}
138 |             key={`lightweight-charts-${i}`}
139 |           />
140 |         ))}
141 |       </div>
142 |     )
143 | 
144 | }
145 | 
146 | export default LightweightChartsMultiplePanes
147 | 


--------------------------------------------------------------------------------
/examples/MultiPaneChartsWithPandas.py:
--------------------------------------------------------------------------------
  1 | import streamlit as st
  2 | from streamlit_lightweight_charts import renderLightweightCharts
  3 | 
  4 | import json
  5 | import numpy as np
  6 | import yfinance as yf
  7 | import pandas as pd
  8 | import pandas_ta as ta
  9 | 
 10 | COLOR_BULL = 'rgba(38,166,154,0.9)' # #26a69a
 11 | COLOR_BEAR = 'rgba(239,83,80,0.9)'  # #ef5350
 12 | 
 13 | # Request historic pricing data via finance.yahoo.com API
 14 | df = yf.Ticker('AAPL').history(period='4mo')[['Open', 'High', 'Low', 'Close', 'Volume']]
 15 | 
 16 | # Some data wrangling to match required format
 17 | df = df.reset_index()
 18 | df.columns = ['time','open','high','low','close','volume']                  # rename columns
 19 | df['time'] = df['time'].dt.strftime('%Y-%m-%d')                             # Date to string
 20 | df['color'] = np.where(  df['open'] > df['close'], COLOR_BEAR, COLOR_BULL)  # bull or bear
 21 | df.ta.macd(close='close', fast=6, slow=12, signal=5, append=True)           # calculate macd
 22 | 
 23 | # export to JSON format
 24 | candles = json.loads(df.to_json(orient = "records"))
 25 | volume = json.loads(df.rename(columns={"volume": "value",}).to_json(orient = "records"))
 26 | macd_fast = json.loads(df.rename(columns={"MACDh_6_12_5": "value"}).to_json(orient = "records"))
 27 | macd_slow = json.loads(df.rename(columns={"MACDs_6_12_5": "value"}).to_json(orient = "records"))
 28 | df['color'] = np.where(  df['MACD_6_12_5'] > 0, COLOR_BULL, COLOR_BEAR)  # MACD histogram color
 29 | macd_hist = json.loads(df.rename(columns={"MACD_6_12_5": "value"}).to_json(orient = "records"))
 30 | 
 31 | 
 32 | chartMultipaneOptions = [
 33 |     {
 34 |         "width": 600,
 35 |         "height": 400,
 36 |         "layout": {
 37 |             "background": {
 38 |                 "type": "solid",
 39 |                 "color": 'white'
 40 |             },
 41 |             "textColor": "black"
 42 |         },
 43 |         "grid": {
 44 |             "vertLines": {
 45 |                 "color": "rgba(197, 203, 206, 0.5)"
 46 |                 },
 47 |             "horzLines": {
 48 |                 "color": "rgba(197, 203, 206, 0.5)"
 49 |             }
 50 |         },
 51 |         "crosshair": {
 52 |             "mode": 0
 53 |         },
 54 |         "priceScale": {
 55 |             "borderColor": "rgba(197, 203, 206, 0.8)"
 56 |         },
 57 |         "timeScale": {
 58 |             "borderColor": "rgba(197, 203, 206, 0.8)",
 59 |             "barSpacing": 10,
 60 |             "minBarSpacing": 8
 61 |         },
 62 |         "watermark": {
 63 |             "visible": True,
 64 |             "fontSize": 48,
 65 |             "horzAlign": 'center',
 66 |             "vertAlign": 'center',
 67 |             "color": 'rgba(171, 71, 188, 0.3)',
 68 |             "text": 'AAPL - D1',
 69 |         }
 70 |     },
 71 |     {
 72 |         "width": 600,
 73 |         "height": 100,
 74 |         # "crosshair": {
 75 |         #     "mode": 0
 76 |         # },
 77 |         "layout": {
 78 |             "background": {
 79 |                 "type": 'solid',
 80 |                 "color": 'transparent'
 81 |             },
 82 |             "textColor": 'black',
 83 |         },
 84 |         "grid": {
 85 |             "vertLines": {
 86 |                 "color": 'rgba(42, 46, 57, 0)',
 87 |             },
 88 |             "horzLines": {
 89 |                 "color": 'rgba(42, 46, 57, 0.6)',
 90 |             }
 91 |         },
 92 |         "timeScale": {
 93 |             "visible": False,
 94 |         },
 95 |         "watermark": {
 96 |             "visible": True,
 97 |             "fontSize": 18,
 98 |             "horzAlign": 'left',
 99 |             "vertAlign": 'top',
100 |             "color": 'rgba(171, 71, 188, 0.7)',
101 |             "text": 'Volume',
102 |         }
103 |     },
104 |     {
105 |         "width": 600,
106 |         "height": 200,
107 |         "layout": {
108 |             "background": {
109 |                 "type": "solid",
110 |                 "color": 'white'
111 |             },
112 |             "textColor": "black"
113 |         },
114 |         "timeScale": {
115 |             "visible": False,
116 |         },
117 |         "watermark": {
118 |             "visible": True,
119 |             "fontSize": 18,
120 |             "horzAlign": 'left',
121 |             "vertAlign": 'center',
122 |             "color": 'rgba(171, 71, 188, 0.7)',
123 |             "text": 'MACD',
124 |         }
125 |     }
126 | ]
127 | 
128 | seriesCandlestickChart = [
129 |     {
130 |         "type": 'Candlestick',
131 |         "data": candles,
132 |         "options": {
133 |             "upColor": COLOR_BULL,
134 |             "downColor": COLOR_BEAR,
135 |             "borderVisible": False,
136 |             "wickUpColor": COLOR_BULL,
137 |             "wickDownColor": COLOR_BEAR
138 |         }
139 |     }
140 | ]
141 | 
142 | seriesVolumeChart = [
143 |     {
144 |         "type": 'Histogram',
145 |         "data": volume,
146 |         "options": {
147 |             "priceFormat": {
148 |                 "type": 'volume',
149 |             },
150 |             "priceScaleId": "" # set as an overlay setting,
151 |         },
152 |         "priceScale": {
153 |             "scaleMargins": {
154 |                 "top": 0,
155 |                 "bottom": 0,
156 |             },
157 |             "alignLabels": False
158 |         }
159 |     }
160 | ]
161 | 
162 | seriesMACDchart = [
163 |     {
164 |         "type": 'Line',
165 |         "data": macd_fast,
166 |         "options": {
167 |             "color": 'blue',
168 |             "lineWidth": 2
169 |         }
170 |     },
171 |     {
172 |         "type": 'Line',
173 |         "data": macd_slow,
174 |         "options": {
175 |             "color": 'green',
176 |             "lineWidth": 2
177 |         }
178 |     },
179 |     {
180 |         "type": 'Histogram',
181 |         "data": macd_hist,
182 |         "options": {
183 |             "color": 'red',
184 |             "lineWidth": 1
185 |         }
186 |     }
187 | ]
188 | 
189 | st.subheader("Multipane Chart with Pandas")
190 | 
191 | renderLightweightCharts([
192 |     {
193 |         "chart": chartMultipaneOptions[0],
194 |         "series": seriesCandlestickChart
195 |     },
196 |     {
197 |         "chart": chartMultipaneOptions[1],
198 |         "series": seriesVolumeChart
199 |     },
200 |     {
201 |         "chart": chartMultipaneOptions[2],
202 |         "series": seriesMACDchart
203 |     }
204 | ], 'multipane')


--------------------------------------------------------------------------------
/examples/MultiPaneChartsFromCSV.py:
--------------------------------------------------------------------------------
  1 | import streamlit as st
  2 | from streamlit_lightweight_charts import renderLightweightCharts
  3 | 
  4 | import json
  5 | import numpy as np
  6 | import pandas as pd
  7 | 
  8 | COLOR_BULL = 'rgba(38,166,154,0.9)' # #26a69a
  9 | COLOR_BEAR = 'rgba(239,83,80,0.9)'  # #ef5350
 10 | 
 11 | CSVFILE = 'https://github.com/freyastreamlit/streamlit-lightweight-charts/blob/main/examples/MultiPaneChartsFromCSV.csv?raw=true'
 12 | 
 13 | df = pd.read_csv(CSVFILE, skiprows=0, parse_dates=['datetime'], skip_blank_lines=True)
 14 | 
 15 | df['time'] = df['datetime'].view('int64') // 10**9  # We will use time in UNIX timestamp
 16 | df['color'] = np.where(  df['open'] > df['close'], COLOR_BEAR, COLOR_BULL)  # bull or bear
 17 | 
 18 | # export to JSON format
 19 | candles = json.loads(
 20 |     df.filter(['time','open','high','low','close'], axis=1)
 21 |       .to_json(orient = "records") )
 22 | 
 23 | volume = json.loads(
 24 |     df.filter(['time','volume'], axis=1)
 25 |       .rename(columns={"volume": "value",})
 26 |       .to_json(orient = "records") )
 27 | 
 28 | macd_fast = json.loads(
 29 |     df.filter(['time','macd_fast'], axis=1)
 30 |       .rename(columns={"macd_fast": "value"})
 31 |       .to_json(orient = "records"))
 32 | 
 33 | macd_slow = json.loads(
 34 |     df.filter(['time','macd_slow'], axis=1)
 35 |       .rename(columns={"macd_slow": "value"})
 36 |       .to_json(orient = "records"))
 37 | 
 38 | df['color'] = np.where(  df['macd_hist'] > 0, COLOR_BULL, COLOR_BEAR)  # MACD histogram color
 39 | macd_hist = json.loads(
 40 |     df.filter(['time','macd_hist'], axis=1)
 41 |       .rename(columns={"macd_hist": "value"})
 42 |       .to_json(orient = "records"))
 43 | 
 44 | chartMultipaneOptions = [
 45 |     {
 46 |         "width": 600,
 47 |         "height": 400,
 48 |         "layout": {
 49 |             "background": {
 50 |                 "type": "solid",
 51 |                 "color": 'white'
 52 |             },
 53 |             "textColor": "black"
 54 |         },
 55 |         "grid": {
 56 |             "vertLines": {
 57 |                 "color": "rgba(197, 203, 206, 0.5)"
 58 |                 },
 59 |             "horzLines": {
 60 |                 "color": "rgba(197, 203, 206, 0.5)"
 61 |             }
 62 |         },
 63 |         "crosshair": {
 64 |             "mode": 0
 65 |         },
 66 |         "priceScale": {
 67 |             "borderColor": "rgba(197, 203, 206, 0.8)"
 68 |         },
 69 |         "timeScale": {
 70 |             "borderColor": "rgba(197, 203, 206, 0.8)",
 71 |             "barSpacing": 10,
 72 |             "minBarSpacing": 8,
 73 |             "timeVisible": True,
 74 |             "secondsVisible": False,
 75 |         },
 76 |         "watermark": {
 77 |             "visible": True,
 78 |             "fontSize": 48,
 79 |             "horzAlign": 'center',
 80 |             "vertAlign": 'center',
 81 |             "color": 'rgba(171, 71, 188, 0.3)',
 82 |             "text": 'Intraday',
 83 |         }
 84 |     },
 85 |     {
 86 |         "width": 600,
 87 |         "height": 100,
 88 |         "layout": {
 89 |             "background": {
 90 |                 "type": 'solid',
 91 |                 "color": 'transparent'
 92 |             },
 93 |             "textColor": 'black',
 94 |         },
 95 |         "grid": {
 96 |             "vertLines": {
 97 |                 "color": 'rgba(42, 46, 57, 0)',
 98 |             },
 99 |             "horzLines": {
100 |                 "color": 'rgba(42, 46, 57, 0.6)',
101 |             }
102 |         },
103 |         "timeScale": {
104 |             "visible": False,
105 |         },
106 |         "watermark": {
107 |             "visible": True,
108 |             "fontSize": 18,
109 |             "horzAlign": 'left',
110 |             "vertAlign": 'top',
111 |             "color": 'rgba(171, 71, 188, 0.7)',
112 |             "text": 'Volume',
113 |         }
114 |     },
115 |     {
116 |         "width": 600,
117 |         "height": 200,
118 |         "layout": {
119 |             "background": {
120 |                 "type": "solid",
121 |                 "color": 'white'
122 |             },
123 |             "textColor": "black"
124 |         },
125 |         "timeScale": {
126 |             "visible": False,
127 |         },
128 |         "watermark": {
129 |             "visible": True,
130 |             "fontSize": 18,
131 |             "horzAlign": 'left',
132 |             "vertAlign": 'center',
133 |             "color": 'rgba(171, 71, 188, 0.7)',
134 |             "text": 'MACD',
135 |         }
136 |     }
137 | ]
138 | 
139 | seriesCandlestickChart = [
140 |     {
141 |         "type": 'Candlestick',
142 |         "data": candles,
143 |         "options": {
144 |             "upColor": COLOR_BULL,
145 |             "downColor": COLOR_BEAR,
146 |             "borderVisible": False,
147 |             "wickUpColor": COLOR_BULL,
148 |             "wickDownColor": COLOR_BEAR
149 |         }
150 |     }
151 | ]
152 | 
153 | seriesVolumeChart = [
154 |     {
155 |         "type": 'Histogram',
156 |         "data": volume,
157 |         "options": {
158 |             "priceFormat": {
159 |                 "type": 'volume',
160 |             },
161 |             "priceScaleId": "" # set as an overlay setting,
162 |         },
163 |         "priceScale": {
164 |             "scaleMargins": {
165 |                 "top": 0,
166 |                 "bottom": 0,
167 |             },
168 |             "alignLabels": False
169 |         }
170 |     }
171 | ]
172 | 
173 | seriesMACDchart = [
174 |     {
175 |         "type": 'Line',
176 |         "data": macd_fast,
177 |         "options": {
178 |             "color": 'blue',
179 |             "lineWidth": 2
180 |         }
181 |     },
182 |     {
183 |         "type": 'Line',
184 |         "data": macd_slow,
185 |         "options": {
186 |             "color": 'green',
187 |             "lineWidth": 2
188 |         }
189 |     },
190 |     {
191 |         "type": 'Histogram',
192 |         "data": macd_hist,
193 |         "options": {
194 |             # "color": 'red',
195 |             "lineWidth": 1
196 |         }
197 |     }
198 | ]
199 | 
200 | st.subheader("Multipane Chart (intraday) from CSV")
201 | 
202 | renderLightweightCharts([
203 |     {
204 |         "chart": chartMultipaneOptions[0],
205 |         "series": seriesCandlestickChart
206 |     },
207 |     {
208 |         "chart": chartMultipaneOptions[1],
209 |         "series": seriesVolumeChart
210 |     },
211 |     {
212 |         "chart": chartMultipaneOptions[2],
213 |         "series": seriesMACDchart
214 |     }
215 | ], 'multipane')


--------------------------------------------------------------------------------
/streamlit_lightweight_charts/frontend/build/static/js/main.509cd3c1.chunk.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["LightweightCharts.tsx","index.tsx"],"names":["LightweightChartsMultiplePanes","chartsData","useRenderData","args","chartsContainerRef","useRef","chartElRefs","Array","length","fill","chartRefs","useEffect","find","ref","current","forEach","i","_step","chart","createChart","_objectSpread","height","width","clientWidth","_iterator","_createForOfIteratorHelper","series","s","n","done","value","chartSeries","type","addAreaSeries","options","addBarSeries","addBaselineSeries","addCandlestickSeries","addHistogramSeries","addLineSeries","priceScale","priceScaleId","applyOptions","setData","data","markers","setMarkers","err","e","f","timeScale","fitContent","charts","map","c","subscribeVisibleTimeRangeChange","filter","rightOffset","scrollPosition","subscribeVisibleLogicalRangeChange","range","setVisibleLogicalRange","from","to","remove","React","createElement","id","concat","key","ReactDOM","render","StrictMode","StreamlitProvider","LightweightCharts","document","getElementById"],"mappings":"4PAiJeA,EA1ImC,WAIhD,IACMC,EADaC,0BACWC,KAAa,OAErCC,EAAqBC,iBAAuB,MAC5CC,EAAcC,MAAMN,EAAWO,QAAQC,KAAKJ,iBAAuB,OACnEK,EAAYL,iBAAoB,IAmHpC,OAjHAM,qBAAU,WACR,IAAIL,EAAYM,MAAK,SAACC,GAAG,OAAMA,EAAIC,WAAnC,CAEAR,EAAYS,SAAQ,SAACF,EAAKG,GACxB,IAQyCC,EARnCC,EAAQR,EAAUI,QAAQE,GAAKG,YACnCN,EAAIC,QAAOM,YAAA,CACTC,OAAQ,IACRC,MAAOhB,EAAYU,GAAGF,QAAQS,aAC3BtB,EAAWe,GAAGE,QAEnBM,EAAAC,YAEmBxB,EAAWe,GAAGU,QAAM,IAAzC,IAAAF,EAAAG,MAAAV,EAAAO,EAAAI,KAAAC,MAA0C,CAAC,IAAhCH,EAAMT,EAAAa,MAEXC,OAAW,EACf,OAAOL,EAAOM,MACZ,IAAK,OACHD,EAAcb,EAAMe,cAAcP,EAAOQ,SACzC,MACF,IAAK,MACHH,EAAcb,EAAMiB,aAAaT,EAAOQ,SACxC,MACF,IAAK,WACHH,EAAcb,EAAMkB,kBAAkBV,EAAOQ,SAC7C,MACF,IAAK,cACHH,EAAcb,EAAMmB,qBAAqBX,EAAOQ,SAChD,MACF,IAAK,YACHH,EAAcb,EAAMoB,mBAAmBZ,EAAOQ,SAC9C,MACF,IAAK,OACHH,EAAcb,EAAMqB,cAAcb,EAAOQ,SACzC,MACF,QACI,OAGHR,EAAOc,YACRtB,EAAMsB,WAAWd,EAAOQ,QAAQO,cAAgB,IAAIC,aAAahB,EAAOc,YAE1ET,EAAYY,QAAQjB,EAAOkB,MAExBlB,EAAOmB,SACRd,EAAYe,WAAWpB,EAAOmB,UAEjC,MAAAE,GAAAvB,EAAAwB,EAAAD,GAAA,QAAAvB,EAAAyB,IAED/B,EAAMgC,YAAYC,gBAIpB,IAAMC,EAAS1C,EAAUI,QAAQuC,KAAI,SAACC,GAAC,OAAKA,KAoD5C,OAlDGrD,EAAWO,OAAS,GACrB4C,EAAOrC,SAAQ,SAACG,GACTA,IAELA,EAAMgC,YAAYK,iCAAgC,SAACP,GACjDI,EACGI,QAAO,SAACF,GAAC,OAAKA,IAAMpC,KACpBH,SAAQ,SAACuC,GACRA,EAAEJ,YAAYR,aAAa,CACzBe,YAAavC,EAAMgC,YAAYQ,yBAGvCxC,EAAMgC,YAAYS,oCAAmC,SAACC,GAChDA,GACFR,EACGI,QAAO,SAACF,GAAC,OAAKA,IAAMpC,KACpBH,SAAQ,SAACuC,GACRA,EAAEJ,YAAYW,uBAAuB,CACnCC,KAAW,OAALF,QAAK,IAALA,OAAK,EAALA,EAAOE,KACbC,GAAS,OAALH,QAAK,IAALA,OAAK,EAALA,EAAOG,eA+BlB,WACLX,EAAOrC,SAAQ,SAACG,GACdA,EAAM8C,gBAIT,CAAE/D,EAAYK,EAAaI,IAI5BuD,IAAAC,cAAA,OAAKrD,IAAKT,GACPE,EAAY+C,KAAI,SAACxC,EAAKG,GAAC,OACtBiD,IAAAC,cAAA,OACErD,IAAKA,EACLsD,GAAE,sBAAAC,OAAwBpD,GAC1BqD,IAAG,sBAAAD,OAAwBpD,UCpIvCsD,IAASC,OACPN,IAAAC,cAACD,IAAMO,WAAU,KACfP,IAAAC,cAACO,oBAAiB,KAChBR,IAAAC,cAACQ,EAAiB,QAGtBC,SAASC,eAAe,W","file":"static/js/main.509cd3c1.chunk.js","sourcesContent":["import { useRenderData } from \"streamlit-component-lib-react-hooks\"\nimport {\n  createChart,\n  IChartApi,\n} from \"lightweight-charts\"\nimport React, { useRef, useEffect } from \"react\"\n\nconst LightweightChartsMultiplePanes: React.VFC = () => {\n\n  // returns the renderData passed from Python\n  // { args: object, disabled: boolean, theme: object }\n  const renderData = useRenderData()\n  const chartsData = renderData.args[\"charts\"]\n\n  const chartsContainerRef = useRef<HTMLDivElement>(null)\n  const chartElRefs = Array(chartsData.length).fill(useRef<HTMLDivElement>(null))\n  const chartRefs = useRef<IChartApi[]>([])\n\n    useEffect(() => {\n      if (chartElRefs.find((ref) => !ref.current)) return;\n\n      chartElRefs.forEach((ref, i) => {\n        const chart = chartRefs.current[i] = createChart(\n          ref.current as HTMLDivElement,{\n            height: 300,\n            width: chartElRefs[i].current.clientWidth,\n            ...chartsData[i].chart,\n          }\n        );\n\n        for (const series of chartsData[i].series){\n          \n          let chartSeries\n          switch(series.type) {\n            case 'Area':\n              chartSeries = chart.addAreaSeries(series.options)\n              break\n            case 'Bar':\n              chartSeries = chart.addBarSeries(series.options )\n              break\n            case 'Baseline':\n              chartSeries = chart.addBaselineSeries(series.options)\n              break\n            case 'Candlestick':\n              chartSeries = chart.addCandlestickSeries(series.options)\n              break\n            case 'Histogram':\n              chartSeries = chart.addHistogramSeries(series.options)\n              break\n            case 'Line':\n              chartSeries = chart.addLineSeries(series.options)\n              break\n            default:\n                return\n          }\n\n          if(series.priceScale)\n            chart.priceScale(series.options.priceScaleId || '').applyOptions(series.priceScale)\n\n          chartSeries.setData(series.data)\n\n          if(series.markers)\n            chartSeries.setMarkers(series.markers)\n\n        }\n\n        chart.timeScale().fitContent();\n\n      })\n  \n      const charts = chartRefs.current.map((c) => c as IChartApi);\n      \n      if(chartsData.length > 1){ // sync charts\n        charts.forEach((chart) => {\n          if (!chart) return;\n\n          chart.timeScale().subscribeVisibleTimeRangeChange((e) => {\n            charts\n              .filter((c) => c !== chart)\n              .forEach((c) => {\n                c.timeScale().applyOptions({\n                  rightOffset: chart.timeScale().scrollPosition()\n          }) }) })\n\n          chart.timeScale().subscribeVisibleLogicalRangeChange((range) => {\n            if (range) {\n              charts\n                .filter((c) => c !== chart)\n                .forEach((c) => {\n                  c.timeScale().setVisibleLogicalRange({\n                    from: range?.from,\n                    to: range?.to\n          }) }) } })\n\n          // chart.subscribeCrosshairMove((handler) => {\n          //   charts\n          //     .filter((c) => c !== chart)\n          //     .forEach((c) => {\n          //       // if (handler.time !== undefined) {\n          //       //   var xx = c.timeScale().timeToCoordinate(handler.time);\n          //       //   c.setCrossHairXY(xx,50,true);\n          //       // } else if (handler.point !== undefined){\n          //       //   c.setCrossHairXY(handler.point.x,10,false);\n          //       // }\n          //       // c.timeScale().applyOptions({\n          //       //   rightOffset: chart.timeScale().scrollPosition()\n          //       // })\n          //       console.log('handler',handler)\n          //       if (handler.time !== undefined) {\n          //         const xx = c.timeScale().timeToCoordinate(handler.time);\n          //         if(xx) c.timeScale().scrollToPosition(xx,true)\n          //         console.log('const xx',xx)\n          //       }\n          //     })\n          // })\n\n      }) }\n\n      // const handleResize = () => {\n      //   chart.applyOptions({ width: chartsContainerRef?.current?.clientWidth })\n      // }\n      // window.addEventListener('resize', handleResize)\n      return () => { // required because how useEffect() works\n        charts.forEach((chart) => {\n          chart.remove()\n        })\n      }\n\n    }, [ chartsData, chartElRefs, chartRefs])\n\n\n    return (\n      <div ref={chartsContainerRef}>\n        {chartElRefs.map((ref, i) => (\n          <div\n            ref={ref}\n            id={`lightweight-charts-${i}`}\n            key={`lightweight-charts-${i}`}\n          />\n        ))}\n      </div>\n    )\n\n}\n\nexport default LightweightChartsMultiplePanes\n","import React from \"react\"\nimport ReactDOM from \"react-dom\"\nimport { StreamlitProvider } from \"streamlit-component-lib-react-hooks\"\nimport LightweightCharts from \"./LightweightCharts\"\n\nReactDOM.render(\n  <React.StrictMode>\n    <StreamlitProvider>\n      <LightweightCharts />\n    </StreamlitProvider>\n  </React.StrictMode>,\n  document.getElementById(\"root\")\n)\n"],"sourceRoot":""}


--------------------------------------------------------------------------------
/streamlit_lightweight_charts/frontend/build/static/js/runtime-main.e0d8c599.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["../webpack/bootstrap"],"names":["webpackJsonpCallback","data","moduleId","chunkId","chunkIds","moreModules","executeModules","i","resolves","length","Object","prototype","hasOwnProperty","call","installedChunks","push","modules","parentJsonpFunction","shift","deferredModules","apply","checkDeferredModules","result","deferredModule","fulfilled","j","depId","splice","__webpack_require__","s","installedModules","1","exports","module","l","m","c","d","name","getter","o","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","p","jsonpArray","this","oldJsonpFunction","slice"],"mappings":"aACE,SAASA,EAAqBC,GAQ7B,IAPA,IAMIC,EAAUC,EANVC,EAAWH,EAAK,GAChBI,EAAcJ,EAAK,GACnBK,EAAiBL,EAAK,GAIHM,EAAI,EAAGC,EAAW,GACpCD,EAAIH,EAASK,OAAQF,IACzBJ,EAAUC,EAASG,GAChBG,OAAOC,UAAUC,eAAeC,KAAKC,EAAiBX,IAAYW,EAAgBX,IACpFK,EAASO,KAAKD,EAAgBX,GAAS,IAExCW,EAAgBX,GAAW,EAE5B,IAAID,KAAYG,EACZK,OAAOC,UAAUC,eAAeC,KAAKR,EAAaH,KACpDc,EAAQd,GAAYG,EAAYH,IAKlC,IAFGe,GAAqBA,EAAoBhB,GAEtCO,EAASC,QACdD,EAASU,OAATV,GAOD,OAHAW,EAAgBJ,KAAKK,MAAMD,EAAiBb,GAAkB,IAGvDe,IAER,SAASA,IAER,IADA,IAAIC,EACIf,EAAI,EAAGA,EAAIY,EAAgBV,OAAQF,IAAK,CAG/C,IAFA,IAAIgB,EAAiBJ,EAAgBZ,GACjCiB,GAAY,EACRC,EAAI,EAAGA,EAAIF,EAAed,OAAQgB,IAAK,CAC9C,IAAIC,EAAQH,EAAeE,GACG,IAA3BX,EAAgBY,KAAcF,GAAY,GAE3CA,IACFL,EAAgBQ,OAAOpB,IAAK,GAC5Be,EAASM,EAAoBA,EAAoBC,EAAIN,EAAe,KAItE,OAAOD,EAIR,IAAIQ,EAAmB,GAKnBhB,EAAkB,CACrBiB,EAAG,GAGAZ,EAAkB,GAGtB,SAASS,EAAoB1B,GAG5B,GAAG4B,EAAiB5B,GACnB,OAAO4B,EAAiB5B,GAAU8B,QAGnC,IAAIC,EAASH,EAAiB5B,GAAY,CACzCK,EAAGL,EACHgC,GAAG,EACHF,QAAS,IAUV,OANAhB,EAAQd,GAAUW,KAAKoB,EAAOD,QAASC,EAAQA,EAAOD,QAASJ,GAG/DK,EAAOC,GAAI,EAGJD,EAAOD,QAKfJ,EAAoBO,EAAInB,EAGxBY,EAAoBQ,EAAIN,EAGxBF,EAAoBS,EAAI,SAASL,EAASM,EAAMC,GAC3CX,EAAoBY,EAAER,EAASM,IAClC5B,OAAO+B,eAAeT,EAASM,EAAM,CAAEI,YAAY,EAAMC,IAAKJ,KAKhEX,EAAoBgB,EAAI,SAASZ,GACX,qBAAXa,QAA0BA,OAAOC,aAC1CpC,OAAO+B,eAAeT,EAASa,OAAOC,YAAa,CAAEC,MAAO,WAE7DrC,OAAO+B,eAAeT,EAAS,aAAc,CAAEe,OAAO,KAQvDnB,EAAoBoB,EAAI,SAASD,EAAOE,GAEvC,GADU,EAAPA,IAAUF,EAAQnB,EAAoBmB,IAC/B,EAAPE,EAAU,OAAOF,EACpB,GAAW,EAAPE,GAA8B,kBAAVF,GAAsBA,GAASA,EAAMG,WAAY,OAAOH,EAChF,IAAII,EAAKzC,OAAO0C,OAAO,MAGvB,GAFAxB,EAAoBgB,EAAEO,GACtBzC,OAAO+B,eAAeU,EAAI,UAAW,CAAET,YAAY,EAAMK,MAAOA,IACtD,EAAPE,GAA4B,iBAATF,EAAmB,IAAI,IAAIM,KAAON,EAAOnB,EAAoBS,EAAEc,EAAIE,EAAK,SAASA,GAAO,OAAON,EAAMM,IAAQC,KAAK,KAAMD,IAC9I,OAAOF,GAIRvB,EAAoB2B,EAAI,SAAStB,GAChC,IAAIM,EAASN,GAAUA,EAAOiB,WAC7B,WAAwB,OAAOjB,EAAgB,SAC/C,WAA8B,OAAOA,GAEtC,OADAL,EAAoBS,EAAEE,EAAQ,IAAKA,GAC5BA,GAIRX,EAAoBY,EAAI,SAASgB,EAAQC,GAAY,OAAO/C,OAAOC,UAAUC,eAAeC,KAAK2C,EAAQC,IAGzG7B,EAAoB8B,EAAI,KAExB,IAAIC,EAAaC,KAA+C,yCAAIA,KAA+C,0CAAK,GACpHC,EAAmBF,EAAW5C,KAAKuC,KAAKK,GAC5CA,EAAW5C,KAAOf,EAClB2D,EAAaA,EAAWG,QACxB,IAAI,IAAIvD,EAAI,EAAGA,EAAIoD,EAAWlD,OAAQF,IAAKP,EAAqB2D,EAAWpD,IAC3E,IAAIU,EAAsB4C,EAI1BxC,I","file":"static/js/runtime-main.e0d8c599.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tfunction webpackJsonpCallback(data) {\n \t\tvar chunkIds = data[0];\n \t\tvar moreModules = data[1];\n \t\tvar executeModules = data[2];\n\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(data);\n\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n\n \t\t// add entry modules from loaded chunk to deferred list\n \t\tdeferredModules.push.apply(deferredModules, executeModules || []);\n\n \t\t// run deferred modules when all chunks ready\n \t\treturn checkDeferredModules();\n \t};\n \tfunction checkDeferredModules() {\n \t\tvar result;\n \t\tfor(var i = 0; i < deferredModules.length; i++) {\n \t\t\tvar deferredModule = deferredModules[i];\n \t\t\tvar fulfilled = true;\n \t\t\tfor(var j = 1; j < deferredModule.length; j++) {\n \t\t\t\tvar depId = deferredModule[j];\n \t\t\t\tif(installedChunks[depId] !== 0) fulfilled = false;\n \t\t\t}\n \t\t\tif(fulfilled) {\n \t\t\t\tdeferredModules.splice(i--, 1);\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = deferredModule[0]);\n \t\t\t}\n \t\t}\n\n \t\treturn result;\n \t}\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// undefined = chunk not loaded, null = chunk preloaded/prefetched\n \t// Promise = chunk loading, 0 = chunk loaded\n \tvar installedChunks = {\n \t\t1: 0\n \t};\n\n \tvar deferredModules = [];\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"./\";\n\n \tvar jsonpArray = this[\"webpackJsonpstreamlit_lightweight_charts\"] = this[\"webpackJsonpstreamlit_lightweight_charts\"] || [];\n \tvar oldJsonpFunction = jsonpArray.push.bind(jsonpArray);\n \tjsonpArray.push = webpackJsonpCallback;\n \tjsonpArray = jsonpArray.slice();\n \tfor(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);\n \tvar parentJsonpFunction = oldJsonpFunction;\n\n\n \t// run deferred modules from other chunks\n \tcheckDeferredModules();\n"],"sourceRoot":""}


--------------------------------------------------------------------------------
/examples/MultiPaneChartsFromCSV.csv:
--------------------------------------------------------------------------------
 1 | datetime,open,high,low,close,volume,rvgi1,rvgi2,StochRSI1,StochRSI2,rsi1,rsi2,rsi_ema200,ema20,ema50,ema200,macd_fast,macd_slow,macd_hist
 2 | 2023-05-05 12:10:00,482.75,484.2,482.5,483.85,6267,0.3129506634197296,0.7708121397953858,0.5608007580513179,0.05397254501650879,0.46647200835872416,0.3364405210612591,0.6227465533709484,484.6033940172384,486.8008099093224,478.2987949172159,-2.1188136636172885,-2.1591708775814364,0.04035721396414793
 3 | 2023-05-05 12:15:00,483.85,484.95,482.95,483.5,5451,0.3234026163760752,0.7696275326995312,0.7231511954026021,0.08295922185965551,0.44623433909347887,0.32687435334330095,0.6176155253987585,484.49830887273947,486.67136638346665,478.35054820162173,-1.945303300970238,-2.116397362259197,0.17109406128895888
 4 | 2023-05-05 12:20:00,483.85,483.85,482.45,483.0,2007,0.30767229430409504,0.7567076272353279,0.8571348035277342,0.11365115729077996,0.41697544836139755,0.3131482179473841,0.6112003560219765,484.35561278962143,486.52739123117385,478.3968114035956,-1.8270794749536208,-2.058533784798082,0.23145430984446103
 5 | 2023-05-05 12:25:00,483.0,484.25,483.0,483.95,4924,0.28873155080431656,0.7413489463433598,0.925215503764339,0.13278375180558094,0.48752890152170325,0.3415655968171394,0.6080686462696674,484.3169830001337,486.4263170652455,478.45206701152006,-1.637849075938334,-1.9743968430261323,0.3365477670877983
 6 | 2023-05-05 12:30:00,483.95,486.0,483.95,485.05,8914,0.3056104721104264,0.7423015713942804,0.9416331151950323,0.14763812545808375,0.5593371228598403,0.3738703963489971,0.6082449848294051,484.3867941429781,486.37234384700054,478.5177180860323,-1.3831774063287412,-1.856152955686654,0.47297554935791286
 7 | 2023-05-05 12:35:00,485.65,485.95,484.85,484.85,2359,0.28097412538679295,0.7245623954814826,0.9594827023260536,0.16940302707055555,0.5443078230079905,0.3681008971232653,0.6077337236644307,484.430908986504,486.31264408829463,478.58072586627077,-1.1838400309214876,-1.7216903707336209,0.5378503398121333
 8 | 2023-05-05 12:40:00,484.85,485.5,484.2,484.2,447,0.2689110877462131,0.7114461247089099,0.9616336391470373,0.19169353603868763,0.495391430340114,0.3492764309098346,0.6049953053825896,484.408917654456,486.2297953005184,478.63663904173075,-1.0660248219166988,-1.5905572609702365,0.5245324390535377
 9 | 2023-05-05 12:45:00,484.2,484.95,483.95,484.15,1046,0.24690036970396967,0.6929533407217561,0.9408941171732292,0.19913560383790704,0.49155898342769433,0.3478186021664318,0.6021092456605479,484.3842588302221,486.14823470049805,478.6914983547484,-0.9655596317059008,-1.4655577351173694,0.49999810341146866
10 | 2023-05-05 12:50:00,484.95,484.95,484.45,484.5,877,0.2086566671088836,0.6653676359926357,0.9028413531037077,0.19348697054826228,0.5210304094604664,0.35865305162847605,0.6005967981681901,484.3952817987724,486.08359804557654,478.74929439101953,-0.8479238316067494,-1.3420309544152453,0.4941071228084959
11 | 2023-05-05 12:55:00,484.5,485.2,484.5,485.2,3395,0.18546033830074926,0.6427909747886933,0.8961858896542615,0.19257842871679062,0.5772726887222821,0.38030644209022535,0.6016659527520289,484.47192162746074,486.0489471418284,478.813480516482,-0.6902556254709111,-1.2116758886263785,0.5214202631554674
12 | 2023-05-05 13:00:00,485.2,485.75,483.6,483.95,3427,0.22516283035597462,0.6495722439233829,0.8953569095606415,0.1958955612276594,0.4694250386413894,0.34255527782110096,0.5978029633629784,484.4222148057978,485.9666354892077,478.8645901630842,-0.6585753428804537,-1.1010557794771936,0.44248043659673986
13 | 2023-05-05 13:05:00,483.95,485.0,483.85,483.85,3766,0.21717682091647605,0.636451325020845,0.8699866115830084,0.19725123512103246,0.46150522439721153,0.33955568749988463,0.5936169999074679,484.3677181576266,485.88363017590547,478.9141962311132,-0.6342266845218205,-1.007689960486119,0.3734632759642984
14 | 2023-05-05 13:10:00,483.85,484.2,483.4,484.0,1776,0.19647835989179419,0.6169722623876188,0.7942995583977588,0.1850003455128437,0.4762230275783159,0.3443981111209522,0.5901443181432953,484.33269738070976,485.80976232586994,478.9648012437389,-0.5959566338473792,-0.925343295158371,0.3293866613109918
15 | 2023-05-05 13:15:00,484.0,484.0,483.25,483.3,3970,0.17751976208827436,0.5972752717678236,0.7015558960166945,0.16982191955364578,0.4157881616420763,0.3228897548679488,0.5839483136248091,484.2343452492136,485.71134027387507,479.0079375497714,-0.615021903161221,-0.863279016758941,0.24825711359772007
16 | 2023-05-05 13:20:00,483.3,483.9,483.3,483.8,264,0.15593770208087254,0.5754052737655806,0.6417110478440442,0.15850508292510662,0.46921979755934207,0.3394556541688494,0.5802522532076382,484.1929790350028,485.63638575333096,479.0556197632065,-0.5830642434707443,-0.8072360621013017,0.22417181863055746
17 | 2023-05-05 13:25:00,483.95,483.95,483.25,483.3,3178,0.14232663964146752,0.5563565483352482,0.5968776463716361,0.1503091447924908,0.42458807548792576,0.32384323595339626,0.5745562513184055,484.10793341262155,485.5447627826121,479.0978524023786,-0.5912676241295571,-0.7640423745069528,0.17277475037739565
18 | 2023-05-05 13:30:00,483.3,483.5,482.5,482.9,2300,0.14333127580008692,0.5439457085196107,0.5689097984521524,0.14376273917333382,0.39051296806591096,0.3113392105249524,0.5673619470503826,483.992892135229,485.4410465950587,479.13568471678275,-0.622865513544582,-0.7358070023144786,0.11294148876989663
19 | 2023-05-05 13:35:00,482.95,483.35,482.9,483.1,1334,0.12189482422238361,0.5212216275517232,0.5179341940703525,0.13292956777579812,0.4156975467578349,0.3182666078511296,0.5613884976837009,483.9078547890167,485.3492408462329,479.1751306399988,-0.6245690962651906,-0.713559421104621,0.08899032483943037
20 | 2023-05-05 13:40:00,483.1,483.8,483.1,483.8,1285,0.11447337593906749,0.5042977509925224,0.5008753142955843,0.1300724004612644,0.4986738867034648,0.34252681289270925,0.5592610171152432,483.89758290434844,485.28848630324336,479.2211492405959,-0.5629457596928091,-0.6834366888222586,0.12049092912944948
21 | 2023-05-05 13:45:00,483.8,484.35,483.55,483.55,3723,0.11244826854664174,0.4900011814584461,0.49830958958679067,0.13423580078412178,0.4716535557336762,0.33432678879775124,0.5559216632430402,483.86447977060095,485.22031036978285,479.2642223824805,-0.5281930514416331,-0.6523879613461335,0.12419490990450044
22 | 2023-05-05 13:50:00,483.55,484.2,482.3,482.75,5104,0.15530821573144316,0.4978651432157472,0.46379192586182444,0.14065358678029033,0.39288655830393926,0.30816815318207125,0.5490210938696469,483.75833884006755,485.1234354533208,479.2989067368837,-0.5587635159007505,-0.6336630722570569,0.07489955635630641
23 | 2023-05-05 13:55:00,482.75,482.75,481.3,481.6,2882,0.17216400528726478,0.4965843991544651,0.3437677813012717,0.12882073628501747,0.30459180395747376,0.27142523946888897,0.5381599555568339,483.5527827600611,484.9852615139749,479.32180318726296,-0.6680849508371125,-0.640547447973068,-0.02753750286404455
24 | 2023-05-05 14:00:00,481.6,482.75,481.25,482.65,4506,0.1879785991617171,0.49633569314620346,0.22271852810826215,0.10720970048383437,0.42910901303288473,0.3092099714577483,0.533089090375114,483.4668034495791,484.8936826310739,479.35491957345937,-0.6623614602506223,-0.6449102504285789,-0.0174512098220434
25 | 2023-05-05 14:05:00,482.65,482.65,481.05,481.9,3979,0.20496479898928133,0.4980603659061656,0.1799574888586521,0.08298590709997249,0.37179457261475224,0.28521607378966496,0.525453201853364,483.31758407342875,484.77628331220825,479.38024375680806,-0.710158025058945,-0.657959805354652,-0.05219821970429295
26 | 2023-05-05 14:10:00,481.9,481.9,481.45,481.9,1041,0.17232225228626763,0.47713571013880424,0.2357764274324686,0.0760182019262834,0.37179457261475224,0.2852160737896652,0.5178932923218804,483.18257606643556,484.6634878882001,479.40531595823285,-0.7395125071730604,-0.6742703457183337,-0.06524216145472672
27 | 2023-05-05 14:15:00,481.9,482.95,481.85,482.55,1377,0.17192012734884488,0.4697951954517113,0.29713479669549686,0.07413354854205788,0.4487503558363163,0.3090995460556156,0.5139203959604117,483.12233072677503,484.58060601023146,479.4366063467081,-0.7022316882348605,-0.6798626142216391,-0.022369074013221413
28 | 2023-05-05 14:20:00,482.55,483.5,482.3,482.8,1080,0.17563810269396818,0.46470616967711104,0.3753421764016581,0.08363589211326777,0.47688137859476265,0.3182830397772787,0.511270758335086,483.0916325623203,484.5107783235557,479.4700729502235,-0.6450774091438234,-0.6729055732060759,0.027828164062252525
29 | 2023-05-05 14:25:00,483.0,483.2,482.0,482.0,3261,0.1786800825217963,0.45981671354073056,0.4382445976783904,0.091597923964349,0.4014370148196029,0.2914292480401912,0.5052046669918298,482.987667556385,484.4123164285143,479.49524635370386,-0.6567647698657311,-0.6696774125380069,0.012912642672275876
30 | 2023-05-05 14:30:00,482.0,482.45,481.85,481.85,1677,0.15688705516284507,0.4433372472336678,0.4684645324930426,0.09496888592250484,0.388184694716603,0.28640306449827624,0.4985941801166822,482.87931826530075,484.31183343131767,479.5186767382441,-0.6704028471280026,-0.669822499456006,-0.0005803476719965506
31 | 2023-05-05 14:35:00,481.85,481.9,481.5,481.9,2153,0.13096242309949424,0.4235767833244147,0.43754884211862616,0.08553113973046214,0.39522796586916276,0.2883367630342968,0.4923708809488745,482.78604985908163,484.21725172812876,479.54237149706756,-0.6694594279218222,-0.6697498851491692,0.0002904572273469963
32 | 2023-05-05 14:40:00,481.9,482.0,481.5,481.5,2296,0.11379834715976735,0.406554865159896,0.3845426340137025,0.07140158702254193,0.35603370646138277,0.2745607860036574,0.48442091942631427,482.66356892012146,484.11069283682957,479.56185038764403,-0.6929999464591106,-0.6743998974111575,-0.018600049047953093
33 | 2023-05-05 14:45:00,481.55,482.25,481.55,481.8,1818,0.10784898561510874,0.3941277243807669,0.3784807292179812,0.061910267399956385,0.4029809916350995,0.28652466137789,0.47869244829619095,482.58132426106226,484.02007743146373,479.5841205330406,-0.6796143134446879,-0.6754427806178636,-0.0041715328268243645
34 | 2023-05-05 14:50:00,481.8,482.05,480.15,481.0,6426,0.15154516606019125,0.40575142955287996,0.35076178312358586,0.05246850372104237,0.32540690551531404,0.2586342798628989,0.4694809711352672,482.4307219504849,483.90164302238674,479.59820888594567,-0.7251997654881279,-0.6853941775919165,-0.03980558789621147
35 | 2023-05-05 14:55:00,480.7,481.25,478.4,478.75,19943,0.2257429596711616,0.4355737462681994,0.30360449418835045,0.041696213969193194,0.18866999833306483,0.18429345303743006,0.4541213162483624,482.08017700281965,483.6996178058225,479.5897689965333,-0.9321376579382559,-0.7347428736611843,-0.19739478427707158
36 | 


--------------------------------------------------------------------------------
/streamlit_lightweight_charts/__init__.py:
--------------------------------------------------------------------------------
  1 | import os
  2 | from typing import Dict
  3 | from enum import Enum
  4 | import streamlit.components.v1 as components
  5 | 
  6 | _COMPONENT_NAME = "streamlit_lightweight_charts"
  7 | _RELEASE = True
  8 | 
  9 | class Chart(str, Enum):
 10 |     Area = 'addAreaSeries'
 11 |     Baseline = 'addBaselineSeries'
 12 |     Histogram = 'addHistogramSeries'
 13 |     Line = 'addLineSeries'
 14 |     Bar = 'addBarSeries'
 15 |     Candlestick = 'addCandlestickSeries'
 16 | 
 17 | parent_dir = os.path.dirname(os.path.abspath(__file__))
 18 | build_dir = os.path.join(parent_dir, "frontend","build")
 19 | 
 20 | if not _RELEASE:
 21 |     _component_func = components.declare_component(
 22 |         _COMPONENT_NAME,
 23 |         # path=build_dir,
 24 |         url="http://localhost:3001",
 25 |     )
 26 | else:
 27 |     _component_func = components.declare_component(
 28 |         _COMPONENT_NAME,
 29 |         path=build_dir
 30 |     )
 31 | 
 32 | # Create a wrapper function for the component. This is an optional
 33 | # best practice - we could simply expose the component function returned by
 34 | # `declare_component` and call it done. The wrapper allows us to customize
 35 | # our component's API: we can pre-process its input args, post-process its
 36 | # output value, and add a docstring for users.
 37 | def renderLightweightCharts(charts: Dict, key: str = None):
 38 |     """Create a new instance of "renderLightweightCharts".
 39 | 
 40 |     Parameters
 41 |     ----------
 42 |     charts: <List of Dicts>
 43 | 
 44 |         chart: <Dict>
 45 |         https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptions
 46 | 
 47 |         series: <List of Dicts>
 48 |             https://tradingview.github.io/lightweight-charts/docs/series-types
 49 | 
 50 |             type: <str-enum>
 51 |                 Area
 52 |                 Bar
 53 |                 Baseline
 54 |                 Candlestick
 55 |                 Histogram
 56 |                 Line
 57 | 
 58 |             data: <List of Dicts> accordingly to series type
 59 | 
 60 |             options: <Dict> with style options
 61 | 
 62 |             priceScale: <Dict> optional
 63 |     
 64 |     key: str or None
 65 |         An optional key that uniquely identifies this component. If this is
 66 |         None, and the component's arguments are changed, the component will
 67 |         be re-mounted in the Streamlit frontend and lose its current state.
 68 | 
 69 |     """
 70 | 
 71 |     return _component_func(
 72 |         charts=charts,
 73 |         key=key
 74 |     )
 75 | 
 76 | 
 77 | if not _RELEASE:
 78 |     import streamlit as st
 79 |     import dataSamples as data
 80 | 
 81 |     chartOptions = {
 82 |         "width": 600,
 83 |         "layout": {
 84 |             "textColor": 'black',
 85 |             "background": {
 86 |                 "type": 'solid',
 87 |                 "color": 'white'
 88 |             }
 89 |         }
 90 |     }
 91 | 
 92 |     # AREA chart
 93 |     seriesAreaChart = [{
 94 |         "type": 'Area',
 95 |         "data": data.seriesSingleValueData,
 96 |         "options": {}
 97 |     }]
 98 |     st.subheader("Area Chart")
 99 |     renderLightweightCharts( [
100 |         {
101 |             "chart": chartOptions,
102 |             "series": seriesAreaChart,
103 |         }
104 |     ], 'area')
105 |     st.markdown("---")
106 | 
107 |     # BASELINE chart
108 |     seriesBaselineChart = [{
109 |         "type": 'Baseline',
110 |         "data": data.seriesBaselineChart,
111 |         "options": {
112 |             "baseValue": { "type": "price", "price": 25 },
113 |             "topLineColor": 'rgba( 38, 166, 154, 1)',
114 |             "topFillColor1": 'rgba( 38, 166, 154, 0.28)',
115 |             "topFillColor2": 'rgba( 38, 166, 154, 0.05)',
116 |             "bottomLineColor": 'rgba( 239, 83, 80, 1)',
117 |             "bottomFillColor1": 'rgba( 239, 83, 80, 0.05)',
118 |             "bottomFillColor2": 'rgba( 239, 83, 80, 0.28)'
119 |         }
120 |     }]
121 |     st.subheader("Baseline Chart")
122 |     renderLightweightCharts([
123 |         {
124 |             "chart": chartOptions,
125 |             "series": seriesBaselineChart
126 |         }
127 |     ], 'baseline')
128 |     st.markdown("---")
129 | 
130 |     # LINE charts
131 |     seriesLineChart = [{
132 |         "type": 'Line',
133 |         "data": data.seriesSingleValueData,
134 |         "options": {}
135 |     }]
136 |     st.subheader("Line Chart")
137 |     renderLightweightCharts([
138 |         {
139 |             "chart": chartOptions,
140 |             "series": seriesLineChart
141 |         }
142 |     ], 'line')
143 |     st.markdown("---")
144 | 
145 |     # HISTOGRAM chart
146 |     seriesHistogramChart = [{
147 |         "type": 'Histogram',
148 |         "data": data.seriesHistogramChart,
149 |         "options": { "color": '#26a69a' }
150 |     }]
151 |     st.subheader("Histogram Chart")
152 |     renderLightweightCharts([
153 |         {
154 |             "chart": chartOptions,
155 |             "series": seriesHistogramChart
156 |         }
157 |     ], 'histogram')
158 |     st.markdown("---")
159 | 
160 |     # BAR chart
161 |     seriesBarChart = [{
162 |         "type": 'Bar',
163 |         "data": data.seriesBarChart,
164 |         "options": {
165 |             "upColor": '#26a69a',
166 |             "downColor": '#ef5350'
167 |         }
168 |     }]
169 |     st.subheader("Bar Chart")
170 |     renderLightweightCharts([
171 |         {
172 |             "chart": chartOptions,
173 |             "series": seriesBarChart
174 |         }
175 |     ], 'bar')
176 |     st.markdown("---")
177 | 
178 |     # CANDLESTICK chart
179 |     seriesCandlestickChart = [{
180 |         "type": 'Candlestick',
181 |         "data": data.seriesCandlestickChart,
182 |         "options": {
183 |             "upColor": '#26a69a',
184 |             "downColor": '#ef5350',
185 |             "borderVisible": False,
186 |             "wickUpColor": '#26a69a',
187 |             "wickDownColor": '#ef5350'
188 |         }
189 |     }]
190 |     st.subheader("Candlestick Chart")
191 |     renderLightweightCharts([
192 |         {
193 |             "chart": chartOptions,
194 |             "series": seriesCandlestickChart
195 |         }
196 |     ], 'candlestick')
197 |     st.markdown("---")
198 | 
199 |     # OVERLAID AREA chart
200 |     overlaidAreaSeriesOptions = {
201 |     	# "width": 600,
202 |         "height": 400,
203 | 	    "rightPriceScale": {
204 | 		    "scaleMargins": {
205 | 			    "top": 0.1,
206 | 			    "bottom": 0.1,
207 | 		    },
208 | 		    "mode": 2, # PriceScaleMode: 0-Normal, 1-Logarithmic, 2-Percentage, 3-IndexedTo100
209 | 		    "borderColor": 'rgba(197, 203, 206, 0.4)',
210 | 	    },
211 |         "timeScale": {
212 |             "borderColor": 'rgba(197, 203, 206, 0.4)',
213 |         },
214 |         "layout": {
215 |             "background": {
216 |                 "type": 'solid',
217 |                 "color": '#100841'
218 |             },
219 |             "textColor": '#ffffff',
220 |         },
221 |         "grid": {
222 |             "vertLines": {
223 |                 "color": 'rgba(197, 203, 206, 0.4)',
224 |                 "style": 1, # LineStyle: 0-Solid, 1-Dotted, 2-Dashed, 3-LargeDashed
225 |             },
226 |             "horzLines": {
227 |                 "color": 'rgba(197, 203, 206, 0.4)',
228 |                 "style": 1, # LineStyle: 0-Solid, 1-Dotted, 2-Dashed, 3-LargeDashed
229 |             }
230 |         }
231 |     }
232 | 
233 |     seriesOverlaidChart = [
234 |         {
235 |             "type": 'Area',
236 |             "data": data.seriesMultipleChartArea01,
237 |             "options": {
238 |                 "topColor": 'rgba(255, 192, 0, 0.7)',
239 |                 "bottomColor": 'rgba(255, 192, 0, 0.3)',
240 |                 "lineColor": 'rgba(255, 192, 0, 1)',
241 |                 "lineWidth": 2,
242 |             },
243 |             "markers": [
244 |                 {
245 |                     "time": '2019-04-08',
246 |                     "position": 'aboveBar',
247 |                     "color": 'rgba(255, 192, 0, 1)',
248 |                     "shape": 'arrowDown',
249 |                     "text": 'H',
250 |                     "size": 3
251 |                 },
252 |                 {
253 |                     "time": '2019-05-13',
254 |                     "position": 'belowBar',
255 |                     "color": 'rgba(255, 192, 0, 1)',
256 |                     "shape": 'arrowUp',
257 |                     "text": 'L',
258 |                     "size": 3
259 |                 },
260 |             ]
261 |         },
262 |         {
263 |             "type": 'Area',
264 |             "data": data.seriesMultipleChartArea02,
265 |             "options": {
266 |                 "topColor": 'rgba(67, 83, 254, 0.7)',
267 |                 "bottomColor": 'rgba(67, 83, 254, 0.3)',
268 |                 "lineColor": 'rgba(67, 83, 254, 1)',
269 |                 "lineWidth": 2,
270 |             },
271 |             "markers": [
272 | 
273 |                 {
274 |                     "time": '2019-05-03',
275 |                     "position": 'aboveBar',
276 |                     "color": 'rgba(67, 83, 254, 1)',
277 |                     "shape": 'arrowDown',
278 |                     "text": 'PEAK',
279 |                     "size": 3
280 |                 },
281 |             ]
282 |         }
283 |     ]
284 |     st.subheader("Overlaid Series with Markers")
285 |     renderLightweightCharts([
286 |         {
287 |             "chart": overlaidAreaSeriesOptions,
288 |             "series": seriesOverlaidChart
289 |         }
290 |     ], 'overlaid')
291 | 
292 |     st.markdown("---")
293 | 
294 |     # PRICE AND VOLUME chart
295 |     priceVolumeChartOptions = {
296 |     	# "width": 600,
297 |         "height": 400,
298 | 	    "rightPriceScale": {
299 | 		    "scaleMargins": {
300 | 			    "top": 0.2,
301 | 			    "bottom": 0.25,
302 | 		    },
303 | 		    "borderVisible": False,
304 | 	    },
305 |         "overlayPriceScales": {
306 | 			"scaleMargins": {
307 | 				"top": 0.7,
308 | 				"bottom": 0,
309 | 			}
310 | 		},
311 |         "layout": {
312 |             "background": {
313 |                 "type": 'solid',
314 |                 "color": '#131722'
315 |             },
316 |             "textColor": '#d1d4dc',
317 |         },
318 |         "grid": {
319 |             "vertLines": {
320 |                 "color": 'rgba(42, 46, 57, 0)',
321 |             },
322 |             "horzLines": {
323 |                 "color": 'rgba(42, 46, 57, 0.6)',
324 |             }
325 |         }
326 |     }
327 | 
328 |     priceVolumeSeries = [
329 |         {
330 |             "type": 'Area',
331 |             "data": data.priceVolumeSeriesArea,
332 |             "options": {
333 |                 "topColor": 'rgba(38,198,218, 0.56)',
334 |                 "bottomColor": 'rgba(38,198,218, 0.04)',
335 |                 "lineColor": 'rgba(38,198,218, 1)',
336 |                 "lineWidth": 2,
337 |             }
338 |         },
339 |         {
340 |             "type": 'Histogram',
341 |             "data": data.priceVolumeSeriesHistogram,
342 |             "options": {
343 |                 "color": '#26a69a',
344 |                 "priceFormat": {
345 |                     "type": 'volume',
346 |                 },
347 |                 "priceScaleId": "" # set as an overlay setting,
348 |             },
349 |             "priceScale": {
350 |                 "scaleMargins": {
351 |                     "top": 0.7,
352 |                     "bottom": 0,
353 |                 }
354 |             }
355 |         }
356 |     ]
357 |     st.subheader("Price and Volume Series Chart")
358 |     renderLightweightCharts([
359 |         {
360 |             "chart": priceVolumeChartOptions,
361 |             "series": priceVolumeSeries
362 |         }
363 |     ], 'priceAndVolume')
364 |     st.markdown("---")
365 | 
366 |     # MULTIPANE charts
367 |     chartMultipaneOptions = [
368 |         {
369 |             "width": 600,
370 |             "height": 400,
371 |             "layout": {
372 |                 "background": {
373 |                     "type": "solid",
374 |                     "color": 'white'
375 |                 },
376 |                 "textColor": "black"
377 |             },
378 |             "grid": {
379 |                 "vertLines": {
380 |                     "color": "rgba(197, 203, 206, 0.5)"
381 |                     },
382 |                 "horzLines": {
383 |                     "color": "rgba(197, 203, 206, 0.5)"
384 |                 }
385 |             },
386 |             "crosshair": {
387 |                 "mode": 0
388 |             },
389 |             "priceScale": {
390 |                 "borderColor": "rgba(197, 203, 206, 0.8)"
391 |             },
392 |             "timeScale": {
393 |                 "borderColor": "rgba(197, 203, 206, 0.8)",
394 |                 "barSpacing": 15
395 |                 # "fixLeftEdge": True,
396 |             },
397 |             "watermark": {
398 |                 "visible": True,
399 |                 "fontSize": 48,
400 |                 "horzAlign": 'center',
401 |                 "vertAlign": 'center',
402 |                 "color": 'rgba(171, 71, 188, 0.3)',
403 |                 "text": 'Watermark Price',
404 |             },
405 |         },
406 |         {
407 |             "width": 600,
408 |             "height": 100,
409 |             "crosshair": {
410 |                 "mode": 0
411 |             },
412 |             "layout": {
413 |                 "background": {
414 |                     "type": 'solid',
415 |                     "color": 'transparent'
416 |                 },
417 |                 "textColor": 'black',
418 |             },
419 |             "grid": {
420 |                 "vertLines": {
421 |                     "color": 'rgba(42, 46, 57, 0)',
422 |                 },
423 |                 "horzLines": {
424 |                     "color": 'rgba(42, 46, 57, 0.6)',
425 |                 }
426 |             },
427 |             "timeScale": {
428 |                 "visible": False,
429 |             }
430 |         },
431 |         {
432 |             "width": 600,
433 |             "height": 200,
434 |             "layout": {
435 |                 "background": {
436 |                     "type": "solid",
437 |                     "color": 'white'
438 |                 },
439 |                 "textColor": "black"
440 |             },
441 |             "timeScale": {
442 |                 "visible": False,
443 |             }
444 |         }
445 | 
446 |     ]
447 | 
448 |     seriesCandlestickChart = [
449 |         {
450 |             "type": 'Candlestick',
451 |             "data": data.priceCandlestickMultipane,
452 |             "options": {
453 |                 "upColor": '#26a69a',
454 |                 "downColor": '#ef5350',
455 |                 "borderVisible": False,
456 |                 "wickUpColor": '#26a69a',
457 |                 "wickDownColor": '#ef5350'
458 |             }
459 |         }
460 |     ]
461 |     
462 |     seriesAreaChart = [
463 |         {
464 |             "type": 'Baseline',
465 |             "data": data.priceBaselineMultipane,
466 |             "options": {
467 |                 "baseValue": { "type": "price", "price": 180 },
468 |                 "topLineColor": 'rgba( 38, 166, 154, 1)',
469 |                 "topFillColor1": 'rgba( 38, 166, 154, 0.28)',
470 |                 "topFillColor2": 'rgba( 38, 166, 154, 0.05)',
471 |                 "bottomLineColor": 'rgba( 239, 83, 80, 1)',
472 |                 "bottomFillColor1": 'rgba( 239, 83, 80, 0.05)',
473 |                 "bottomFillColor2": 'rgba( 239, 83, 80, 0.28)'
474 |             }
475 |         }
476 |     ]
477 | 
478 |     seriesHistogramChart = [
479 |         {
480 |             "type": 'Histogram',
481 |             "data": data.priceVolumeMultipane,
482 |             "options": {
483 |                 "color": '#26a69a',
484 |                 "priceFormat": {
485 |                     "type": 'volume',
486 |                 },
487 |                 "priceScaleId": "" # set as an overlay setting,
488 |             },
489 |             "priceScale": {
490 |                 "scaleMargins": {
491 |                     "top": 0,
492 |                     "bottom": 0,
493 |                 },
494 |                 "alignLabels": False
495 |             }
496 |         }
497 |     ]
498 | 
499 |     st.subheader("Multipane Chart with Watermark")
500 |     renderLightweightCharts([
501 |         {
502 |             "chart": chartMultipaneOptions[0],
503 |             "series": seriesCandlestickChart
504 |         },
505 |         {
506 |             "chart": chartMultipaneOptions[1],
507 |             "series": seriesHistogramChart
508 |         },
509 |                 {
510 |             "chart": chartMultipaneOptions[2],
511 |             "series": seriesAreaChart
512 |         }
513 |     ], 'multipane')
514 |     st.markdown("---")
515 | 


--------------------------------------------------------------------------------
/streamlit_lightweight_charts/dataSamples.py:
--------------------------------------------------------------------------------
  1 | 
  2 | seriesSingleValueData = [
  3 |     { "time": '2018-12-22', "value": 32.51 },
  4 |     { "time": '2018-12-23', "value": 31.11 },
  5 |     { "time": '2018-12-24', "value": 27.02 },
  6 |     { "time": '2018-12-25', "value": 27.32 },
  7 |     { "time": '2018-12-26', "value": 25.17 },
  8 |     { "time": '2018-12-27', "value": 28.89 },
  9 |     { "time": '2018-12-28', "value": 25.46 },
 10 |     { "time": '2018-12-29', "value": 23.92 },
 11 |     { "time": '2018-12-30', "value": 22.68 },
 12 |     { "time": '2018-12-31', "value": 22.67 },
 13 | ];
 14 | 
 15 | seriesBaselineChart = [
 16 |     { "value": 1, "time": 1642425322 },
 17 |     { "value": 8, "time": 1642511722 },
 18 |     { "value": 10, "time": 1642598122 },
 19 |     { "value": 20, "time": 1642684522 },
 20 |     { "value": 3, "time": 1642770922 },
 21 |     { "value": 43, "time": 1642857322 },
 22 |     { "value": 41, "time": 1642943722 },
 23 |     { "value": 43, "time": 1643030122 },
 24 |     { "value": 56, "time": 1643116522 },
 25 |     { "value": 46, "time": 1643202922 }
 26 | ]
 27 | 
 28 | seriesHistogramChart = [
 29 |     { "value": 1, "time": 1642425322 },
 30 |     { "value": 8, "time": 1642511722 },
 31 |     { "value": 10, "time": 1642598122 },
 32 |     { "value": 20, "time": 1642684522 },
 33 |     { "value": 3, "time": 1642770922, "color": 'red' },
 34 |     { "value": 43, "time": 1642857322 },
 35 |     { "value": 41, "time": 1642943722, "color": 'red' },
 36 |     { "value": 43, "time": 1643030122 },
 37 |     { "value": 56, "time": 1643116522 },
 38 |     { "value": 46, "time": 1643202922, "color": 'red' }
 39 | ]
 40 | 
 41 | seriesBarChart = [
 42 |     { "open": 10, "high": 10.63, "low": 9.49, "close": 9.55, "time": 1642427876 },
 43 |     { "open": 9.55, "high": 10.30, "low": 9.42, "close": 9.94, "time": 1642514276 },
 44 |     { "open": 9.94, "high": 10.17, "low": 9.92, "close": 9.78, "time": 1642600676 },
 45 |     { "open": 9.78, "high": 10.59, "low": 9.18, "close": 9.51, "time": 1642687076 },
 46 |     { "open": 9.51, "high": 10.46, "low": 9.10, "close": 10.17, "time": 1642773476 },
 47 |     { "open": 10.17, "high": 10.96, "low": 10.16, "close": 10.47, "time": 1642859876 },
 48 |     { "open": 10.47, "high": 11.39, "low": 10.40, "close": 10.81, "time": 1642946276 },
 49 |     { "open": 10.81, "high": 11.60, "low": 10.30, "close": 10.75, "time": 1643032676 },
 50 |     { "open": 10.75, "high": 11.60, "low": 10.49, "close": 10.93, "time": 1643119076 },
 51 |     { "open": 10.93, "high": 11.53, "low": 10.76, "close": 10.96, "time": 1643205476 }
 52 | ]
 53 | 
 54 | seriesCandlestickChart = [
 55 |     { "open": 10, "high": 10.63, "low": 9.49, "close": 9.55, "time": 1642427876 },
 56 |     { "open": 9.55, "high": 10.30, "low": 9.42, "close": 9.94, "time": 1642514276 },
 57 |     { "open": 9.94, "high": 10.17, "low": 9.92, "close": 9.78, "time": 1642600676 },
 58 |     { "open": 9.78, "high": 10.59, "low": 9.18, "close": 9.51, "time": 1642687076 },
 59 |     { "open": 9.51, "high": 10.46, "low": 9.10, "close": 10.17, "time": 1642773476 },
 60 |     { "open": 10.17, "high": 10.96, "low": 10.16, "close": 10.47, "time": 1642859876 },
 61 |     { "open": 10.47, "high": 11.39, "low": 10.40, "close": 10.81, "time": 1642946276 },
 62 |     { "open": 10.81, "high": 11.60, "low": 10.30, "close": 10.75, "time": 1643032676 },
 63 |     { "open": 10.75, "high": 11.60, "low": 10.49, "close": 10.93, "time": 1643119076 },
 64 |     { "open": 10.93, "high": 11.53, "low": 10.76, "close": 10.96, "time": 1643205476 }
 65 | ]
 66 | 
 67 | 
 68 | seriesMultipleChartArea01 = [
 69 |     { "time": '2019-03-01', "value": 42.58 },
 70 |     { "time": '2019-03-04', "value": 42.64 },
 71 |     { "time": '2019-03-05', "value": 42.74 },
 72 |     { "time": '2019-03-06', "value": 42.7 },
 73 |     { "time": '2019-03-07', "value": 42.63 },
 74 |     { "time": '2019-03-08', "value": 42.25 },
 75 |     { "time": '2019-03-11', "value": 42.33 },
 76 |     { "time": '2019-03-12', "value": 42.46 },
 77 |     { "time": '2019-03-13', "value": 43.83 },
 78 |     { "time": '2019-03-14', "value": 43.95 },
 79 |     { "time": '2019-03-15', "value": 43.87 },
 80 |     { "time": '2019-03-18', "value": 44.24 },
 81 |     { "time": '2019-03-19', "value": 44.47 },
 82 |     { "time": '2019-03-20', "value": 44.53 },
 83 |     { "time": '2019-03-21', "value": 44.53 },
 84 |     { "time": '2019-03-22', "value": 43.95 },
 85 |     { "time": '2019-03-25', "value": 43.53 },
 86 |     { "time": '2019-03-26', "value": 43.82 },
 87 |     { "time": '2019-03-27', "value": 43.59 },
 88 |     { "time": '2019-03-28', "value": 43.63 },
 89 |     { "time": '2019-03-29', "value": 43.72 },
 90 |     { "time": '2019-04-01', "value": 44.09 },
 91 |     { "time": '2019-04-02', "value": 44.23 },
 92 |     { "time": '2019-04-03', "value": 44.23 },
 93 |     { "time": '2019-04-04', "value": 44.15 },
 94 |     { "time": '2019-04-05', "value": 44.53 },
 95 |     { "time": '2019-04-08', "value": 45.23 },
 96 |     { "time": '2019-04-09', "value": 44.99 },
 97 |     { "time": '2019-04-10', "value": 45.04 },
 98 |     { "time": '2019-04-11', "value": 44.87 },
 99 |     { "time": '2019-04-12', "value": 44.67 },
100 |     { "time": '2019-04-15', "value": 44.67 },
101 |     { "time": '2019-04-16', "value": 44.48 },
102 |     { "time": '2019-04-17', "value": 44.62 },
103 |     { "time": '2019-04-18', "value": 44.39 },
104 |     { "time": '2019-04-22', "value": 45.04 },
105 |     { "time": '2019-04-23', "value": 45.02 },
106 |     { "time": '2019-04-24', "value": 44.13 },
107 |     { "time": '2019-04-25', "value": 43.96 },
108 |     { "time": '2019-04-26', "value": 43.31 },
109 |     { "time": '2019-04-29', "value": 43.02 },
110 |     { "time": '2019-04-30', "value": 43.73 },
111 |     { "time": '2019-05-01', "value": 43.08 },
112 |     { "time": '2019-05-02', "value": 42.63 },
113 |     { "time": '2019-05-03', "value": 43.08 },
114 |     { "time": '2019-05-06', "value": 42.93 },
115 |     { "time": '2019-05-07', "value": 42.22 },
116 |     { "time": '2019-05-08', "value": 42.28 },
117 |     { "time": '2019-05-09', "value": 41.65 },
118 |     { "time": '2019-05-10', "value": 41.5 },
119 |     { "time": '2019-05-13', "value": 41.23 },
120 |     { "time": '2019-05-14', "value": 41.55 },
121 |     { "time": '2019-05-15', "value": 41.77 },
122 |     { "time": '2019-05-16', "value": 42.28 },
123 |     { "time": '2019-05-17', "value": 42.34 },
124 |     { "time": '2019-05-20', "value": 42.58 },
125 |     { "time": '2019-05-21', "value": 42.75 },
126 |     { "time": '2019-05-22', "value": 42.34 },
127 |     { "time": '2019-05-23', "value": 41.34 },
128 |     { "time": '2019-05-24', "value": 41.76 },
129 |     { "time": '2019-05-28', "value": 41.625 },
130 | ]
131 | 
132 | seriesMultipleChartArea02 = [
133 |     { "time": '2019-03-01', "value": 174.97 },
134 |     { "time": '2019-03-04', "value": 175.85 },
135 |     { "time": '2019-03-05', "value": 175.53 },
136 |     { "time": '2019-03-06', "value": 174.52 },
137 |     { "time": '2019-03-07', "value": 172.5 },
138 |     { "time": '2019-03-08', "value": 172.91 },
139 |     { "time": '2019-03-11', "value": 178.9 },
140 |     { "time": '2019-03-12', "value": 180.91 },
141 |     { "time": '2019-03-13', "value": 181.71 },
142 |     { "time": '2019-03-14', "value": 183.73 },
143 |     { "time": '2019-03-15', "value": 186.12 },
144 |     { "time": '2019-03-18', "value": 188.02 },
145 |     { "time": '2019-03-19', "value": 186.53 },
146 |     { "time": '2019-03-20', "value": 188.16 },
147 |     { "time": '2019-03-21', "value": 195.09 },
148 |     { "time": '2019-03-22', "value": 191.05 },
149 |     { "time": '2019-03-25', "value": 188.74 },
150 |     { "time": '2019-03-26', "value": 186.79 },
151 |     { "time": '2019-03-27', "value": 188.47 },
152 |     { "time": '2019-03-28', "value": 188.72 },
153 |     { "time": '2019-03-29', "value": 189.95 },
154 |     { "time": '2019-04-01', "value": 191.24 },
155 |     { "time": '2019-04-02', "value": 194.02 },
156 |     { "time": '2019-04-03', "value": 195.35 },
157 |     { "time": '2019-04-04', "value": 195.69 },
158 |     { "time": '2019-04-05', "value": 197 },
159 |     { "time": '2019-04-08', "value": 200.1 },
160 |     { "time": '2019-04-09', "value": 199.5 },
161 |     { "time": '2019-04-10', "value": 200.62 },
162 |     { "time": '2019-04-11', "value": 198.95 },
163 |     { "time": '2019-04-12', "value": 198.87 },
164 |     { "time": '2019-04-15', "value": 199.23 },
165 |     { "time": '2019-04-16', "value": 199.25 },
166 |     { "time": '2019-04-17', "value": 203.13 },
167 |     { "time": '2019-04-18', "value": 203.86 },
168 |     { "time": '2019-04-22', "value": 204.53 },
169 |     { "time": '2019-04-23', "value": 207.48 },
170 |     { "time": '2019-04-24', "value": 207.16 },
171 |     { "time": '2019-04-25', "value": 205.28 },
172 |     { "time": '2019-04-26', "value": 204.3 },
173 |     { "time": '2019-04-29', "value": 204.61 },
174 |     { "time": '2019-04-30', "value": 200.67 },
175 |     { "time": '2019-05-01', "value": 210.52 },
176 |     { "time": '2019-05-02', "value": 209.15 },
177 |     { "time": '2019-05-03', "value": 211.75 },
178 |     { "time": '2019-05-06', "value": 208.48 },
179 |     { "time": '2019-05-07', "value": 202.86 },
180 |     { "time": '2019-05-08', "value": 202.9 },
181 |     { "time": '2019-05-09', "value": 200.72 },
182 |     { "time": '2019-05-10', "value": 197.18 },
183 |     { "time": '2019-05-13', "value": 185.72 },
184 |     { "time": '2019-05-14', "value": 188.66 },
185 |     { "time": '2019-05-15', "value": 190.92 },
186 |     { "time": '2019-05-16', "value": 190.08 },
187 |     { "time": '2019-05-17', "value": 189 },
188 |     { "time": '2019-05-20', "value": 183.09 },
189 |     { "time": '2019-05-21', "value": 186.6 },
190 |     { "time": '2019-05-22', "value": 182.78 },
191 |     { "time": '2019-05-23', "value": 179.66 },
192 |     { "time": '2019-05-24', "value": 178.97 },
193 |     { "time": '2019-05-28', "value": 179.07 },
194 | ]
195 | 
196 | priceVolumeSeriesArea = [
197 |     { "time": '2019-03-01', "value": 56.96 },
198 |     { "time": '2019-03-04', "value": 56.24 },
199 |     { "time": '2019-03-05', "value": 56.08 },
200 |     { "time": '2019-03-06', "value": 55.68 },
201 |     { "time": '2019-03-07', "value": 56.30 },
202 |     { "time": '2019-03-08', "value": 56.53 },
203 |     { "time": '2019-03-11', "value": 57.58 },
204 |     { "time": '2019-03-12', "value": 57.43 },
205 |     { "time": '2019-03-13', "value": 57.66 },
206 |     { "time": '2019-03-14', "value": 57.95 },
207 |     { "time": '2019-03-15', "value": 58.39 },
208 |     { "time": '2019-03-18', "value": 58.07 },
209 |     { "time": '2019-03-19', "value": 57.50 },
210 |     { "time": '2019-03-20', "value": 57.67 },
211 |     { "time": '2019-03-21', "value": 58.29 },
212 |     { "time": '2019-03-22', "value": 59.76 },
213 |     { "time": '2019-03-25', "value": 60.08 },
214 |     { "time": '2019-03-26', "value": 60.63 },
215 |     { "time": '2019-03-27', "value": 60.88 },
216 |     { "time": '2019-03-28', "value": 59.08 },
217 |     { "time": '2019-03-29', "value": 59.13 },
218 |     { "time": '2019-04-01', "value": 59.09 },
219 |     { "time": '2019-04-02', "value": 58.53 },
220 |     { "time": '2019-04-03', "value": 58.87 },
221 |     { "time": '2019-04-04', "value": 58.99 },
222 |     { "time": '2019-04-05', "value": 59.09 },
223 |     { "time": '2019-04-08', "value": 59.13 },
224 |     { "time": '2019-04-09', "value": 58.40 },
225 |     { "time": '2019-04-10', "value": 58.61 },
226 |     { "time": '2019-04-11', "value": 58.56 },
227 |     { "time": '2019-04-12', "value": 58.74 },
228 |     { "time": '2019-04-15', "value": 58.71 },
229 |     { "time": '2019-04-16', "value": 58.79 },
230 |     { "time": '2019-04-17', "value": 57.78 },
231 |     { "time": '2019-04-18', "value": 58.04 },
232 |     { "time": '2019-04-22', "value": 58.37 },
233 |     { "time": '2019-04-23', "value": 57.15 },
234 |     { "time": '2019-04-24', "value": 57.08 },
235 |     { "time": '2019-04-25', "value": 55.85 },
236 |     { "time": '2019-04-26', "value": 56.58 },
237 |     { "time": '2019-04-29', "value": 56.84 },
238 |     { "time": '2019-04-30', "value": 57.19 },
239 |     { "time": '2019-05-01', "value": 56.52 },
240 |     { "time": '2019-05-02', "value": 56.99 },
241 |     { "time": '2019-05-03', "value": 57.24 },
242 |     { "time": '2019-05-06', "value": 56.91 },
243 |     { "time": '2019-05-07', "value": 56.63 },
244 |     { "time": '2019-05-08', "value": 56.38 },
245 |     { "time": '2019-05-09', "value": 56.48 },
246 |     { "time": '2019-05-10', "value": 56.91 },
247 |     { "time": '2019-05-13', "value": 56.75 },
248 |     { "time": '2019-05-14', "value": 56.55 },
249 |     { "time": '2019-05-15', "value": 56.81 },
250 |     { "time": '2019-05-16', "value": 57.38 },
251 |     { "time": '2019-05-17', "value": 58.09 },
252 |     { "time": '2019-05-20', "value": 59.01 },
253 |     { "time": '2019-05-21', "value": 59.50 },
254 |     { "time": '2019-05-22', "value": 59.25 },
255 |     { "time": '2019-05-23', "value": 58.87 },
256 |     { "time": '2019-05-24', "value": 59.32 },
257 |     { "time": '2019-05-28', "value": 59.57 },
258 | ]
259 | 
260 | priceVolumeSeriesHistogram = [
261 |     { "time": '2019-03-01', "value": 10942737.00, "color": 'rgba(0, 150, 136, 0.8)' },
262 |     { "time": '2019-03-04', "value": 13674737.00, "color": 'rgba(255,82,82, 0.8)' },
263 |     { "time": '2019-03-05', "value": 15749545.00, "color": 'rgba(255,82,82, 0.8)' },
264 |     { "time": '2019-03-06', "value": 13935530.00, "color": 'rgba(255,82,82, 0.8)' },
265 |     { "time": '2019-03-07', "value": 12644171.00, "color": 'rgba(0, 150, 136, 0.8)' },
266 |     { "time": '2019-03-08', "value": 10646710.00, "color": 'rgba(0, 150, 136, 0.8)' },
267 |     { "time": '2019-03-11', "value": 13627431.00, "color": 'rgba(0, 150, 136, 0.8)' },
268 |     { "time": '2019-03-12', "value": 12812980.00, "color": 'rgba(255,82,82, 0.8)' },
269 |     { "time": '2019-03-13', "value": 14168350.00, "color": 'rgba(0, 150, 136, 0.8)' },
270 |     { "time": '2019-03-14', "value": 12148349.00, "color": 'rgba(0, 150, 136, 0.8)' },
271 |     { "time": '2019-03-15', "value": 23715337.00, "color": 'rgba(0, 150, 136, 0.8)' },
272 |     { "time": '2019-03-18', "value": 12168133.00, "color": 'rgba(255,82,82, 0.8)' },
273 |     { "time": '2019-03-19', "value": 13462686.00, "color": 'rgba(255,82,82, 0.8)' },
274 |     { "time": '2019-03-20', "value": 11903104.00, "color": 'rgba(0, 150, 136, 0.8)' },
275 |     { "time": '2019-03-21', "value": 10920129.00, "color": 'rgba(0, 150, 136, 0.8)' },
276 |     { "time": '2019-03-22', "value": 25125385.00, "color": 'rgba(0, 150, 136, 0.8)' },
277 |     { "time": '2019-03-25', "value": 15463411.00, "color": 'rgba(0, 150, 136, 0.8)' },
278 |     { "time": '2019-03-26', "value": 12316901.00, "color": 'rgba(0, 150, 136, 0.8)' },
279 |     { "time": '2019-03-27', "value": 13290298.00, "color": 'rgba(0, 150, 136, 0.8)' },
280 |     { "time": '2019-03-28', "value": 20547060.00, "color": 'rgba(255,82,82, 0.8)' },
281 |     { "time": '2019-03-29', "value": 17283871.00, "color": 'rgba(0, 150, 136, 0.8)' },
282 |     { "time": '2019-04-01', "value": 16331140.00, "color": 'rgba(255,82,82, 0.8)' },
283 |     { "time": '2019-04-02', "value": 11408146.00, "color": 'rgba(255,82,82, 0.8)' },
284 |     { "time": '2019-04-03', "value": 15491724.00, "color": 'rgba(0, 150, 136, 0.8)' },
285 |     { "time": '2019-04-04', "value": 8776028.00, "color": 'rgba(0, 150, 136, 0.8)' },
286 |     { "time": '2019-04-05', "value": 11497780.00, "color": 'rgba(0, 150, 136, 0.8)' },
287 |     { "time": '2019-04-08', "value": 11680538.00, "color": 'rgba(0, 150, 136, 0.8)' },
288 |     { "time": '2019-04-09', "value": 10414416.00, "color": 'rgba(255,82,82, 0.8)' },
289 |     { "time": '2019-04-10', "value": 8782061.00, "color": 'rgba(0, 150, 136, 0.8)' },
290 |     { "time": '2019-04-11', "value": 9219930.00, "color": 'rgba(255,82,82, 0.8)' },
291 |     { "time": '2019-04-12', "value": 10847504.00, "color": 'rgba(0, 150, 136, 0.8)' },
292 |     { "time": '2019-04-15', "value": 7741472.00, "color": 'rgba(255,82,82, 0.8)' },
293 |     { "time": '2019-04-16', "value": 10239261.00, "color": 'rgba(0, 150, 136, 0.8)' },
294 |     { "time": '2019-04-17', "value": 15498037.00, "color": 'rgba(255,82,82, 0.8)' },
295 |     { "time": '2019-04-18', "value": 13189013.00, "color": 'rgba(0, 150, 136, 0.8)' },
296 |     { "time": '2019-04-22', "value": 11950365.00, "color": 'rgba(0, 150, 136, 0.8)' },
297 |     { "time": '2019-04-23', "value": 23488682.00, "color": 'rgba(255,82,82, 0.8)' },
298 |     { "time": '2019-04-24', "value": 13227084.00, "color": 'rgba(255,82,82, 0.8)' },
299 |     { "time": '2019-04-25', "value": 17425466.00, "color": 'rgba(255,82,82, 0.8)' },
300 |     { "time": '2019-04-26', "value": 16329727.00, "color": 'rgba(0, 150, 136, 0.8)' },
301 |     { "time": '2019-04-29', "value": 13984965.00, "color": 'rgba(0, 150, 136, 0.8)' },
302 |     { "time": '2019-04-30', "value": 15469002.00, "color": 'rgba(0, 150, 136, 0.8)' },
303 |     { "time": '2019-05-01', "value": 11627436.00, "color": 'rgba(255,82,82, 0.8)' },
304 |     { "time": '2019-05-02', "value": 14435436.00, "color": 'rgba(0, 150, 136, 0.8)' },
305 |     { "time": '2019-05-03', "value": 9388228.00, "color": 'rgba(0, 150, 136, 0.8)' },
306 |     { "time": '2019-05-06', "value": 10066145.00, "color": 'rgba(255,82,82, 0.8)' },
307 |     { "time": '2019-05-07', "value": 12963827.00, "color": 'rgba(255,82,82, 0.8)' },
308 |     { "time": '2019-05-08', "value": 12086743.00, "color": 'rgba(255,82,82, 0.8)' },
309 |     { "time": '2019-05-09', "value": 14835326.00, "color": 'rgba(0, 150, 136, 0.8)' },
310 |     { "time": '2019-05-10', "value": 10707335.00, "color": 'rgba(0, 150, 136, 0.8)' },
311 |     { "time": '2019-05-13', "value": 13759350.00, "color": 'rgba(255,82,82, 0.8)' },
312 |     { "time": '2019-05-14', "value": 12776175.00, "color": 'rgba(255,82,82, 0.8)' },
313 |     { "time": '2019-05-15', "value": 10806379.00, "color": 'rgba(0, 150, 136, 0.8)' },
314 |     { "time": '2019-05-16', "value": 11695064.00, "color": 'rgba(0, 150, 136, 0.8)' },
315 |     { "time": '2019-05-17', "value": 14436662.00, "color": 'rgba(0, 150, 136, 0.8)' },
316 |     { "time": '2019-05-20', "value": 20910590.00, "color": 'rgba(0, 150, 136, 0.8)' },
317 |     { "time": '2019-05-21', "value": 14016315.00, "color": 'rgba(0, 150, 136, 0.8)' },
318 |     { "time": '2019-05-22', "value": 11487448.00, "color": 'rgba(255,82,82, 0.8)' },
319 |     { "time": '2019-05-23', "value": 11707083.00, "color": 'rgba(255,82,82, 0.8)' },
320 |     { "time": '2019-05-24', "value": 8755506.00, "color": 'rgba(0, 150, 136, 0.8)' },
321 |     { "time": '2019-05-28', "value": 3097125.00, "color": 'rgba(0, 150, 136, 0.8)' }
322 | ]
323 | 
324 | priceCandlestickMultipane = [
325 |   { "time":'2018-11-28', "open": 172.91, "high": 177.65, "low": 170.62, "close": 177.43 },
326 |   { "time":'2018-11-29', "open": 176.8, "high": 177.27, "low": 174.92, "close": 175.66 },
327 |   { "time":'2018-11-30', "open": 175.75, "high": 180.37, "low": 175.11, "close": 180.32 },
328 |   { "time":'2018-12-03', "open": 183.29, "high": 183.5, "low": 179.35, "close": 181.74 },
329 |   { "time":'2018-12-04', "open": 181.06, "high": 182.23, "low": 174.55, "close": 175.3 },
330 |   { "time":'2018-12-06', "open": 173.5, "high": 176.04, "low": 170.46, "close": 175.96 },
331 |   { "time":'2018-12-07', "open": 175.35, "high": 178.36, "low": 172.24, "close": 172.79 },
332 |   { "time":'2018-12-10', "open": 173.39, "high": 173.99, "low": 167.73, "close": 171.69 },
333 |   { "time":'2018-12-11', "open": 174.3, "high": 175.6, "low": 171.24, "close": 172.21 },
334 |   { "time":'2018-12-12', "open": 173.75, "high": 176.87, "low": 172.81, "close": 174.21 },
335 |   { "time":'2018-12-13', "open": 174.31, "high": 174.91, "low": 172.07, "close": 173.87 },
336 |   { "time":'2018-12-14', "open": 172.98, "high": 175.14, "low": 171.95, "close": 172.29 },
337 |   { "time":'2018-12-17', "open": 171.51, "high": 171.99, "low": 166.93, "close": 167.97 },
338 |   { "time":'2018-12-18', "open": 168.9, "high": 171.95, "low": 168.5, "close": 170.04 },
339 |   { "time":'2018-12-19', "open": 170.92, "high": 174.95, "low": 166.77, "close": 167.56 },
340 |   { "time":'2018-12-20', "open": 166.28, "high": 167.31, "low": 162.23, "close": 164.16 },
341 |   { "time":'2018-12-21', "open": 162.81, "high": 167.96, "low": 160.17, "close": 160.48 },
342 |   { "time":'2018-12-24', "open": 160.16, "high": 161.4, "low": 158.09, "close": 158.14 },
343 |   { "time":'2018-12-26', "open": 159.46, "high": 168.28, "low": 159.44, "close": 168.28 },
344 |   { "time":'2018-12-27', "open": 166.44, "high": 170.46, "low": 163.36, "close": 170.32 },
345 |   { "time":'2018-12-28', "open": 171.22, "high": 173.12, "low": 168.6, "close": 170.22 },
346 |   { "time":'2018-12-31', "open": 171.47, "high": 173.24, "low": 170.65, "close": 171.82 },
347 |   { "time":'2019-01-02', "open": 169.71, "high": 173.18, "low": 169.05, "close": 172.41 },
348 |   { "time":'2019-01-03', "open": 171.84, "high": 171.84, "low": 168.21, "close": 168.61 },
349 |   { "time":'2019-01-04', "open": 170.18, "high": 174.74, "low": 169.52, "close": 173.62 },
350 |   { "time":'2019-01-07', "open": 173.83, "high": 178.18, "low": 173.83, "close": 177.04 },
351 |   { "time":'2019-01-08', "open": 178.57, "high": 179.59, "low": 175.61, "close": 177.89 },
352 |   { "time":'2019-01-09', "open": 177.87, "high": 181.27, "low": 177.1, "close": 179.73 },
353 |   { "time":'2019-01-10', "open": 178.03, "high": 179.24, "low": 176.34, "close": 179.06 },
354 |   { "time":'2019-01-11', "open": 177.93, "high": 180.26, "low": 177.12, "close": 179.41 },
355 |   { "time":'2019-01-14', "open": 177.59, "high": 179.23, "low": 176.9, "close": 178.81 },
356 |   { "time":'2019-01-15', "open": 176.08, "high": 177.82, "low": 175.2, "close": 176.47 },
357 |   { "time":'2019-01-16', "open": 177.09, "high": 177.93, "low": 175.86, "close": 177.04 },
358 |   { "time":'2019-01-17', "open": 174.01, "high": 175.46, "low": 172.0, "close": 174.87 },
359 |   { "time":'2019-01-18', "open": 176.98, "high": 180.04, "low": 176.18, "close": 179.58 },
360 |   { "time":'2019-01-22', "open": 177.49, "high": 178.6, "low": 175.36, "close": 177.11 },
361 |   { "time":'2019-01-23', "open": 176.59, "high": 178.06, "low": 174.53, "close": 176.89 },
362 |   { "time":'2019-01-24', "open": 177.0, "high": 177.53, "low": 175.3, "close": 177.29 },
363 |   { "time":'2019-01-25', "open": 179.78, "high": 180.87, "low": 178.61, "close": 180.4 },
364 |   { "time":'2019-01-28', "open": 178.97, "high": 179.99, "low": 177.41, "close": 179.83 },
365 |   { "time":'2019-01-29', "open": 178.96, "high": 180.15, "low": 178.09, "close": 179.69 },
366 |   { "time":'2019-01-30', "open": 180.47, "high": 184.2, "low": 179.78, "close": 182.18 },
367 |   { "time":'2019-01-31', "open": 181.5, "high": 184.67, "low": 181.06, "close": 183.53 },
368 |   { "time":'2019-02-01', "open": 184.03, "high": 185.15, "low": 182.83, "close": 184.37 },
369 |   { "time":'2019-02-04', "open": 184.3, "high": 186.43, "low": 183.84, "close": 186.43 },
370 |   { "time":'2019-02-05', "open": 186.89, "high": 186.99, "low": 184.69, "close": 186.39 },
371 |   { "time":'2019-02-06', "open": 186.69, "high": 186.69, "low": 184.06, "close": 184.72 },
372 |   { "time":'2019-02-07', "open": 183.74, "high": 184.92, "low": 182.45, "close": 184.07 },
373 |   { "time":'2019-02-08', "open": 183.05, "high": 184.58, "low": 182.72, "close": 184.54 },
374 |   { "time":'2019-02-11', "open": 185.0, "high": 185.42, "low": 182.75, "close": 182.92 },
375 |   { "time":'2019-02-12', "open": 183.84, "high": 186.4, "low": 183.52, "close": 185.52 },
376 |   { "time":'2019-02-13', "open": 186.3, "high": 188.68, "low": 185.92, "close": 188.41 },
377 |   { "time":'2019-02-14', "open": 187.5, "high": 188.93, "low": 186.0, "close": 187.71 },
378 |   { "time":'2019-02-15', "open": 189.87, "high": 192.62, "low": 189.05, "close": 192.39 },
379 |   { "time":'2019-02-19', "open": 191.71, "high": 193.19, "low": 191.28, "close": 192.33 },
380 |   { "time":'2019-02-20', "open": 192.39, "high": 192.4, "low": 191.11, "close": 191.85 },
381 |   { "time":'2019-02-21', "open": 191.85, "high": 192.37, "low": 190.61, "close": 191.82 },
382 |   { "time":'2019-02-22', "open": 191.69, "high": 192.54, "low": 191.62, "close": 192.39 },
383 |   { "time":'2019-02-25', "open": 192.75, "high": 193.42, "low": 189.96, "close": 189.98 }
384 | ]
385 | 
386 | priceVolumeMultipane = [
387 |   { "time": '2018-11-28', "value": 18662989.0 },
388 |   { "time": '2018-11-29', "value": 14763658.0 },
389 |   { "time": '2018-11-30', "value": 31142818.0 },
390 |   { "time": '2018-12-03', "value": 27795428.0 },
391 |   { "time": '2018-12-04', "value": 21727411.0 },
392 |   { "time": '2018-12-06', "value": 26880429.0 },
393 |   { "time": '2018-12-07', "value": 16948126.0 },
394 |   { "time": '2018-12-10', "value": 16603356.0 },
395 |   { "time": '2018-12-11', "value": 14991438.0 },
396 |   { "time": '2018-12-12', "value": 18892182.0 },
397 |   { "time": '2018-12-13', "value": 15454706.0 },
398 |   { "time": '2018-12-14', "value": 13960870.0 },
399 |   { "time": '2018-12-17', "value": 18902523.0 },
400 |   { "time": '2018-12-18', "value": 18895777.0 },
401 |   { "time": '2018-12-19', "value": 20968473.0 },
402 |   { "time": '2018-12-20', "value": 26897008.0 },
403 |   { "time": '2018-12-21', "value": 55413082.0 },
404 |   { "time": '2018-12-24', "value": 15077207.0 },
405 |   { "time": '2018-12-26', "value": 17970539.0 },
406 |   { "time": '2018-12-27', "value": 17530977.0 },
407 |   { "time": '2018-12-28', "value": 14771641.0 },
408 |   { "time": '2018-12-31', "value": 15331758.0 },
409 |   { "time": '2019-01-02', "value": 13969691.0 },
410 |   { "time": '2019-01-03', "value": 19245411.0 },
411 |   { "time": '2019-01-04', "value": 17035848.0 },
412 |   { "time": '2019-01-07', "value": 16348982.0 },
413 |   { "time": '2019-01-08', "value": 21425008.0 },
414 |   { "time": '2019-01-09', "value": 18136000.0 },
415 |   { "time": '2019-01-10', "value": 14259910.0 },
416 |   { "time": '2019-01-11', "value": 15801548.0 },
417 |   { "time": '2019-01-14', "value": 11342293.0 },
418 |   { "time": '2019-01-15', "value": 10074386.0 },
419 |   { "time": '2019-01-16', "value": 13411691.0 },
420 |   { "time": '2019-01-17', "value": 15223854.0 },
421 |   { "time": '2019-01-18', "value": 16802516.0 },
422 |   { "time": '2019-01-22', "value": 18284771.0 },
423 |   { "time": '2019-01-23', "value": 15109007.0 },
424 |   { "time": '2019-01-24', "value": 12494109.0 },
425 |   { "time": '2019-01-25', "value": 17806822.0 },
426 |   { "time": '2019-01-28', "value": 25955718.0 },
427 |   { "time": '2019-01-29', "value": 33789235.0 },
428 |   { "time": '2019-01-30', "value": 27260036.0 },
429 |   { "time": '2019-01-31', "value": 28585447.0 },
430 |   { "time": '2019-02-01', "value": 13778392.0 },
431 |   { "time": '2019-02-04', "value": 15818901.0 },
432 |   { "time": '2019-02-05', "value": 14124794.0 },
433 |   { "time": '2019-02-06', "value": 11391442.0 },
434 |   { "time": '2019-02-07', "value": 12436168.0 },
435 |   { "time": '2019-02-08', "value": 12011657.0 },
436 |   { "time": '2019-02-11', "value": 9802798.0 },
437 |   { "time": '2019-02-12', "value": 11227550.0 },
438 |   { "time": '2019-02-13', "value": 11884803.0 },
439 |   { "time": '2019-02-14', "value": 11190094.0 },
440 |   { "time": '2019-02-15', "value": 15719416.0 },
441 |   { "time": '2019-02-19', "value": 12272877.0 },
442 |   { "time": '2019-02-20', "value": 11379006.0 },
443 |   { "time": '2019-02-21', "value": 14680547.0 },
444 |   { "time": '2019-02-22', "value": 12534431.0 },
445 |   { "time": '2019-02-25', "value": 15051182.0 }
446 | ]
447 | 
448 | priceBaselineMultipane = [
449 |   { "time":'2018-11-28', "value": 177.43 },
450 |   { "time":'2018-11-29', "value": 175.66 },
451 |   { "time":'2018-11-30', "value": 180.32 },
452 |   { "time":'2018-12-03', "value": 181.74 },
453 |   { "time":'2018-12-04', "value": 175.3 },
454 |   { "time":'2018-12-06', "value": 175.96 },
455 |   { "time":'2018-12-07', "value": 172.79 },
456 |   { "time":'2018-12-10', "value": 171.69 },
457 |   { "time":'2018-12-11', "value": 172.21 },
458 |   { "time":'2018-12-12', "value": 174.21 },
459 |   { "time":'2018-12-13', "value": 173.87 },
460 |   { "time":'2018-12-14', "value": 172.29 },
461 |   { "time":'2018-12-17', "value": 167.97 },
462 |   { "time":'2018-12-18', "value": 170.04 },
463 |   { "time":'2018-12-19', "value": 167.56 },
464 |   { "time":'2018-12-20', "value": 164.16 },
465 |   { "time":'2018-12-21', "value": 160.48 },
466 |   { "time":'2018-12-24', "value": 158.14 },
467 |   { "time":'2018-12-26', "value": 168.28 },
468 |   { "time":'2018-12-27', "value": 170.32 },
469 |   { "time":'2018-12-28', "value": 170.22 },
470 |   { "time":'2018-12-31', "value": 171.82 },
471 |   { "time":'2019-01-02', "value": 172.41 },
472 |   { "time":'2019-01-03', "value": 168.61 },
473 |   { "time":'2019-01-04', "value": 173.62 },
474 |   { "time":'2019-01-07', "value": 177.04 },
475 |   { "time":'2019-01-08', "value": 177.89 },
476 |   { "time":'2019-01-09', "value": 179.73 },
477 |   { "time":'2019-01-10', "value": 179.06 },
478 |   { "time":'2019-01-11', "value": 179.41 },
479 |   { "time":'2019-01-14', "value": 178.81 },
480 |   { "time":'2019-01-15', "value": 176.47 },
481 |   { "time":'2019-01-16', "value": 177.04 },
482 |   { "time":'2019-01-17', "value": 174.87 },
483 |   { "time":'2019-01-18', "value": 179.58 },
484 |   { "time":'2019-01-22', "value": 177.11 },
485 |   { "time":'2019-01-23', "value": 176.89 },
486 |   { "time":'2019-01-24', "value": 177.29 },
487 |   { "time":'2019-01-25', "value": 180.4 },
488 |   { "time":'2019-01-28', "value": 179.83 },
489 |   { "time":'2019-01-29', "value": 179.69 },
490 |   { "time":'2019-01-30', "value": 182.18 },
491 |   { "time":'2019-01-31', "value": 183.53 },
492 |   { "time":'2019-02-01', "value": 184.37 },
493 |   { "time":'2019-02-04', "value": 186.43 },
494 |   { "time":'2019-02-05', "value": 186.39 },
495 |   { "time":'2019-02-06', "value": 184.72 },
496 |   { "time":'2019-02-07', "value": 184.07 },
497 |   { "time":'2019-02-08', "value": 184.54 },
498 |   { "time":'2019-02-11', "value": 182.92 },
499 |   { "time":'2019-02-12', "value": 185.52 },
500 |   { "time":'2019-02-13', "value": 188.41 },
501 |   { "time":'2019-02-14', "value": 187.71 },
502 |   { "time":'2019-02-15', "value": 192.39 },
503 |   { "time":'2019-02-19', "value": 192.33 },
504 |   { "time":'2019-02-20', "value": 191.85 },
505 |   { "time":'2019-02-21', "value": 191.82 },
506 |   { "time":'2019-02-22', "value": 192.39 },
507 |   { "time":'2019-02-25', "value": 189.98 }
508 | ]
509 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
   1 | # streamlit-lightweight-charts
   2 | Streamlit wrapper for performant Tradingview's Financial: `lightweight-charts`
   3 | 
   4 | The Lightweight Charts library is the best choice to display financial data as an interactive chart on a web page without affecting loading speed and performance.
   5 | 
   6 | - [Features Demo](https://www.tradingview.com/lightweight-charts/)
   7 | - [Documentation](https://tradingview.github.io/lightweight-charts/)
   8 | - [GitHub](https://github.com/tradingview/lightweight-charts)
   9 | - [Pypi](https://pypi.org/project/streamlit-lightweight-charts/)
  10 | 
  11 | ### Versions
  12 | - Version 0.7.19 - FIX: React build was not been commited
  13 | - Version 0.7.20 - Example loading from CSV
  14 | 
  15 | ## How to install:
  16 | ```
  17 | python -m pip install streamlit-lightweight-charts
  18 | ```
  19 | 
  20 | ## How to use:
  21 | ```
  22 | from streamlit_lightweight_charts import renderLightweightCharts
  23 | 
  24 | renderLightweightCharts(charts: <List of Dicts> , key: <str>)
  25 | ```
  26 | 
  27 | ### API
  28 | - charts: `<List of Dicts>`
  29 | 
  30 |     - [chart](https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptions): `<Dict>`
  31 | 
  32 |     - [series](https://tradingview.github.io/lightweight-charts/docs/series-types): `<List of Dicts>`
  33 | 
  34 |         - [type](https://tradingview.github.io/lightweight-charts/docs/series-types): `<str-enum>`
  35 |             [ Area, Bar, Baseline, Candlestick, Histogram, Line ]
  36 | 
  37 |         - data: `<List of Dicts>` accordingly to series type
  38 | 
  39 |         - options: `<Dict>` with style options
  40 | 
  41 |         - priceScale: `<Dict>` optional
  42 | 
  43 |         - markers: `<List of Dicts>` optional
  44 | 
  45 | - key: `<str>` when creating multiple charts in one page
  46 | 
  47 | <br/>
  48 | 
  49 | # e.g.:
  50 | <br />
  51 | 
  52 | # Overlaid Charts
  53 | 
  54 | [![Price with Volume Chart](https://github.com/freyastreamlit/streamlit-lightweight-charts/blob/main/examples/PriceVolumeChart.png?raw=true)](https://freyastreamlit-streamlit-lightw-examplespricevolumechart-j8ldyo.streamlit.app/)
  55 | 
  56 | ### [Click for a working sample on Streamlit Cloud ⬆](https://freyastreamlit-streamlit-lightw-examplespricevolumechart-j8ldyo.streamlit.app/)
  57 | <br />
  58 | 
  59 | ```python
  60 | import streamlit as st
  61 | from streamlit_lightweight_charts import renderLightweightCharts
  62 | import streamlit_lightweight_charts.dataSamples as data
  63 | 
  64 | priceVolumeChartOptions = {
  65 |     "height": 400,
  66 |     "rightPriceScale": {
  67 |         "scaleMargins": {
  68 |             "top": 0.2,
  69 |             "bottom": 0.25,
  70 |         },
  71 |         "borderVisible": False,
  72 |     },
  73 |     "overlayPriceScales": {
  74 |         "scaleMargins": {
  75 |             "top": 0.7,
  76 |             "bottom": 0,
  77 |         }
  78 |     },
  79 |     "layout": {
  80 |         "background": {
  81 |             "type": 'solid',
  82 |             "color": '#131722'
  83 |         },
  84 |         "textColor": '#d1d4dc',
  85 |     },
  86 |     "grid": {
  87 |         "vertLines": {
  88 |             "color": 'rgba(42, 46, 57, 0)',
  89 |         },
  90 |         "horzLines": {
  91 |             "color": 'rgba(42, 46, 57, 0.6)',
  92 |         }
  93 |     }
  94 | }
  95 | 
  96 | priceVolumeSeries = [
  97 |     {
  98 |         "type": 'Area',
  99 |         "data": data.priceVolumeSeriesArea,
 100 |         "options": {
 101 |             "topColor": 'rgba(38,198,218, 0.56)',
 102 |             "bottomColor": 'rgba(38,198,218, 0.04)',
 103 |             "lineColor": 'rgba(38,198,218, 1)',
 104 |             "lineWidth": 2,
 105 |         }
 106 |     },
 107 |     {
 108 |         "type": 'Histogram',
 109 |         "data": data.priceVolumeSeriesHistogram,
 110 |         "options": {
 111 |             "color": '#26a69a',
 112 |             "priceFormat": {
 113 |                 "type": 'volume',
 114 |             },
 115 |             "priceScaleId": "" # set as an overlay setting,
 116 |         },
 117 |         "priceScale": {
 118 |             "scaleMargins": {
 119 |                 "top": 0.7,
 120 |                 "bottom": 0,
 121 |             }
 122 |         }
 123 |     }
 124 | ]
 125 | st.subheader("Price and Volume Series Chart")
 126 | 
 127 | renderLightweightCharts([
 128 |     {
 129 |         "chart": priceVolumeChartOptions,
 130 |         "series": priceVolumeSeries
 131 |     }
 132 | ], 'priceAndVolume')
 133 | ```
 134 | ---
 135 | <br />
 136 | 
 137 | [![Overlaid Areas Chart](https://github.com/freyastreamlit/streamlit-lightweight-charts/blob/main/examples/OverlaidAreasChart.png?raw=true)](https://freyastreamlit-streamlit-ligh-examplesoverlaidareaschart-3pg5tr.streamlit.app/)
 138 | 
 139 | ### [Click for a working sample on Streamlit Cloud ⬆](https://freyastreamlit-streamlit-ligh-examplesoverlaidareaschart-3pg5tr.streamlit.app/)
 140 | <br />
 141 | 
 142 | ```python
 143 | import streamlit as st
 144 | from streamlit_lightweight_charts import renderLightweightCharts
 145 | import streamlit_lightweight_charts.dataSamples as data
 146 | 
 147 | overlaidAreaSeriesOptions = {
 148 |     "height": 400,
 149 |     "rightPriceScale": {
 150 |         "scaleMargins": {
 151 |             "top": 0.1,
 152 |             "bottom": 0.1,
 153 |         },
 154 |         "mode": 2, # PriceScaleMode: 0-Normal, 1-Logarithmic, 2-Percentage, 3-IndexedTo100
 155 |         "borderColor": 'rgba(197, 203, 206, 0.4)',
 156 |     },
 157 |     "timeScale": {
 158 |         "borderColor": 'rgba(197, 203, 206, 0.4)',
 159 |     },
 160 |     "layout": {
 161 |         "background": {
 162 |             "type": 'solid',
 163 |             "color": '#100841'
 164 |         },
 165 |         "textColor": '#ffffff',
 166 |     },
 167 |     "grid": {
 168 |         "vertLines": {
 169 |             "color": 'rgba(197, 203, 206, 0.4)',
 170 |             "style": 1, # LineStyle: 0-Solid, 1-Dotted, 2-Dashed, 3-LargeDashed
 171 |         },
 172 |         "horzLines": {
 173 |             "color": 'rgba(197, 203, 206, 0.4)',
 174 |             "style": 1, # LineStyle: 0-Solid, 1-Dotted, 2-Dashed, 3-LargeDashed
 175 |         }
 176 |     }
 177 | }
 178 | 
 179 | seriesOverlaidChart = [
 180 |     {
 181 |         "type": 'Area',
 182 |         "data": data.seriesMultipleChartArea01,
 183 |         "options": {
 184 |             "topColor": 'rgba(255, 192, 0, 0.7)',
 185 |             "bottomColor": 'rgba(255, 192, 0, 0.3)',
 186 |             "lineColor": 'rgba(255, 192, 0, 1)',
 187 |             "lineWidth": 2,
 188 |         },
 189 |         "markers": [
 190 |             {
 191 |                 "time": '2019-04-08',
 192 |                 "position": 'aboveBar',
 193 |                 "color": 'rgba(255, 192, 0, 1)',
 194 |                 "shape": 'arrowDown',
 195 |                 "text": 'H',
 196 |                 "size": 3
 197 |             },
 198 |             {
 199 |                 "time": '2019-05-13',
 200 |                 "position": 'belowBar',
 201 |                 "color": 'rgba(255, 192, 0, 1)',
 202 |                 "shape": 'arrowUp',
 203 |                 "text": 'L',
 204 |                 "size": 3
 205 |             },
 206 |         ]
 207 |     },
 208 |     {
 209 |         "type": 'Area',
 210 |         "data": data.seriesMultipleChartArea02,
 211 |         "options": {
 212 |             "topColor": 'rgba(67, 83, 254, 0.7)',
 213 |             "bottomColor": 'rgba(67, 83, 254, 0.3)',
 214 |             "lineColor": 'rgba(67, 83, 254, 1)',
 215 |             "lineWidth": 2,
 216 |         },
 217 |         "markers": [
 218 | 
 219 |             {
 220 |                 "time": '2019-05-03',
 221 |                 "position": 'aboveBar',
 222 |                 "color": 'rgba(67, 83, 254, 1)',
 223 |                 "shape": 'arrowDown',
 224 |                 "text": 'PEAK',
 225 |                 "size": 3
 226 |             },
 227 |         ]
 228 |     }
 229 | ]
 230 | st.subheader("Overlaid Series with Markers")
 231 | 
 232 | renderLightweightCharts([
 233 |     {
 234 |         "chart": overlaidAreaSeriesOptions,
 235 |         "series": seriesOverlaidChart
 236 |     }
 237 | ], 'overlaid')
 238 | ```
 239 | ---
 240 | 
 241 | # Streamlit integration
 242 | 
 243 | [![Data Toggling for an Area Chart](https://github.com/freyastreamlit/streamlit-lightweight-charts/blob/main/examples/DataToggling.png?raw=true)](https://freyastreamlit-streamlit-lightweigh-examplesdatatoggling-cbni35.streamlit.app/)
 244 | 
 245 | ### [Click for a working sample on Streamlit Cloud ⬆](https://freyastreamlit-streamlit-lightweigh-examplesdatatoggling-cbni35.streamlit.app/)
 246 | <br />
 247 | 
 248 | ```python
 249 | import streamlit as st
 250 | from streamlit_lightweight_charts import renderLightweightCharts
 251 | import streamlit_lightweight_charts.dataSamples as data
 252 | 
 253 | chartOptions = {
 254 |     "layout": {
 255 |         "textColor": 'black',
 256 |         "background": {
 257 |             "type": 'solid',
 258 |             "color": 'white'
 259 |         }
 260 |     }
 261 | }
 262 | 
 263 | st.subheader("Data Toggling for an Area Chart")
 264 | 
 265 | data_select = st.sidebar.radio('Select data source:', ('Area 01', 'Area 02'))
 266 | 
 267 | if data_select == 'Area 01':
 268 |     renderLightweightCharts( [
 269 |         {
 270 |             "chart": chartOptions,
 271 |             "series": [{
 272 |                 "type": 'Area',
 273 |                 "data": data.seriesMultipleChartArea01,
 274 |                 "options": {}
 275 |             }],
 276 |         }
 277 |     ], 'area')
 278 | else:
 279 |     renderLightweightCharts( [
 280 |         {
 281 |             "chart": chartOptions,
 282 |             "series": [{
 283 |                 "type": 'Area',
 284 |                 "data": data.seriesMultipleChartArea02,
 285 |                 "options": {}
 286 |             }],
 287 |         }
 288 |     ], 'area')
 289 | ```
 290 | ---
 291 | <br />
 292 | 
 293 | ![Multi Pane Chart with Pandas](https://github.com/freyastreamlit/streamlit-lightweight-charts/blob/main/examples/MultiPaneChartsWithPandas.png?raw=true)
 294 | 
 295 | ```python
 296 | import streamlit as st
 297 | from streamlit_lightweight_charts import renderLightweightCharts
 298 | 
 299 | import json
 300 | import numpy as np
 301 | import yfinance as yf
 302 | import pandas as pd
 303 | import pandas_ta as ta
 304 | 
 305 | COLOR_BULL = 'rgba(38,166,154,0.9)' # #26a69a
 306 | COLOR_BEAR = 'rgba(239,83,80,0.9)'  # #ef5350
 307 | 
 308 | # Request historic pricing data via finance.yahoo.com API
 309 | df = yf.Ticker('AAPL').history(period='4mo')[['Open', 'High', 'Low', 'Close', 'Volume']]
 310 | 
 311 | # Some data wrangling to match required format
 312 | df = df.reset_index()
 313 | df.columns = ['time','open','high','low','close','volume']                  # rename columns
 314 | df['time'] = df['time'].dt.strftime('%Y-%m-%d')                             # Date to string
 315 | df['color'] = np.where(  df['open'] > df['close'], COLOR_BEAR, COLOR_BULL)  # bull or bear
 316 | df.ta.macd(close='close', fast=6, slow=12, signal=5, append=True)           # calculate macd
 317 | 
 318 | # export to JSON format
 319 | candles = json.loads(df.to_json(orient = "records"))
 320 | volume = json.loads(df.rename(columns={"volume": "value",}).to_json(orient = "records"))
 321 | macd_fast = json.loads(df.rename(columns={"MACDh_6_12_5": "value"}).to_json(orient = "records"))
 322 | macd_slow = json.loads(df.rename(columns={"MACDs_6_12_5": "value"}).to_json(orient = "records"))
 323 | df['color'] = np.where(  df['MACD_6_12_5'] > 0, COLOR_BULL, COLOR_BEAR)  # MACD histogram color
 324 | macd_hist = json.loads(df.rename(columns={"MACD_6_12_5": "value"}).to_json(orient = "records"))
 325 | 
 326 | 
 327 | chartMultipaneOptions = [
 328 |     {
 329 |         "width": 600,
 330 |         "height": 400,
 331 |         "layout": {
 332 |             "background": {
 333 |                 "type": "solid",
 334 |                 "color": 'white'
 335 |             },
 336 |             "textColor": "black"
 337 |         },
 338 |         "grid": {
 339 |             "vertLines": {
 340 |                 "color": "rgba(197, 203, 206, 0.5)"
 341 |                 },
 342 |             "horzLines": {
 343 |                 "color": "rgba(197, 203, 206, 0.5)"
 344 |             }
 345 |         },
 346 |         "crosshair": {
 347 |             "mode": 0
 348 |         },
 349 |         "priceScale": {
 350 |             "borderColor": "rgba(197, 203, 206, 0.8)"
 351 |         },
 352 |         "timeScale": {
 353 |             "borderColor": "rgba(197, 203, 206, 0.8)",
 354 |             "barSpacing": 15
 355 |         },
 356 |         "watermark": {
 357 |             "visible": True,
 358 |             "fontSize": 48,
 359 |             "horzAlign": 'center',
 360 |             "vertAlign": 'center',
 361 |             "color": 'rgba(171, 71, 188, 0.3)',
 362 |             "text": 'AAPL - D1',
 363 |         }
 364 |     },
 365 |     {
 366 |         "width": 600,
 367 |         "height": 100,
 368 |         "layout": {
 369 |             "background": {
 370 |                 "type": 'solid',
 371 |                 "color": 'transparent'
 372 |             },
 373 |             "textColor": 'black',
 374 |         },
 375 |         "grid": {
 376 |             "vertLines": {
 377 |                 "color": 'rgba(42, 46, 57, 0)',
 378 |             },
 379 |             "horzLines": {
 380 |                 "color": 'rgba(42, 46, 57, 0.6)',
 381 |             }
 382 |         },
 383 |         "timeScale": {
 384 |             "visible": False,
 385 |         },
 386 |         "watermark": {
 387 |             "visible": True,
 388 |             "fontSize": 18,
 389 |             "horzAlign": 'left',
 390 |             "vertAlign": 'top',
 391 |             "color": 'rgba(171, 71, 188, 0.7)',
 392 |             "text": 'Volume',
 393 |         }
 394 |     },
 395 |     {
 396 |         "width": 600,
 397 |         "height": 200,
 398 |         "layout": {
 399 |             "background": {
 400 |                 "type": "solid",
 401 |                 "color": 'white'
 402 |             },
 403 |             "textColor": "black"
 404 |         },
 405 |         "timeScale": {
 406 |             "visible": False,
 407 |         },
 408 |         "watermark": {
 409 |             "visible": True,
 410 |             "fontSize": 18,
 411 |             "horzAlign": 'left',
 412 |             "vertAlign": 'center',
 413 |             "color": 'rgba(171, 71, 188, 0.7)',
 414 |             "text": 'MACD',
 415 |         }
 416 |     }
 417 | ]
 418 | 
 419 | seriesCandlestickChart = [
 420 |     {
 421 |         "type": 'Candlestick',
 422 |         "data": candles,
 423 |         "options": {
 424 |             "upColor": COLOR_BULL,
 425 |             "downColor": COLOR_BEAR,
 426 |             "borderVisible": False,
 427 |             "wickUpColor": COLOR_BULL,
 428 |             "wickDownColor": COLOR_BEAR
 429 |         }
 430 |     }
 431 | ]
 432 | 
 433 | seriesVolumeChart = [
 434 |     {
 435 |         "type": 'Histogram',
 436 |         "data": volume,
 437 |         "options": {
 438 |             "priceFormat": {
 439 |                 "type": 'volume',
 440 |             },
 441 |             "priceScaleId": "" # set as an overlay setting,
 442 |         },
 443 |         "priceScale": {
 444 |             "scaleMargins": {
 445 |                 "top": 0,
 446 |                 "bottom": 0,
 447 |             },
 448 |             "alignLabels": False
 449 |         }
 450 |     }
 451 | ]
 452 | 
 453 | seriesMACDchart = [
 454 |     {
 455 |         "type": 'Line',
 456 |         "data": macd_fast,
 457 |         "options": {
 458 |             "color": 'blue',
 459 |             "lineWidth": 2
 460 |         }
 461 |     },
 462 |     {
 463 |         "type": 'Line',
 464 |         "data": macd_slow,
 465 |         "options": {
 466 |             "color": 'green',
 467 |             "lineWidth": 2
 468 |         }
 469 |     },
 470 |     {
 471 |         "type": 'Histogram',
 472 |         "data": macd_hist,
 473 |         "options": {
 474 |             "color": 'red',
 475 |             "lineWidth": 1
 476 |         }
 477 |     }
 478 | ]
 479 | 
 480 | st.subheader("Multipane Chart with Pandas")
 481 | 
 482 | renderLightweightCharts([
 483 |     {
 484 |         "chart": chartMultipaneOptions[0],
 485 |         "series": seriesCandlestickChart
 486 |     },
 487 |     {
 488 |         "chart": chartMultipaneOptions[1],
 489 |         "series": seriesVolumeChart
 490 |     },
 491 |     {
 492 |         "chart": chartMultipaneOptions[2],
 493 |         "series": seriesMACDchart
 494 |     }
 495 | ], 'multipane')
 496 | ```
 497 | ---
 498 | <br />
 499 | 
 500 | ![Multi Pane Chart (intraday) from CSV)](https://github.com/freyastreamlit/streamlit-lightweight-charts/blob/main/examples/MultiPaneChartsFromCSV.png?raw=true)
 501 | 
 502 | ```python
 503 | import streamlit as st
 504 | from streamlit_lightweight_charts import renderLightweightCharts
 505 | 
 506 | import json
 507 | import numpy as np
 508 | import pandas as pd
 509 | 
 510 | COLOR_BULL = 'rgba(38,166,154,0.9)' # #26a69a
 511 | COLOR_BEAR = 'rgba(239,83,80,0.9)'  # #ef5350
 512 | 
 513 | CSVFILE = 'https://github.com/freyastreamlit/streamlit-lightweight-charts/blob/main/examples/MultiPaneChartsFromCSV.csv?raw=true'
 514 | 
 515 | df = pd.read_csv(CSVFILE, skiprows=0, parse_dates=['datetime'], skip_blank_lines=True)
 516 | 
 517 | df['time'] = df['datetime'].view('int64') // 10**9  # We will use time in UNIX timestamp
 518 | df['color'] = np.where(  df['open'] > df['close'], COLOR_BEAR, COLOR_BULL)  # bull or bear
 519 | 
 520 | # export to JSON format
 521 | candles = json.loads(
 522 |     df.filter(['time','open','high','low','close'], axis=1)
 523 |       .to_json(orient = "records") )
 524 | 
 525 | volume = json.loads(
 526 |     df.filter(['time','volume'], axis=1)
 527 |       .rename(columns={"volume": "value",})
 528 |       .to_json(orient = "records") )
 529 | 
 530 | macd_fast = json.loads(
 531 |     df.filter(['time','macd_fast'], axis=1)
 532 |       .rename(columns={"macd_fast": "value"})
 533 |       .to_json(orient = "records"))
 534 | 
 535 | macd_slow = json.loads(
 536 |     df.filter(['time','macd_slow'], axis=1)
 537 |       .rename(columns={"macd_slow": "value"})
 538 |       .to_json(orient = "records"))
 539 | 
 540 | df['color'] = np.where(  df['macd_hist'] > 0, COLOR_BULL, COLOR_BEAR)  # MACD histogram color
 541 | macd_hist = json.loads(
 542 |     df.filter(['time','macd_hist'], axis=1)
 543 |       .rename(columns={"macd_hist": "value"})
 544 |       .to_json(orient = "records"))
 545 | 
 546 | chartMultipaneOptions = [
 547 |     {
 548 |         "width": 600,
 549 |         "height": 400,
 550 |         "layout": {
 551 |             "background": {
 552 |                 "type": "solid",
 553 |                 "color": 'white'
 554 |             },
 555 |             "textColor": "black"
 556 |         },
 557 |         "grid": {
 558 |             "vertLines": {
 559 |                 "color": "rgba(197, 203, 206, 0.5)"
 560 |                 },
 561 |             "horzLines": {
 562 |                 "color": "rgba(197, 203, 206, 0.5)"
 563 |             }
 564 |         },
 565 |         "crosshair": {
 566 |             "mode": 0
 567 |         },
 568 |         "priceScale": {
 569 |             "borderColor": "rgba(197, 203, 206, 0.8)"
 570 |         },
 571 |         "timeScale": {
 572 |             "borderColor": "rgba(197, 203, 206, 0.8)",
 573 |             "barSpacing": 10,
 574 |             "minBarSpacing": 8,
 575 |             "timeVisible": True,
 576 |             "secondsVisible": False,
 577 |         },
 578 |         "watermark": {
 579 |             "visible": True,
 580 |             "fontSize": 48,
 581 |             "horzAlign": 'center',
 582 |             "vertAlign": 'center',
 583 |             "color": 'rgba(171, 71, 188, 0.3)',
 584 |             "text": 'Intraday',
 585 |         }
 586 |     },
 587 |     {
 588 |         "width": 600,
 589 |         "height": 100,
 590 |         "layout": {
 591 |             "background": {
 592 |                 "type": 'solid',
 593 |                 "color": 'transparent'
 594 |             },
 595 |             "textColor": 'black',
 596 |         },
 597 |         "grid": {
 598 |             "vertLines": {
 599 |                 "color": 'rgba(42, 46, 57, 0)',
 600 |             },
 601 |             "horzLines": {
 602 |                 "color": 'rgba(42, 46, 57, 0.6)',
 603 |             }
 604 |         },
 605 |         "timeScale": {
 606 |             "visible": False,
 607 |         },
 608 |         "watermark": {
 609 |             "visible": True,
 610 |             "fontSize": 18,
 611 |             "horzAlign": 'left',
 612 |             "vertAlign": 'top',
 613 |             "color": 'rgba(171, 71, 188, 0.7)',
 614 |             "text": 'Volume',
 615 |         }
 616 |     },
 617 |     {
 618 |         "width": 600,
 619 |         "height": 200,
 620 |         "layout": {
 621 |             "background": {
 622 |                 "type": "solid",
 623 |                 "color": 'white'
 624 |             },
 625 |             "textColor": "black"
 626 |         },
 627 |         "timeScale": {
 628 |             "visible": False,
 629 |         },
 630 |         "watermark": {
 631 |             "visible": True,
 632 |             "fontSize": 18,
 633 |             "horzAlign": 'left',
 634 |             "vertAlign": 'center',
 635 |             "color": 'rgba(171, 71, 188, 0.7)',
 636 |             "text": 'MACD',
 637 |         }
 638 |     }
 639 | ]
 640 | 
 641 | seriesCandlestickChart = [
 642 |     {
 643 |         "type": 'Candlestick',
 644 |         "data": candles,
 645 |         "options": {
 646 |             "upColor": COLOR_BULL,
 647 |             "downColor": COLOR_BEAR,
 648 |             "borderVisible": False,
 649 |             "wickUpColor": COLOR_BULL,
 650 |             "wickDownColor": COLOR_BEAR
 651 |         }
 652 |     }
 653 | ]
 654 | 
 655 | seriesVolumeChart = [
 656 |     {
 657 |         "type": 'Histogram',
 658 |         "data": volume,
 659 |         "options": {
 660 |             "priceFormat": {
 661 |                 "type": 'volume',
 662 |             },
 663 |             "priceScaleId": "" # set as an overlay setting,
 664 |         },
 665 |         "priceScale": {
 666 |             "scaleMargins": {
 667 |                 "top": 0,
 668 |                 "bottom": 0,
 669 |             },
 670 |             "alignLabels": False
 671 |         }
 672 |     }
 673 | ]
 674 | 
 675 | seriesMACDchart = [
 676 |     {
 677 |         "type": 'Line',
 678 |         "data": macd_fast,
 679 |         "options": {
 680 |             "color": 'blue',
 681 |             "lineWidth": 2
 682 |         }
 683 |     },
 684 |     {
 685 |         "type": 'Line',
 686 |         "data": macd_slow,
 687 |         "options": {
 688 |             "color": 'green',
 689 |             "lineWidth": 2
 690 |         }
 691 |     },
 692 |     {
 693 |         "type": 'Histogram',
 694 |         "data": macd_hist,
 695 |         "options": {
 696 |             # "color": 'red',
 697 |             "lineWidth": 1
 698 |         }
 699 |     }
 700 | ]
 701 | 
 702 | st.subheader("Multipane Chart (intraday) from CSV")
 703 | 
 704 | renderLightweightCharts([
 705 |     {
 706 |         "chart": chartMultipaneOptions[0],
 707 |         "series": seriesCandlestickChart
 708 |     },
 709 |     {
 710 |         "chart": chartMultipaneOptions[1],
 711 |         "series": seriesVolumeChart
 712 |     },
 713 |     {
 714 |         "chart": chartMultipaneOptions[2],
 715 |         "series": seriesMACDchart
 716 |     }
 717 | ], 'multipane')
 718 | ```
 719 | ---
 720 | <br />
 721 | 
 722 | # Basic charts
 723 | 
 724 | ![Line Chart](https://github.com/freyastreamlit/streamlit-lightweight-charts/blob/main/examples/LineChart.png?raw=true)
 725 | 
 726 | ```python
 727 | import streamlit as st
 728 | from streamlit_lightweight_charts import renderLightweightCharts
 729 | 
 730 | chartOptions = {
 731 |     "layout": {
 732 |         "textColor": 'black',
 733 |         "background": {
 734 |             "type": 'solid',
 735 |             "color": 'white'
 736 |         }
 737 |     }
 738 | }
 739 | 
 740 | seriesLineChart = [{
 741 |     "type": 'Line',
 742 |     "data": [
 743 |         { "time": '2018-12-22', "value": 32.51 },
 744 |         { "time": '2018-12-23', "value": 31.11 },
 745 |         { "time": '2018-12-24', "value": 27.02 },
 746 |         { "time": '2018-12-25', "value": 27.32 },
 747 |         { "time": '2018-12-26', "value": 25.17 },
 748 |         { "time": '2018-12-27', "value": 28.89 },
 749 |         { "time": '2018-12-28', "value": 25.46 },
 750 |         { "time": '2018-12-29', "value": 23.92 },
 751 |         { "time": '2018-12-30', "value": 22.68 },
 752 |         { "time": '2018-12-31', "value": 22.67 },
 753 |     ],
 754 |     "options": {}
 755 | }]
 756 | 
 757 | st.subheader("Line Chart with Watermark")
 758 | 
 759 | renderLightweightCharts([
 760 |     {
 761 |         "chart": chartOptions,
 762 |         "series": seriesLineChart
 763 |     }
 764 | ], 'line')
 765 | ```
 766 | ---
 767 | <br />
 768 | 
 769 | ![Area Chart](https://github.com/freyastreamlit/streamlit-lightweight-charts/blob/main/examples/AreaChart.png?raw=true)
 770 | 
 771 | ```python
 772 | import streamlit as st
 773 | from streamlit_lightweight_charts import renderLightweightCharts
 774 | 
 775 | chartOptions = {
 776 |     "layout": {
 777 |         "textColor": 'black',
 778 |         "background": {
 779 |             "type": 'solid',
 780 |             "color": 'white'
 781 |         }
 782 |     }
 783 | }
 784 | 
 785 | seriesAreaChart = [{
 786 |     "type": 'Area',
 787 |     "data": [
 788 |         { "time": '2018-12-22', "value": 32.51 },
 789 |         { "time": '2018-12-23', "value": 31.11 },
 790 |         { "time": '2018-12-24', "value": 27.02 },
 791 |         { "time": '2018-12-25', "value": 27.32 },
 792 |         { "time": '2018-12-26', "value": 25.17 },
 793 |         { "time": '2018-12-27', "value": 28.89 },
 794 |         { "time": '2018-12-28', "value": 25.46 },
 795 |         { "time": '2018-12-29', "value": 23.92 },
 796 |         { "time": '2018-12-30', "value": 22.68 },
 797 |         { "time": '2018-12-31', "value": 22.67 },
 798 |     ],
 799 |     "options": {}
 800 | }]
 801 | 
 802 | st.subheader("Area Chart with Watermark")
 803 | renderLightweightCharts( [
 804 |     {
 805 |         "chart": chartOptions,
 806 |         "series": seriesAreaChart,
 807 |     }
 808 | ], 'area')
 809 | ```
 810 | ---
 811 | <br />
 812 | 
 813 | ![Histogram Chart](https://github.com/freyastreamlit/streamlit-lightweight-charts/blob/main/examples/HistogramChart.png?raw=true)
 814 | 
 815 | ```python
 816 | import streamlit as st
 817 | from streamlit_lightweight_charts import renderLightweightCharts
 818 | 
 819 | chartOptions = {
 820 |     "layout": {
 821 |         "textColor": 'black',
 822 |         "background": {
 823 |             "type": 'solid',
 824 |             "color": 'white'
 825 |         }
 826 |     }
 827 | }
 828 | 
 829 | seriesHistogramChart = [{
 830 |     "type": 'Histogram',
 831 |     "data": [
 832 |         { "value": 1, "time": 1642425322 },
 833 |         { "value": 8, "time": 1642511722 },
 834 |         { "value": 10, "time": 1642598122 },
 835 |         { "value": 20, "time": 1642684522 },
 836 |         { "value": 3, "time": 1642770922, "color": 'red' },
 837 |         { "value": 43, "time": 1642857322 },
 838 |         { "value": 41, "time": 1642943722, "color": 'red' },
 839 |         { "value": 43, "time": 1643030122 },
 840 |         { "value": 56, "time": 1643116522 },
 841 |         { "value": 46, "time": 1643202922, "color": 'red' }
 842 |     ],
 843 |     "options": { "color": '#26a69a' }
 844 | }]
 845 | 
 846 | st.subheader("Histogram Chart with Watermark")
 847 | 
 848 | renderLightweightCharts([
 849 |     {
 850 |         "chart": chartOptions,
 851 |         "series": seriesHistogramChart
 852 |     }
 853 | ], 'histogram')
 854 | ```
 855 | ---
 856 | <br />
 857 | 
 858 | ![Bar Chart](https://github.com/freyastreamlit/streamlit-lightweight-charts/blob/main/examples/BarChart.png?raw=true)
 859 | 
 860 | ```python
 861 | import streamlit as st
 862 | from streamlit_lightweight_charts import renderLightweightCharts
 863 | 
 864 | chartOptions = {
 865 |     "layout": {
 866 |         "textColor": 'black',
 867 |         "background": {
 868 |             "type": 'solid',
 869 |             "color": 'white'
 870 |         }
 871 |     }
 872 | }
 873 | 
 874 | seriesBarChart = [{
 875 |     "type": 'Bar',
 876 |     "data": [
 877 |         { "open": 10, "high": 10.63, "low": 9.49, "close": 9.55, "time": 1642427876 },
 878 |         { "open": 9.55, "high": 10.30, "low": 9.42, "close": 9.94, "time": 1642514276 },
 879 |         { "open": 9.94, "high": 10.17, "low": 9.92, "close": 9.78, "time": 1642600676 },
 880 |         { "open": 9.78, "high": 10.59, "low": 9.18, "close": 9.51, "time": 1642687076 },
 881 |         { "open": 9.51, "high": 10.46, "low": 9.10, "close": 10.17, "time": 1642773476 },
 882 |         { "open": 10.17, "high": 10.96, "low": 10.16, "close": 10.47, "time": 1642859876 },
 883 |         { "open": 10.47, "high": 11.39, "low": 10.40, "close": 10.81, "time": 1642946276 },
 884 |         { "open": 10.81, "high": 11.60, "low": 10.30, "close": 10.75, "time": 1643032676 },
 885 |         { "open": 10.75, "high": 11.60, "low": 10.49, "close": 10.93, "time": 1643119076 },
 886 |         { "open": 10.93, "high": 11.53, "low": 10.76, "close": 10.96, "time": 1643205476 }
 887 |     ],
 888 |     "options": {
 889 |         "upColor": '#26a69a',
 890 |         "downColor": '#ef5350'
 891 |     }
 892 | }]
 893 | 
 894 | st.subheader("Bar Chart with Watermark")
 895 | renderLightweightCharts([
 896 |     {
 897 |         "chart": chartOptions,
 898 |         "series": seriesBarChart
 899 |     }
 900 | ], 'bar')
 901 | ```
 902 | ---
 903 | <br />
 904 | 
 905 | ![Candlestick Chart](https://github.com/freyastreamlit/streamlit-lightweight-charts/blob/main/examples/CandlestickChart.png?raw=true)
 906 | 
 907 | ```python
 908 | import streamlit as st
 909 | from streamlit_lightweight_charts import renderLightweightCharts
 910 | 
 911 | chartOptions = {
 912 |     "layout": {
 913 |         "textColor": 'black',
 914 |         "background": {
 915 |             "type": 'solid',
 916 |             "color": 'white'
 917 |         }
 918 |     }
 919 | }
 920 | 
 921 | seriesCandlestickChart = [{
 922 |     "type": 'Candlestick',
 923 |     "data": [
 924 |         { "open": 10, "high": 10.63, "low": 9.49, "close": 9.55, "time": 1642427876 },
 925 |         { "open": 9.55, "high": 10.30, "low": 9.42, "close": 9.94, "time": 1642514276 },
 926 |         { "open": 9.94, "high": 10.17, "low": 9.92, "close": 9.78, "time": 1642600676 },
 927 |         { "open": 9.78, "high": 10.59, "low": 9.18, "close": 9.51, "time": 1642687076 },
 928 |         { "open": 9.51, "high": 10.46, "low": 9.10, "close": 10.17, "time": 1642773476 },
 929 |         { "open": 10.17, "high": 10.96, "low": 10.16, "close": 10.47, "time": 1642859876 },
 930 |         { "open": 10.47, "high": 11.39, "low": 10.40, "close": 10.81, "time": 1642946276 },
 931 |         { "open": 10.81, "high": 11.60, "low": 10.30, "close": 10.75, "time": 1643032676 },
 932 |         { "open": 10.75, "high": 11.60, "low": 10.49, "close": 10.93, "time": 1643119076 },
 933 |         { "open": 10.93, "high": 11.53, "low": 10.76, "close": 10.96, "time": 1643205476 }
 934 |     ],
 935 |     "options": {
 936 |         "upColor": '#26a69a',
 937 |         "downColor": '#ef5350',
 938 |         "borderVisible": False,
 939 |         "wickUpColor": '#26a69a',
 940 |         "wickDownColor": '#ef5350'
 941 |     }
 942 | }]
 943 | 
 944 | st.subheader("Candlestick Chart with Watermark")
 945 | 
 946 | renderLightweightCharts([
 947 |     {
 948 |         "chart": chartOptions,
 949 |         "series": seriesCandlestickChart
 950 |     }
 951 | ], 'candlestick')
 952 | ```
 953 | ---
 954 | <br />
 955 | 
 956 | ![Baseline Chart](https://github.com/freyastreamlit/streamlit-lightweight-charts/blob/main/examples/BaselineChart.png?raw=true)
 957 | 
 958 | ```python
 959 | import streamlit as st
 960 | from streamlit_lightweight_charts import renderLightweightCharts
 961 | 
 962 | chartOptions = {
 963 |     "layout": {
 964 |         "textColor": 'black',
 965 |         "background": {
 966 |             "type": 'solid',
 967 |             "color": 'white'
 968 |         }
 969 |     }
 970 | }
 971 | 
 972 | seriesBaselineChart = [{
 973 |     "type": 'Baseline',
 974 |     "data": [
 975 |         { "value": 1, "time": 1642425322 },
 976 |         { "value": 8, "time": 1642511722 },
 977 |         { "value": 10, "time": 1642598122 },
 978 |         { "value": 20, "time": 1642684522 },
 979 |         { "value": 3, "time": 1642770922 },
 980 |         { "value": 43, "time": 1642857322 },
 981 |         { "value": 41, "time": 1642943722 },
 982 |         { "value": 43, "time": 1643030122 },
 983 |         { "value": 56, "time": 1643116522 },
 984 |         { "value": 46, "time": 1643202922 }
 985 |     ],
 986 |     "options": {
 987 |         "baseValue": { "type": "price", "price": 25 },
 988 |         "topLineColor": 'rgba( 38, 166, 154, 1)',
 989 |         "topFillColor1": 'rgba( 38, 166, 154, 0.28)',
 990 |         "topFillColor2": 'rgba( 38, 166, 154, 0.05)',
 991 |         "bottomLineColor": 'rgba( 239, 83, 80, 1)',
 992 |         "bottomFillColor1": 'rgba( 239, 83, 80, 0.05)',
 993 |         "bottomFillColor2": 'rgba( 239, 83, 80, 0.28)'
 994 |     }
 995 | }]
 996 | 
 997 | st.subheader("Baseline Chart with Watermark")
 998 | 
 999 | renderLightweightCharts([
1000 |     {
1001 |         "chart": chartOptions,
1002 |         "series": seriesBaselineChart
1003 |     }
1004 | ], 'baseline')
1005 | ```
1006 | 


--------------------------------------------------------------------------------