如何创建响应式 Tradingview 轻量级图表？

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

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 2

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 3

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