i'm trying to use a chart on my webpage using Lightweight-charts-library but the chart won't show. This is my HTMl
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type = "module" src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
<title>Socket Streams</title>
</head>
<body>
<h1>Trades</h1>
<div id ="chart"></div>
<div id ="trades"></div>
<script>
var binanceSockets = new WebSocket("wss://stream.binance.com:9443/ws/dogebtc@trade")
var tradeDiv = document.getElementById('trades');
binanceSockets.onmessage = function (event){
console.log(event.data);
var object = JSON.parse(event.data);
tradeDiv.append(object.p);
}
</script>
<script src="chart.js" type="module"></script>
</body>
</html>
My goal is to show a chart on the "chart" div, so I basically copy-pasted this code from the Lightweight-charts library making it to point to chart.
import { createChart } from 'lightweight-charts';
const chart = createChart(document.getElementById("chart"), { 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 },
]);
if i remove type = module
from <script src="chart.js"></script>
i get Uncaught SyntaxError: Cannot use import statement outside a module
.
The javascript's file name is charts.js
Im assuming you're not using webpack or any bundler.
For the module
to be considered you'd need to import the library differently and as follow import 'https://unpkg.com/lightweight-charts@latest/dist/lightweight-charts.standalone.production.js';
in your chart.js
script and then use it as advised in the doc.