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)',
      },
    });

Yoshi

Follow this solution: https://mcmap.net/q/1475684/-how-to-make-embedded-chart-responsive – Eonian

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);

Want

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.

Lavonda

this should be the right answer, because not only this works, but also this usese the tools provided by the lybrary instead of using hacks/external code. – Subtotal

This is only if you have v4.0 – Radon

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'))

Cormophyte

You don't even need to measure container's height if you're using ResizeObserver: ``` new ResizeObserver(entries => { if (entries.length === 0 || entries[0].target !== container) { return; } const newRect = entries[0].contentRect; chart.applyOptions({ height: newRect.height, width: newRect.width }); }).observe(container); ``` – Earthaearthborn

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 
        });
    }

Frawley