4.1.0

Intro

Version 4.1 of Lightweight Charts introduces exciting new features, including the introduction of Plugins, which provide developers the ability to extend the library's functionality. Additionally, this release includes enhancements to customize the horizontal scale and various minor improvements and bug fixes.

Major Updates

Plugins

Developers can now leverage the power of Plugins in Lightweight Charts. Two types of Plugins are supported -  Custom Series and Drawing Primitives, offering the ability to define new series types and create custom visualizations, drawing tools, and annotations.

With the flexibility provided by these plugins, developers can create highly customizable charting applications for their users.

To get started with plugins, please refer to our Plugins Documentation for a better understanding of what is possible and how plugins work. You can also explore our collection of plugin examples (with a preview hosted here) for inspiration and guidance on implementing specific functionality.

To help you get started quickly, we have created an NPM package called create-lwc-plugin, which sets up a plugin project for you. This way, you can hit the ground running with your plugin development.

Horizontal Scale Customization

The horizontal scale is no longer restricted to only time-based values. The API has been extended to allow customization of the horizontal scale behavior, and enable uses cases like options chart where price values are displayed in the horizontal scale. The most common use-case would be to customise the tick marks behaviour.

The createChartEx function should be used instead of the usual createChart function, and an instance of a class implementing IHorzScaleBehavior should be provided.

A simple example can be found in this test case: horizontal-price-scale.js

Changelog

Enhancements

