From v2 to v3
Lightweight Charts™ library 3.0 announces the major improvements: supporting two price scales and improving the time scale API. In order of keep the API clear and consistent, we decided to allow breaking change of the API.
In this document you can find the migration guide from the previous version to 3.0.
Time Scale API
Previously, to handle changing visible time range you needed to use subscribeVisibleTimeRangeChange
and unsubscribeVisibleTimeRangeChange
to subscribe and unsubscribe from visible range events.
These methods were available in the chart object (e.g. you call it like chart.subscribeVisibleTimeRangeChange(func)
).
In 3.0 in order to make API more consistent with the new API we decided to move these methods to ITimeScaleApi
(along with the new subscription methods ITimeScaleApi.subscribeVisibleLogicalRangeChange
and ITimeScaleApi.unsubscribeVisibleLogicalRangeChange
).
So, to migrate your code to 3.0 you just need to replace:
chart.subscribeVisibleTimeRangeChange
withchart.timeScale().subscribeVisibleTimeRangeChange
chart.unsubscribeVisibleTimeRangeChange
withchart.timeScale().unsubscribeVisibleTimeRangeChange
Two price scales
We understand disadvantages of breaking changes in the API, so we have not removed support of the current API at all, but have deprecated it, so the most common cases will continue to work.
You can refer to the new API here.
Following are migration rules.
Default behavior
Default behavior is not changed. If you do not specify price scale options, the chart will have the right price scale visible and all the series will assign to it.
Left price scale
If you need the price scale to be drawn on the left side, you should make the following changes. instead of
const chart = LightweightCharts.createChart(container, {
priceScale: {
position: 'left',
},
});
use
const chart = LightweightCharts.createChart(container, {
rightPriceScale: {
visible: false,
},
leftPriceScale: {
visible: true,
},
});
then specify target price scale while creating a series:
const histSeries = chart.addHistogramSeries({
priceScaleId: 'left',
});
New version fully supports this case via the old API, however this support will be removed in the future releases.
No price scale
To create chart without any visible price scale, instead of
const chart = LightweightCharts.createChart(container, {
priceScale: {
position: 'none',
},
});
use
const chart = LightweightCharts.createChart(container, {
leftPriceScale: {
visible: false,
},
rightPriceScale: {
visible: false,
},
});
New version fully supports this case via the old API, however this support will be removed in the future releases.
Creating overlay
To create an overlay series, instead of
const histogramSeries = chart.addHistogramSeries({
overlay: true,
});
use
const histogramSeries = chart.addHistogramSeries({
// or any other _the same_ id for all overlay series
priceScaleId: '',
});
New version fully supports this case via the old API, however this support will be removed in the future releases.
Move price scale from right to left or vice versa
To do this, instead of
const chart = LightweightCharts.createChart(container);
const mainSeries = chart.addLineSeries();
// ...
chart.applyOptions({
priceScale: {
position: 'left',
},
});
use
const chart = LightweightCharts.createChart(container);
const mainSeries = chart.addLineSeries();
// ...
chart.applyOptions({
leftPriceScale: {
visible: true,
},
rightPriceScale: {
visible: false,
},
});
mainSeries.applyOptions({
priceScaleId: 'left',
});
New version does not support this case via the old API, so, if you use it, you should migrate your code in order of keeping it working.