Search code examples
javascripthtmlchartslightweight-charts

Lightweight-charts doesn't show on html page

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

Solution

  • 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.