How to create responsive Tradingview Lightweight Chart?

Question

I am new to Tradingview charting library and I want to create like responsive chart.

The problem is, trading view charting library requires to specify width and height. Here is the code.

const chart = LightweightCharts.createChart(e, {
      width: e.offsetWidth,
      height: e.offsetHeight,
      layout: {
        backgroundColor: 'rgb(17, 17, 39)',
        textColor: 'rgba(255, 255, 255, 0.9)',
      },
      grid: {
        vertLines: {
          color: 'rgb(41, 44, 58)',
        },
        horzLines: {
          color: 'rgb(41, 44, 58)',
        },
      },
      crosshair: {
        mode: LightweightCharts.CrosshairMode.Normal,
      },
      priceScale: {
        borderColor: 'rgba(197, 203, 206, 0.8)',
      },
      timeScale: {
        borderColor: 'rgba(197, 203, 206, 0.8)',
      },
    });

Answer 1

This is the code from timocov's comment, which just work. Put it after createChart and setData. and rename chartContainer to your chart container HTML element.

  // Make Chart Responsive with screen resize
  new ResizeObserver(entries => {
      if (entries.length === 0 || entries[0].target !== chartContainer) { return; }
      const newRect = entries[0].contentRect;
      chart.applyOptions({ height: newRect.height, width: newRect.width });
    }).observe(chartContainer);

Answer 2

Lightweight charts has the option for autoSize.

Setting this flag to true will make the chart watch the chart container's size and automatically resize the chart to fit its container whenever the size changes.

This feature requires ResizeObserver class to be available in the global scope. Note that calling code is responsible for providing a polyfill if required. If the global scope does not have ResizeObserver, a warning will appear and the flag will be ignored.

Answer 3

You need to detect a resize event on the container element containing the chart, then update the charts dimensions with chart.applyOptions({ width: newWidth, height: newHeight })

There are some libraries to detect element resizes, the best non-lib way that I can find is with the ResizeObserver API, but it looks like it might not be integrated into all modern browsers yet. You would set an update callback function using the elements new height/width and use that in the ResizeObserver:

function resize() {
    chart.applyOptions({ width: $('#chartDiv').width(), height: $('#chartDiv').height() })
}

new ResizeObserver(outputsize).observe($('#chartDiv'))

Answer 4

Here is a pretty simple solution. Let's assume you create a LightweightChart inside of a div container:

    const chartDiv = document.getElementById('chart');
    const chart = LightweightCharts.createChart(chartDiv, {
        // ...
    }

Then this will resize the chart on the fly:

    window.onresize = function() {
        chart.applyOptions({ 
            width: chartDiv.offsetWidth, 
            height: chartDiv.offsetHeight 
        });
    }