Examples
Live charts with the code that draws them, using only the Lightweight Charts™ library. Copy the code into your project, or copy a complete HTML page that runs on its own.
Candlestick
Price movement drawn as candlesticks colored by direction.
Bar
Price movement drawn as OHLC bars colored by direction.
Line
A single value per point joined by a line.
Area
A line with the area below it filled with a gradient.
Baseline
Values above and below a base price drawn in different colors.
Histogram
Vertical columns, often used for volume.
Compare multiple series
Several line series on one chart, sharing one price scale.
Yield curve with updates
Two yield curves updating live, with markers that show each change.
Custom horizontal scale
A line chart with prices instead of dates on the horizontal scale.
Options chart
The profit of an options position at expiry, plotted against the price.
Two price scales
Two series, each with its own price scale on the left and on the right.
Inverted price scale
A price scale flipped so that higher values are at the bottom.
Price and volume
Volume bars drawn under the price on the same chart.
Price scale modes
Two assets compared on a normal, logarithmic, percentage, or indexed price scale.
Custom price format
Large values shown as short dollar amounts, such as $1.25B, on the price scale.
Time zones
One trading session shown in UTC, New York, Berlin, or Tokyo time.
Visible range
Buttons that show the last week, month, quarter, or year of the same data.
Custom date format
Your own date and time labels on the time scale and the crosshair.
Whitespace data
Gaps in a series for periods that have no data.
Realtime updates
A candlestick chart that receives new prices in real time.
Infinite history
A candlestick chart that loads older data as you scroll back in time.
Range switcher
Buttons that switch the chart between daily, weekly, monthly, and yearly data.
Screenshot
A button that saves the chart as a PNG image.
Panes
An area series and candlesticks in two separate panes.
Series markers
Buy, sell, and other markers placed on candlesticks.
Price lines
Horizontal lines at the minimum, average, and maximum price.
Click to add markers
Markers that appear on the bar you click and disappear on a second click.
Floating tooltip
A tooltip that positions itself next to the data point under the cursor.
Tracking tooltip
A tooltip that follows the cursor.
Magnifier tooltip
A tooltip at the top edge of the chart that follows the cursor along the time scale.
Legend
A legend that shows the symbol name and the price under the cursor.
Three-line legend
A legend that shows the symbol, the price, and the date under the cursor on three lines.
Sync two charts
Two charts whose crosshairs and visible ranges move together.
Tracking on mobile
Crosshair tracking on touch devices without a long press.
Crosshair modes
A crosshair that moves freely, snaps to prices, or is hidden, switched with buttons.
Custom font
Chart text in a custom font, switched with buttons.
Custom locale
Dates formatted for different locales, switched with buttons.
Text watermark
A text watermark drawn behind the series.
Image watermark
An image watermark drawn behind the series.
Hidden time scale
A line chart without the time axis at the bottom.