Gatsby/React implementation of Lightweight Charts for displaying interactive financial charts.
Download and Installation
Installing via npm
npm install --save gatsby-react-lightweight-charts
Installing via yarn
yarn add gatsby-react-lightweight-charts
Usage
To create a basic candlestick chart, write as follows:
const MyChart = { const params = options: alignLabels: true timeScale: rightOffset: 12 barSpacing: 3 fixLeftEdge: true lockVisibleTimeRangeOnResize: true rightBarStaysOnScroll: true borderVisible: false borderColor: "#fff000" visible: true timeVisible: true secondsVisible: false candlestickSeries: data: time: '2020-10-19' open: 18034 high: 18099 low: 17857 close: 17985 time: '2020-10-22' open: 18082 high: 18140 low: 17756 close: 17875 time: '2020-10-23' open: 17577 high: 17949 low: 17544 close: 17853 time: '2020-10-24' open: 17858 high: 18237 low: 17631 close: 17697 time: '2020-10-25' open: 17752 high: 18050 low: 17683 close: 17907 time: '2020-10-26' open: 17688 high: 17734 low: 17091 close: 17223 time: '2020-10-29' open: 17374 high: 17599 low: 17095 close: 17320 time: '2020-10-30' open: 17316 high: 17643 low: 17264 close: 17624 time: '2020-10-31' open: 17798 high: 17885 low: 17559 close: 17588 time: '2020-11-01' open: 17684 high: 18086 low: 17590 close: 18046 time: '2020-11-02' open: 18247 high: 18301 low: 17739 close: 17993 time: '2020-11-05' open: 18102 high: 18241 low: 17930 close: 18219 return <Chart options=paramsoptions candlestickSeries=paramscandlestickSeries autoWidth height=320 /> }
Wrapper props
Name | Type | Description |
---|---|---|
options |
object |
Defines the global options of the chart. Refer to the official Docs |
autoWidth |
boolean |
If true, the chart resizes automatically to 100% of its container width |
autoHeight |
boolean |
If true, the chart resizes automatically to 100% of its container height |
width |
number |
if autoWidth is false, defines the width of the chart in px |
height |
number |
if autoHeight is false, defines the height of the chart in px |
legend |
string |
Display a global legend on the top-left corner of the chart (can be considered as a title) |
candlestickSeries |
SeriesObject list |
List of candlestick series to be displayed |
barSeries |
SeriesObject list |
List of bar series to be displayed |
lineSeries |
SeriesObject list |
List of line series to be displayed |
areaSeries |
SeriesObject list |
List of area series to be displayed |
histogramSeries |
SeriesObject list |
List of histogram series to be displayed |
onClick |
MouseEventHandler |
Subscribe to click events. The callback function is defined in the official Docs |
onCrosshairMove |
MouseEventHandler |
Subscribe to crosshair move events. The callback function is defined in the official Docs |
onTimeRangeMove |
TimeRangeChangeEventHandler |
Subscribe to time range change events. The callback function is defined in the official Docs |
from |
Date |
Sets visible range from the specified date. Date object is defined in the official Docs |
to |
Date |
Sets visible range to the specified date. Date object is defined in the official Docs |
darkTheme |
boolean |
If true, a custom dark theme palette is applied to the chart |
SeriesObject
SeriesObject
is an object with the following fields:
options
: the series-specific options. Please see the reference for the different serie types:data
: the series data. please refer to the official Docsmarkers
: List of Marker to be displayed on the series.priceLines
: List of PriceLine to be displayed on the series.legend
: the series legend to be displayed on the top-left corner of the chart. The value of the series at the selected time is displayed beside the text legend.linearInterpolation
: A number in seconds to auto-fill series data if no data has been provided between two data points for more than the provided time range.
License
gatsby-react-lightweight-charts is released under MIT license. You are free to use, modify and distribute this software, as long as the copyright header is left intact.
This software incorporates several parts of TradingView Lightweight Charts (Copyright © 2020 TradingView, Inc. https://www.tradingview.com/) that are covered by the Apache License, Version 2.0.