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.