CODEWITHSUNDEEP
javascriptnode.jsnpmlightweight-charts
Prakhar Gupta
Prakhar Gupta

Reputation: 47

Getting errors Using Lightweight-charts on node.js

I am a python guy but tried to use node.js in visual studio code to plot a candlestick chart powered by the trading view.

TradingView provides a package called lightweight-charts, which I am trying to use in my node.js project. But while running the project file I am running into an error I can not understand. Also I tried to search it on google unfortunately no solution worked.

The error is ReferenceError: document is not defined.

I copied the code from a youtube video in which it was working great. Also installed the package lightweight-charts using npm install lightweight-charts.

I have two files in my project named index.html and index.js. the content in the file

index.js

const log = console.log;

const chartProperties = {
  width:1500,
  height:600,
  timeScale:{
    timeVisible:true,
    secondsVisible:false,
  }
}

const domElement = document.getElementById('tvchart');
const chart = LightweightCharts.createChart(domElement,chartProperties);
const candleSeries = chart.addCandlestickSeries();
const data = [
    { time: '2018-10-19', open: 180.34, high: 180.99, low: 178.57, close: 179.85 },
    { time: '2018-10-22', open: 180.82, high: 181.40, low: 177.56, close: 178.75 },
    { time: '2018-10-23', open: 175.77, high: 179.49, low: 175.44, close: 178.53 },
    { time: '2018-10-24', open: 178.58, high: 182.37, low: 176.31, close: 176.97 },
    { time: '2018-10-25', open: 177.52, high: 180.50, low: 176.83, close: 179.07 },
    { time: '2018-10-26', open: 176.88, high: 177.34, low: 170.91, close: 172.23 },
    { time: '2018-10-29', open: 173.74, high: 175.99, low: 170.95, close: 173.20 },
    { time: '2018-10-30', open: 173.16, high: 176.43, low: 172.64, close: 176.24 },
    { time: '2018-10-31', open: 177.98, high: 178.85, low: 175.59, close: 175.88 },
    { time: '2018-11-01', open: 176.84, high: 180.86, low: 175.90, close: 180.46 },
    { time: '2018-11-02', open: 182.47, high: 183.01, low: 177.39, close: 179.93 },
    { time: '2018-11-05', open: 181.02, high: 182.41, low: 179.30, close: 182.19 },
    { time: '2018-11-06', open: 181.93, high: 182.65, low: 180.05, close: 182.01 },
    { time: '2018-11-07', open: 183.79, high: 187.68, low: 182.06, close: 187.23 },
    { time: '2018-11-08', open: 187.13, high: 188.69, low: 185.72, close: 188.00 },
    { time: '2018-11-09', open: 188.32, high: 188.48, low: 184.96, close: 185.99 },
    { time: '2018-11-12', open: 185.23, high: 186.95, low: 179.02, close: 179.43 },
    { time: '2018-11-13', open: 177.30, high: 181.62, low: 172.85, close: 179.00 },
    { time: '2018-11-14', open: 182.61, high: 182.90, low: 179.15, close: 179.90 },
    { time: '2018-11-15', open: 179.01, high: 179.67, low: 173.61, close: 177.36 },
    { time: '2018-11-16', open: 173.99, high: 177.60, low: 173.51, close: 177.02 },
    { time: '2018-11-19', open: 176.71, high: 178.88, low: 172.30, close: 173.59 }]

candleSeries.setData(data);

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Static Chart</title>
  </head>
  <body>
    <h2>Binance BTCUSDT Chart</h2>
    <div id="tvchart"></div>
  </body>
  <script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
  <script type="text/javascript" src="index.js"></script>
</html>

I am getting the error while running index.js file. The error is:

ReferenceError: document is not defined.

Also if I remove the line "const domElement = document.getElementById('tvchart');" from the code the next error I get is:

ReferenceError: LightweightCharts is not defined.

While the lightweight-charts library is already installed.

I have also tried to change the extension of the file of index.js to index.mjs, while editing the package.json by adding "type": "module"

I have tried a lot to make this code work but couldn't. Your any help is like someone have solved something which is indeed rocket science to me.

Upvotes: 0

Views: 1022

Answers (1)

omar al-hamad
omar al-hamad

Reputation: 27

"ReferenceError: document is not defined." you are probably trying to run the js file through node, node does not have acess to the document object (it's a browser specific object") unless you bundle your code with something like webpack / parcel / snowpack it won't work,

how ever if you just serve your static file through a server it will (I tried your code myself with 0 change and it works), try installing Live Server to your vscode extensions and then when inside your directory just click it to launch a server (bottom right)

Upvotes: 1

Related Questions