A way to set PriceScale width in Lightweight charts?

Question

I have two charts (one for price, one for volume). I keep them in sync by usingthe various API observer functions. Works wonders.

Except the price scale width - I can get it using the priceScale('right').width() call, but I don't see any way to set it. I'd like to be able to keep the width of both chart's price scales in sync (and keep them set to the max width of the two).

Thanks!

Answer 1

With LWC 4.2.0, it is possible to do this:

const priceScale = chart.priceScale('right');
const width = priceScale.width(); // Get the current width
priceScale.applyOptions({
  // Set minimum width. Please note it will expand based on the contents
  minimumWidth: minPriceScaleWidth,
});

Answer 2

In the LWC version 4.1.0, there is one solution for that

check official docs

Example 1: Add options after creating chart

this.chart.priceScale('right').applyOptions({
    minimumWidth: 65
  })

OR

Example 2: You can set it while creating chart

 createChart(this.chartContainer.nativeElement, {
    ...ChartOptions,
    rightPriceScale: {
      minimumWidth: 65,
      borderVisible: false
    }
  });

Note: This option is not available in LWC 4.0.0 version as docs

Answer 3

I found a hack/workaround to do this with the current version of lightweight charts (version 4.1):

// Access this.mainChart object and get axis and chart container widths
// console.log(this.mainChart); // to find the keys

The objects are accessible via the following keys which are likely randomly selected when bundled. You can confirm using console.log() as described above, but I am pretty sure roduction 4.1 uses Nm. Within object Nm, vo defines the entire chart width (including axis), and Ov defines the axis width.

This is working for me for now, though this looks like a pretty easy add to the library. @SlicedSilver - should we submit this somewhere, or is it already in the pipeline?

Answer 4

Currently it is not possible to set or adjust the price scale width. The price scale adjusts its width to ensure that the tick marks remain fully visible.

It is however possible to have the volume and price within a single chart if that would suit your needs. Here is an example: https://jsfiddle.net/TradingView/cnbamtuh/

However if you wish to stick with two separate charts then I can suggest a hacky work-around for ensuring that the price scales line up correctly (for charts with the price scale on the right).

Firstly, you can set a custom price formatter to try ensure that the price strings are roughly the same width. This can be done by setting the localization property on the chart options (either during createChart() or with chart.applyOptions() (https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptions).

chart.applyOptions({
  localization: {
    priceFormatter: (p) => `${p.toFixed(2).padEnd(10)}`,
  },
});

If you set a custom font family which is monospaced then you might already have a working solution.

• Docs for changing font family: https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LayoutOptions#fontfamily
• Example for changing the font family: https://jsfiddle.net/TradingView/po7wzr69/

However if you stick with the default fonts then you will most likely need to do the following step as well.

You can then measure the widths of each priceScale using series.priceScale().width() (https://tradingview.github.io/lightweight-charts/docs/api/interfaces/IPriceScaleApi) and manually adjust the chart sizes using an inline style on the container element for the chart

const margin = largestPriceScaleWidth - currentPriceScaleWidth;
const element = document.querySelector('#container-one');
element.style.width = `calc(100% - ${margin}px)`;