Author: | tradingview |
---|---|
Views Total: | 416 views |
Official Page: | Go to website |
Last Update: | March 21, 2023 |
License: | Apache-2.0 |
Preview:

Description:
lightweight-charts is a lightweight, dependency-free JavaScript library that helps developers to create responsive, interactive, touch-friendly financial charts using JavaScript and HTML5 canvas.
More features:
- Bar chart
- Candlestick chart
- Line chart
- Area chart
- Histogram
- Custom font family
- Custom price formatter
- Custom locale
- Custom themes: Dark and Light
- Custom watermark
- Fit content
- Floating tooltip
- Tracking tooltip
- Go to realtime button
- Interval switcher
- Intraday data
- Percentage price scale
- Inverted price scale
- Logarithmic price scale
- No time scale
- Price scale at left
- No price scale
- Realtime emulation
- Volume study
Basic usage:
Installation.
# NPM $ npm install lightweight-charts --save
Import the lightweight-charts as a moduel.
import { createChart } from 'lightweight-charts';
Or directly load the full version of the lightweight-charts from the CDN.
<script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
Create a new Financial Chart instance and pass the optional settings as per your needs. You can specify the target container in which you want to place the financial chart by overriding the first parameter
const myChart = createChart(document.body, { // options here });
Create an area chart. An area chart is another way of displaying quantitative data. It’s basically a colored area between the line connecting all data points and time axes. An area series has a crosshair marker – a round mark which is moving along the series’ line while the cursor is moving on a chart along the timescale.
const areaSeries = myChart.addAreaSeries({ topColor: 'rgba(21, 146, 230, 0.4)', bottomColor: 'rgba(21, 146, 230, 0)', lineColor: 'rgba(21, 146, 230, 1)', lineStyle: 0, lineWidth: 3, crosshairMarkerVisible: false, crosshairMarkerRadius: 3, }); // set the data areaSeries.setData([ { time: "2018-12-22", value: 32.51 }, { time: "2018-12-23", value: 31.11 }, { time: "2018-12-24", value: 27.02 }, { time: "2018-12-25", value: 27.32 }, { time: "2018-12-26", value: 25.17 }, { time: "2018-12-27", value: 28.89 }, { time: "2018-12-28", value: 25.46 }, { time: "2018-12-29", value: 23.92 }, { time: "2018-12-30", value: 22.68 }, { time: "2018-12-31", value: 22.67 }, ]);
Create a bar chart that shows price movements in the form of bars. Vertical line length of a bar is limited by the highest and lowest price values. Open & Close values are represented by tick marks, on the left & right hand side of the bar respectively.
const barSeries = myChart.addBarSeries({ thinBars: false, upColor: 'rgba(37, 148, 51, 0.2)', downColor: 'rgba(191, 55, 48, 0.2)', openVisible: true, }); barSeries.setData([ { time: "2018-12-19", open: 141.77, high: 170.39, low: 120.25, close: 145.72 }, { time: "2018-12-20", open: 145.72, high: 147.99, low: 100.11, close: 108.19 }, { time: "2018-12-21", open: 108.19, high: 118.43, low: 74.22, close: 75.16 }, { time: "2018-12-22", open: 75.16, high: 82.84, low: 36.16, close: 45.72 }, { time: "2018-12-23", open: 45.12, high: 53.90, low: 45.12, close: 48.09 }, { time: "2018-12-24", open: 60.71, high: 60.71, low: 53.39, close: 59.29 }, { time: "2018-12-25", open: 68.26, high: 68.26, low: 59.04, close: 60.50 }, { time: "2018-12-26", open: 67.71, high: 105.85, low: 66.67, close: 91.04 }, { time: "2018-12-27", open: 91.04, high: 121.40, low: 82.70, close: 111.40 }, { time: "2018-12-28", open: 111.51, high: 142.83, low: 103.34, close: 131.25 }, { time: "2018-12-29", open: 131.33, high: 151.17, low: 77.68, close: 96.43 }, { time: "2018-12-30", open: 106.33, high: 110.20, low: 90.39, close: 98.10 }, { time: "2018-12-31", open: 109.87, high: 114.69, low: 85.66, close: 111.26 }, ]);
Create a candlestick chart that shows price movements in the form of candlesticks. On the candlestick chart, open & close values form a solid body of a candle while wicks show high & low values for a candlestick’s time interval.
const candleSeries = myChart.addCandleSeries({ upColor: '#6495ED', downColor: '#FF6347', borderVisible: false, wickVisible: true, borderColor: '#000000', wickColor: '#000000', borderUpColor: '#4682B4', borderDownColor: '#A52A2A', wickUpColor: "#4682B4", wickDownColor: "#A52A2A", }); candleSeries.setData([ { time: "2018-12-19", open: 141.77, high: 170.39, low: 120.25, close: 145.72 }, { time: "2018-12-20", open: 145.72, high: 147.99, low: 100.11, close: 108.19 }, { time: "2018-12-21", open: 108.19, high: 118.43, low: 74.22, close: 75.16 }, { time: "2018-12-22", open: 75.16, high: 82.84, low: 36.16, close: 45.72 }, { time: "2018-12-23", open: 45.12, high: 53.90, low: 45.12, close: 48.09 }, { time: "2018-12-24", open: 60.71, high: 60.71, low: 53.39, close: 59.29 }, { time: "2018-12-25", open: 68.26, high: 68.26, low: 59.04, close: 60.50 }, { time: "2018-12-26", open: 67.71, high: 105.85, low: 66.67, close: 91.04 }, { time: "2018-12-27", open: 91.04, high: 121.40, low: 82.70, close: 111.40 }, { time: "2018-12-28", open: 111.51, high: 142.83, low: 103.34, close: 131.25 }, { time: "2018-12-29", open: 131.33, high: 151.17, low: 77.68, close: 96.43 }, { time: "2018-12-30", open: 106.33, high: 110.20, low: 90.39, close: 98.10 }, { time: "2018-12-31", open: 109.87, high: 114.69, low: 85.66, close: 111.26 }, ]);
Create a line chart. A line chart is a type of chart that displays information as series of the data points connected by straight line segments. Line series has a crosshair marker – a round mark which is moving along the series’ line while the cursor is moving along the timescale.
const lineSeries = myChart.addLineSeries({ color: '#f48fb1', lineStyle: 0, lineWidth: 1, drawCrosshairMarker: true, crosshairMarkerRadius: 6, lineType: 1, }); // set data lineSeries.setData([ { time: "2018-12-01", value: 32.51 }, { time: "2018-12-02", value: 31.11 }, { time: "2018-12-03", value: 27.02 }, { time: "2018-12-04", value: 27.32 }, { time: "2018-12-05", value: 25.17 }, { time: "2018-12-06", value: 28.89 }, { time: "2018-12-07", value: 25.46 }, { time: "2018-12-08", value: 23.92 }, { time: "2018-12-09", value: 22.68 }, { time: "2018-12-10", value: 22.67 }, { time: "2018-12-11", value: 27.57 }, { time: "2018-12-12", value: 24.11 }, { time: "2018-12-13", value: 30.74 }, ]);
Create a histogram series which is a graphical representation of the value distribution. Histogram creates intervals (columns) and counts how many values fall into each column.
const histogramSeries = myChart.addHistogramSeries({ color: '#FFF5EE', base: 5, }); // set the data histogramSeries.setData([ { time: "2018-12-20", value: 20.31, color: "#ff00ff" }, { time: "2018-12-21", value: 30.27, color: "#ff00ff" }, { time: "2018-12-22", value: 70.28, color: "#ff00ff" }, { time: "2018-12-23", value: 49.29, color: "#ff0000" }, { time: "2018-12-24", value: 40.64, color: "#ff0000" }, { time: "2018-12-25", value: 57.46, color: "#ff0000" }, { time: "2018-12-26", value: 50.55, color: "#0000ff" }, { time: "2018-12-27", value: 34.85, color: "#0000ff" }, { time: "2018-12-28", value: 56.68, color: "#0000ff" }, { time: "2018-12-29", value: 51.60, color: "#00ff00" }, { time: "2018-12-30", value: 75.33, color: "#00ff00" }, { time: "2018-12-31", value: 54.85, color: "#00ff00" } ]);
Common options.
const lineSeries = chart.addLineSeries({ // or right priceScaleId: 'left', // chart title title: 'Series title example', // top & bottom margins scaleMargins: { top: 0.1, bottom: 0.3, }, // overrides autoscale autoscaleInfoProvider: () => { return { priceRange: { minValue: 0, maxValue: 100, }, }; }, });
Once a chart has been created, there is a possibility to resize it or customize its appearance and behavior by calling applyOptions
.
mySeries.applyOptions({ priceLineVisible: false, priceLineSource: 1, // 1. LastBar; 2. LastVisible priceLineWidth: 2, priceLineColor: '#4682B4', priceLineStyle: 3, lastValueVisible: false, baseLineVisible: true, baseLineColor: '#ff0000', baseLineWidth: 3, baseLineStyle: 1, // 1.Solid; 2.Dotted; 3.Dashed; 4.LargeDashed; 5.SparseDotted priceFormat: { type: 'price', // price | volume | percent | custom minMove: 0.01, precision: 2, formatter: (price) => { return '$' + price.toFixed(2); }, } width: 300, height: 300, layout: { backgroundColor: '#FAEBD7', textColor: '#696969', fontSize: 12, fontFamily: 'Calibri', }, localization: { dateFormat: 'MM/dd/yy', locale: 'en-US', }, timeScale: { rightOffset: 12, barSpacing: 3, fixLeftEdge: true, lockVisibleTimeRangeOnResize: true, rightBarStaysOnScroll: true, borderVisible: false, borderColor: '#fff000', visible: true, timeVisible: true, }, crosshair: { vertLine: { color: '#6A5ACD', width: 0.5, style: 4, // 1.Solid; 2.Dotted; 3.Dashed; 4.LargeDashed; 5.SparseDotted visible: true, labelVisible: false, }, horzLine: { color: '#6A5ACD', width: 0.5, style: 4, // 1.Solid; 2.Dotted; 3.Dashed; 4.LargeDashed; 5.SparseDotted visible: true, labelVisible: true, }, mode: 1, // 1. Magnet; 2. Normal }, grid: { vertLines: { color: 'rgba(70, 130, 180, 0.5)', style: 1, // 1.Solid; 2.Dotted; 3.Dashed; 4.LargeDashed; 5.SparseDotted visible: true, }, horzLines: { color: 'rgba(70, 130, 180, 0.5);', style: 1, // 1.Solid; 2.Dotted; 3.Dashed; 4.LargeDashed; 5.SparseDotted visible: true, }, }, overlayPriceScales: { autoScale: true, mode: PriceScaleMode.Normal, invertScale: false, alignLabels: true, borderVisible: true, borderColor: '#2B2B43', entireTextOnly: false, visible: false, drawTicks: true, scaleMargins: { bottom: 0.1, top: 0.2, }, }, leftPriceScale: { autoScale: true, mode: PriceScaleMode.Normal, invertScale: false, alignLabels: true, borderVisible: true, borderColor: '#2B2B43', entireTextOnly: false, visible: false, drawTicks: true, scaleMargins: { bottom: 0.1, top: 0.2, }, visible: false, }, rightPriceScale: { autoScale: true, mode: PriceScaleMode.Normal, invertScale: false, alignLabels: true, borderVisible: true, borderColor: '#2B2B43', entireTextOnly: false, visible: false, drawTicks: true, scaleMargins: { bottom: 0.1, top: 0.2, }, visible: false, }, watermark: { color: 'rgba(11, 94, 29, 0.4)', visible: true, text: 'TradingView Watermark Example', fontSize: 24, horzAlign: 'left', vertAlign: 'bottom', }, handleScroll: { mouseWheel: true, pressedMouseMove: true, horzTouchDrag: true, vertTouchDrag: true, }, handleScale: { axisPressedMouseMove: { time: true, price: true, }, axisDoubleClickReset: true, mouseWheel: true, pinch: true, } });
Available API methods.
// update myChart.update(data); // set markers myChart.setMarkers([ { time: '2019-04-09', position: 'aboveBar', color: 'black', shape: 'arrowDown', }, { time: '2019-05-31', position: 'belowBar', color: 'red', shape: 'arrowUp', id: 'id3', }, { time: '2019-05-31', position: 'belowBar', color: 'orange', shape: 'arrowUp', id: 'id4', text: 'example', size: 2, }, ]); myChart.subscribeCrosshairMove((param) => { console.log(param.hoveredMarkerId); }); myChart.subscribeClick((param) => { console.log(param.hoveredMarkerId); }); // create a horizontal price line at a certain price level. const priceLine = mySeries.createPriceLine({ price: 80.0, color: 'green', lineWidth: 2, lineStyle: LightweightCharts.LineStyle.Dotted, axisLabelVisible: true, }); // remove the price line myChart.removePriceLine(priceLine); // returns bars information for the series in the provided logical range or null // if no series data has been found in the requested range const barsInfo = mySeries.barsInLogicalRange(chart.timeScale().getVisibleLogicalRange()); console.log(barsInfo); // take a screenshot myChart.takeScreenshot(); // two functions to access this price scale implicitly const coordinate = series.priceToCoordinate(100.5); const price = series.coordinateToPrice(324);
Available events.
myChart.subscribeClick(function(param){ console.log(`An user clicks at (${param.point.x}, ${param.point.y}) point, the time is ${param.time}`); }); myChart.unsubscribeClick(function(param){ // Don’t get notified when a mouse clicks on a chart }); myChart.subscribeCrosshairMove(function(param){ if (!param.point) { return; } console.log(`A user moved the crosshair to (${param.point.x}, ${param.point.y}) point, the time is ${param.time}`); }); myChart.unsubscribeCrosshairMove(function(param){ // Don’t get notified when a mouse moves on a chart });
Changelog:
v4.0.1 (03/21/2023)
- Add the ability to specify font colour for the Priceline labels.
- Ignore resize method if autoSize is active, and added API to check if active.
- Bug fixes
v3.8.0 (02/17/2022)
- Quick tracking mode
- Improved mouse behaviour on touch devices (like mouse connected to mobile phone/tablet)
- Custom color for items of candlestick and line series
- Labels might be cut off when disabling scale and scroll
- Add ability to disable visibility of price line line
- Bugs Fixed
v3.7.0 (11/08/2021)
- The new baseline series chart
- Added methods to get time axis size and subscribe on size change
- Improved performance of setting/updating series data
- Use lowerbound in TimeScale timeToIndex search
- Increased min price tick mark step up to 1e-14
- Do not paint time axis if it not visible
- Remove color customisation from settings.json
v3.6.1 (09/13/2021)
- Bugfix
v3.6.0 (09/10/2021)
- Gradient chart background color
- How to add buffer animation to price jump
- Kinetic scroll
- Fixed bugs
v3.5.0 (08/04/2021)
- Bugs fixed
v3.4.0 (07/21/2021)
- Add option to fix right edge
- Drop restriction for min bar spacing value
- Round corners of the line-style plots
- Bugs fixed
v3.3.0 (02/01/2021)
- Add type predicates for series type
- Create Grid instance for every pane
- Add possibility to chose crosshairMarker color, so it will be independent from line-series color
- Implement option not to shift the time scale at all when data is added with setData
- Incorrect bar height when its value is more than chart’s height
- Disabling autoScale for non-visible series
v3.2.0 (07/30/2020)
- Feat/gzip friendly colors
- Add coordinateToLogical and logicalToCoordinate
- Add API to show/hide series without removing it
- Add run-time validation of inputs in debug mode
- Pixel perfect renderers fixes
- Add title option to createPriceLine
- Bugfixes
v3.1.4/5 (07/30/2020)
- Bugfix
v3.1.3 (07/21/2020)
- Fixed handleScroll and handleScale options aren’t applied
v3.1.2 (07/07/2020)
- Fixed Crosshair doesn’t work on touch devices
v3.1.1 (06/30/2020)
- Fixed production build of 3.1 version
v3.1.0 (06/29/2020)
- Whitespaces support
- Custom font families for watermarks
- Bugfix
v3.0.1 (06/15/2020)
- Correctly handle overlay: true in series options while create series to backward compact
v3.0.0 (06/11/2020)
- Methods subscribeVisibleTimeRangeChange and unsubscribeVisibleTimeRangeChange has been moved from ChartApi to TimeScaleApi
- Since 3.0 you can specify price axis you’d like to place the series on. The same for moving the series between price scales
- Added ability to customize time scale tick marks formatter
- Added ability to put text for series markers
- Added ability to specify your own date formatter
- Improved tick marks generation algorithm for the first point
- Made inbound types weakly (outbound ones should be strict)
- Removed non-exported const enum’s JS code
- Add ability to override series’ autoscale range
- Add API to get price scale’s width
- Disabling/enabling scaling axis for both price and time
- Get screen coordinate by a time point
- Remove tick mark from price label
- Support the second price axis
- Visible time range should have bars count of the space from left/right
- Bugs fixed
v2.1.0 (05/31/2020)
- fixed 443 error while updating time scale
v2.0.0 (02/26/2020)
- Removed unused lineWidth property from HistogramStyleOptions interface (it affects nothing, but could break your compilation)
- Changed order of width and height args in resize method
- Pattern for all non-solid (dotted, dashed, large dashed and sparse dotted) line styles was a bit changed
- Pixel-perfect rendering
- Time scale enhancements
- Disable all kinds of scrolls and touch with one option
- Added to the acceptable date formats
- Add option to show the “global” last value of the series instead of the last visible
- Bugfixed
v1.2.2 (02/22/2020)
- Fixed bug while rendering few datasets with not equal timescale
v1.2.1 (11/28/2019)
- Add custom price lines
- Migrate canvas-related logic to fancy-canvas library
- Add coordinateToPrice method to ISeriesApi
- Bugs fixed
v1.1.0 (08/30/2019)
- Apply localization to specific series
- Series-based markers
- Reduced size of the library by using ts-transformer-minify-privates transformer
- Bugs fixed
07/19/2019
- Fixed: The histogram last bar not hide in chart
07/19/2019
- Fixed: The histogram last bar not hide in chart
07/11/2019
- Fixed: Setting the data to series fails after setting the data to histogram series with custom color
in the candlestick part of the documentation, to create the candlestick chart, there might be a typo :
use chart.addCandlestickSeries() instead of chart.addCandleSeries()