How to reposition tradingview chart so not going off screen to the left

Question

Wepbage Output

I am trying to reposition a tradingview lightweight chart into a more central position and not extending off the screen. Attached image is the current output being displayed.

Leightweight Charts Github = https://github.com/tradingview/lightweight-charts

import React from 'react';
import { createChart } from 'lightweight-charts';

const chart = createChart(document.body, { width: 800, height: 500});
const candlestickSeries = chart.addCandlestickSeries();

const log = console.log;

function populateChart() {
    fetch(`https://api.binance.com/api/v3/klines?symbol=ETHUSDT&interval=4h&limit=1000`)
        .then(res => res.json())
        .then(data => {
            const cdata = data.map(d => {
                return { time: d[0] / 1000, open: parseFloat(d[1]), high: parseFloat(d[2]), low:parseFloat(d[3]), close: parseFloat(d[4]) }
        });
        candlestickSeries.setData(cdata);
    })
    .catch(err => log(err))

}

render() {
    return (
        
        <div>
            <h1>Ethereum | USDT</h1>
            <p>{populateChart()}</p>  


        </div>
    );
}

}

Answer 1

Have you tried the following:

render() {
    return (
        <div style='text-align:center;'>
            <h1>Ethereum | USDT</h1>
            <div>{populateChart()}</div>
        </div>
    );
}

Changed the p to be a div giving you greater flexibility to change the chart as you need. Then I changed the starting div to have the CSS property text-align:center; that will center all the elements.