CODEWITHSUNDEEP
javascripthtmltradingview-api
Tim
Tim

Reputation: 143

TradingView Chart doesnt show up

can someone tell me why my TradingView Chart doesnt show up? I am getting an empty page with no chart showing.

I followed all instructions for installation here:

https://github.com/tradingview/lightweight-charts/blob/master/docs/README.md

Here's my 1 page standalone file contents....

<!DOCTYPE html>
<html>
<body>
<script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js">
    const chart = LightweightCharts.createChart(document.body, { width: 400, height: 300 });
    const lineSeries = chart.addLineSeries();
    lineSeries.setData([
        { time: '2019-04-11', value: 80.01 },
        { time: '2019-04-12', value: 96.63 },
        { time: '2019-04-13', value: 76.64 },
        { time: '2019-04-14', value: 81.89 },
        { time: '2019-04-15', value: 74.43 },
        { time: '2019-04-16', value: 80.01 },
        { time: '2019-04-17', value: 96.63 },
        { time: '2019-04-18', value: 76.64 },
        { time: '2019-04-19', value: 81.89 },
        { time: '2019-04-20', value: 74.43 },
    ]);
</script>
</body>
</html>

Upvotes: 2

Views: 2475

Answers (1)

Jon B
Jon B

Reputation: 2824

You need to import the js script in the <head> of your html page and then run your javascript in the body like this:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
  </head>
<body>
<script>
    const chart = LightweightCharts.createChart(document.body, { width: 400, height: 300 });
    const lineSeries = chart.addLineSeries();
    lineSeries.setData([
        { time: '2019-04-11', value: 80.01 },
        { time: '2019-04-12', value: 96.63 },
        { time: '2019-04-13', value: 76.64 },
        { time: '2019-04-14', value: 81.89 },
        { time: '2019-04-15', value: 74.43 },
        { time: '2019-04-16', value: 80.01 },
        { time: '2019-04-17', value: 96.63 },
        { time: '2019-04-18', value: 76.64 },
        { time: '2019-04-19', value: 81.89 },
        { time: '2019-04-20', value: 74.43 },
    ]);
</script>
  
</body>
</html>

Upvotes: 2

Related Questions