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 customize 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 customizing the colors 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 initialization, but also every time it’s resized. Such behavior 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.
Below is the list of all changes that happened in the library.
Breaking changes
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).
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
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 Thanh Le, CommanderRoot & colleague Stanislav!
You can always send us your feedback via GitHub.
We look forward to hearing from you! And as always, happy trading!
Team TradingView