• Added point markers styling option for line-based series. (closes #365) Docs
• Added double click subscriber for the main chart pane. (closes #1385) Docs
• Added setCrosshairPosition API, allowing programmatic setting of the crosshair position. (fixes #1198, #1163, #438) Docs
• Added an option to disable crosshair. Introduced the Hidden option in the CrosshairMode setting. (closes #749, thanks to @luk707) Docs
• Allow overriding tick mark label length via the tickMarkMaxCharacterLength option. (closes #1396) Docs
• Support for overriding the percentage formatter within the localization options. (fixes #1328, #1291) Docs
• Added paneSize getter to IChartApi, returning the dimensions of the chart pane. (issue #1411) Docs
• Added options to set minimum dimensions for the price and time scales. (closes #1062, related to #1163, #50) Docs, Docs

Bug Fixes

• Fixed chart layout when direction is set to RTL. (PR #1338)
• Fixed re-enabling of autoSize after disabling it. (PR #1377)
• Corrected percentage mode and zero first value. (fixes #1386)
• Prevent chart shifting when new data replaces existing whitespace. (fixes #1201)

Thanks to our Contributors for this Release:

• @luk707

You can always send us your feedback via GitHub.
We look forward to hearing from you! And as always, happy trading!

Team TradingView

See issues assigned to this version's milestone or changes since the last published version.

4.0.1

Enhancements

• Add the ability to specify font colour for the Priceline labels. #1274 #1287
• Ignore resize method if autoSize is active, and added API to check if active. #1301

Bug fixes

• Typo in customization guide. Thanks @UcheAzubuko. #1284
• Inability to immediately add markers when autoSize chart option is enabled. Thanks @victorbrambati. #1271 #1281
• First render when using autosize doesn't show the latest bars. Thanks @victorbrambati #1281. #1282
• Series rendering bug when outside of visible range. #1293 #1294
• Auto contrast text color for crosshair labels. #1309 #1310
• Hit box from the text of marker incorrectly shifted to the right. #1270 #1305

As always, we thank you for your support and help in making Lightweight Charts™ the best product on the financial web. And a big shout out to our hero contributors @victorbrambati, and @UcheAzubuko!

You can always send us your feedback via GitHub.

We look forward to hearing from you! And as always, happy trading!
Team TradingView

See issues assigned to this version's milestone or changes since the last published version.

4.0.0

Intro

Long overdue as it’s been nearly 1 year since our last major update, but behold before all the changes that have happened over the last 12 months.

In total, more than 20 tickets have been addressed with one of the most important ones being fancy-canvas – the library we use to configure HTML canvas in Lightweight Charts.

And before you leave to download our new exciting version, keep an eye out for the next version of master that would later become 4.1. We don’t want to spoil the magic, but you’ll soon enough be able to customise even more of the chart thanks to a brand new … no! I can’t say it. You’ll have to wait :)

Without further ado, let us introduce to you our newly refreshed landing page for the documentation. It’s clearer and straight to the point – which is exactly what developers are after.

Major updates

fancy-canvas

One of the most important updates is fancy canvas, moving from v1.0.1 to v2.1.0.

We have finally renewed our rendering architecture to support pixel-perfect rendering in modern browsers. The new box measurement called devicePixelContentBox started to appear recently in some browser implementations. It enables requesting HTML canvas dimensions in physical pixels, that, in turn, allows to perform "true" pixel-perfect rendering at any page zoom or pixel density, without wild-guess approaches to determine canvas bitmap' size. And the new release of fancy-canvas adopts this new approach, introducing some abstractions to support the idea.

Series enhancements

We have introduced the possibility to draw curved lines using Beziers curves.

We’ve also added the possibility of customising the colours for different parts of an area series.

Properly handling resizing the chart

With this improvement, not only does the chart get the proper size at initialisation, but also every time it’s resized. Such behaviour could be encountered when rotating a phone or tablet or when resizing the chart on a website.

Major fixes

We’ve also fixed some nasty bugs!

Incorrect price line labels formatting

When setting the price scale mode to anything other than 'Normal', the price for PriceLine wasn't properly calculated. That’s all in the past now!

Animation glitches

On some occasions, when a user was trying to reset the time scale while another action was taking place, some nasty glitches were noticeable on the chart.

Testing strategy

Before integrating any pull request submitted on GitHub we run a series of tests to check not only various parts of the UI but also to check for memory leaks.

Up until now we were solely relying on Puppeteer but have now integrated memlab from Meta. It helps us find Javascript objects that are not cleaned when they should, which could lead to some unexpected behaviours.

Changelog

Below is the list of all changes that happened in the library.

Please view the migration guide here: Migrating from v3 to v4.

Breaking changes

• Fancy-canvas 2 | #818
• Added support for ES module exports | #613
• We are now generating two more build types: esm, standalone & cjs
• Updated scales design | #606
  • Changed scales look & feel according to the new design
• Add possibility to disable time axis ticks | #1043
• Added ticksVisible to TimeScaleOptions, renamed drawTicks to ticksVisible in PriceScaleOptions.
• Custom price lines should be atop of the series | #684
  • Price line to be added on top of any series - shout out to thanhlmm
• Remove deprecated code | #626
• Fix types inconsistency on API level with time | #470
• Add API to get chart values (data, markers, etc) | #414
  • Added methods:
    • ISeriesApi.markers
    • ISeriesApi.dataByIndex
  • Changed time types everywhere in the public API to Time

Enhancements

• Handle resize with ResizeObserver if it's exist in window | #71
  • There was an issue when resizing the chart (such as rotating the screen of a phone/tablet).
• Add possibility to use default tick mark formatter implementation as a fallback | #1210
  • Allow the custom tick mark formatter to return null so that it will use the default formatter for that specific mark.
• Add possibility to invert Area series filled area | #1115
  • Adds invertFilledArea property to the AreaStyleOptions which when set to true will invert the filled area (draw above the line instead of below it).
• Documentation website improvements | #1001 #1002
  • Provides a way to apply theme-based colors to a chart whenever the Docusaurus theme is changed.
• Add ability to draw parts of area with different colors | #1100
  • Add a possibility to change line, top and bottom colors for the different parts of an area series
• Add possibility to change price axis text color | #1114
• Reset price and time scale double click options | #1118
  • Distinguishing the reset between price & time scale vs having only one option
• Add curved lines | #506
  • Add a new line type that draws curved lines between series points.

Chores

• Replace deprecated String.prototype.substr | #1048
  • Shout out to CommanderRoot

Bug fixes

• Refactoring resize the chart | #367
• The chart is blank on printed page in Chromium | #873
  • Chart was blank when printing
• Horizontal scroll animations improvements | #1136
  • Fixes glitches when resetting the chart time scale while scrolling
• Draw series last price & price line labels on the top layer | #1046
  • Fixes an issue where price line could be place over price scale labels
• Incorrect price line labels formatting | #1032
  • When setting the price scale mode to anything than 'Normal' the price for PriceLine wasn't properly calculated.
• lockVisibleTimeRangeOnResize does not work with fixLeftEdge | #991
  • The visible range is no longer changed after resizing the chart.
• Crosshair label text appears on the chart during initial render | #1255
  • Small text artefacts from the crosshair no longer appear on the time axis before any interaction with the chart.

As always, we thank you for your support and help in making Lightweight Charts the best product on the financial web. And a big shout out to our hero contributors @thanhlmm, @CommanderRoot, @samhainsamhainsamhain & colleague @Nipheris!
You can always send us your feedback via GitHub.
We look forward to hearing from you! And as always, happy trading!
Team TradingView

See issues assigned to this version's milestone or changes since the last published version.

3.8.0

We're happy to announce the next release of Lightweight Charts library. This release includes many improvements and bug fixes (as usual), but we are thrilled to say that from this version the library has its own documentation website that replaces the documentation in the repository. Check it out and share your feedback in this discussion thread.

Enhancement

• Documentation website (see #875, #918, #411, #919, #922, #983, #980, #1006)
• Quick tracking mode (see #830)
• Improved mouse behaviour on touch devices (like mouse connected to mobile phone/tablet) (see #106)
• Custom color for items of candlestick and line series (see #195)
• Labels might be cut off when disabling scale and scroll (#947)
• Add ability to disable visibility of price line line (see #969)

Fixed

• timeScale.fitContent is not working correctly (see #966)
• Delegate.unsubscribeAll method works in opposite way (see #995)
• Last price animation is active when no data added to the right (but to the left) (see #886)
• subscribeClick on mobile always get the last index of all the items (see #657)
• Incorrect crosshair position on scrolling by dragging by mouse (see #987)
• A painting slows down after a while with tons of updates (see #946)
• Bars disappear with devicePixelRatio less than 1 (see #982)
• There are no tick marks on the price axis (see #939)
• Disabling scrolling by disabled horzTouchDrag and vertTouchDrag options disables moving crosshair in tracking mode (see #434)
• Reducing precision doesn't update price scale width (see #550)
• Chart width is jumping on series change from area to candles (see #943)
• Log axis is not scaling on small number (see #874)
• Overlay series title is not rendered when no series use right price scale (see #926)
• scrollToPosition with big negative value and when no data breaks the chart (see #889)
• When rendering multiple charts with baseline series, baseValue of the last element is used on all charts series. (see #898)

Thanks to our contributors:

• @zaleGZL zale

See issues assigned to this version's milestone or changes since the last published version.

3.7.0

Enhancement

• The new baseline series chart (see #151)
• Documentation about time zones support (see #781)
• Added methods to get time axis size and subscribe on size change (see #853)
• Improved performance of setting/updating series data (see #418 and #838)
• Use lowerbound in TimeScale timeToIndex search (see #767)
• Add JSDoc comments for existing API docs (see #870)

Fixed

• Increased min price tick mark step up to 1e-14 (from 1e-9) (see #841)
• Fix typo in customization docs (see #844)
• Do not paint time axis if it not visible (see #865)
• Remove color customisation from settings.json (see #869)

Thanks to our contributors:

• @thanhlmm Thanh Le

See issues assigned to this version's milestone or changes since the last published version.

3.6.1

Fixed

• In v3.6.0 there was a typo in LasPriceAnimationMode const enum (Last without t), which was fixed in this release. The incorrect name is still available to import and could be used in your code so no breaking change so far (see e5133cb)

See changes since the last published version.

3.6.0

On this day 10 years ago, 10th September 2011, the very first version of the TradingView website was deployed. To celebrate 10th anniversary we're happy to announce the new version of lightweight-charts library v3.6.0 🎉🎉🎉

Enhancement

• Gradient chart background color (see #831)
• How to add buffer animation to price jump (see #567)
• Kinetic scroll (see #832)

Fixed

• Incorrect initial barSpacing when both fixRightEdge and fixLeftEdge are enabled (see #823)
• Time axis label get cut on the edge if a fix edge option is enabled (see #835)
• Price axis doesn't respect the width of crosshair label (see #834)
• Fixed both timescale edges make lockVisibleTimeRangeOnResize turn wrong (see #814)
• Error: Value is null error while set the data is container has 0x0 size (see #821)

Thanks to our contributors:

• @thanhlmm Thanh Le

See issues assigned to this version's milestone or changes since the last published version.

3.5.0

A note about rendering order of series, which might be interpret as a bug or breaking change since this release

This is not really a breaking change, but might be interpret like that. In #794 we've fixed the wrong order of series, thus now all series will be displayed in opposite order (they will be displayed in order of creating now; previously they were displayed in reversed order).

To fix that, just change the order of creating the series (thus instead of create series A, then series B create series B first and then series A) - see #812.

Fixed

• Screenshot output missing piece on bottom right (see #798)
• Overlapped line chart show wrong color order when hover (see #794)
• Price line label show on both axis (see #795)

Thanks to our contributors:

• @thanhlmm Thanh Le

See issues assigned to this version's milestone or changes since the last published version.

3.4.0

Enhancement

• Add option to fix right edge (see #218)
• Drop restriction for min bar spacing value (see #558)
• Round corners of the line-style plots (see #731)

Fixed

• AutoscaleProvider documentation error (see #773)
• Candlestick upColor and downColor is not changed on applyOptions (see #750)
• Cleared and reset data appears at visually different location (see #757)
• Remove unused internal method from SeriesApi (see #768)
• Removing data for the last series doesn't actually remove the data (see #752)
• to date of getVisibleRange contains partially visible data item and it's impossible to hover it (see #624)
• series.priceFormatter().format(price) does not work (see #790)

See issues assigned to this version's milestone or changes since the last published version.

3.3.0

Enhancement

• Add type predicates for series type (see #670)
• Create Grid instance for every pane (see #382)
• Add possibility to chose crosshairMarker color, so it will be independent from line-series color (see #310)
• Implement option not to shift the time scale at all when data is added with setData (see #584)

Fixed

• Incorrect bar height when its value is more than chart's height (see #673)
• Disabling autoScale for non-visible series (see #687)

Thanks to our contributors:

• @dubroff
• @SuperPenguin Andree Yosua
• @mecm1993 Manuel Cepeda

See issues assigned to this version's milestone or changes since the last published version.