Skip to main content
Version: 5.1.0

Vanilla JS

"Vanilla JS" refers to frontend applications that are directly created with JavaScript, HTML and CSS, without relying on any framework. While using a development framework can greatly improve a development project, it is not mandatory!

By far the technically simplest way to realize the first LightningChart application is to create a blank HTML file and download LightningChart via a CDN service such as jsdelivr.

Here's how simple it can be:

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/@arction/[email protected]/dist/lcjs.iife.js"></script>
        <style>
            #chart {
                width: 500px;
                height: 500px;
            }
        </style>
    </head>
    <body>
        <div id="chart"></div>
        <script>
            const { lightningChart } = lcjs
            const container = document.getElementById('chart')
            const chart = lightningChart().ChartXY({ container })
        </script>
    </body>
</html>

The above is probably the smallest independent application you could make. When saved to a HTML file (app.html), you can directly open the file with a web browser (Google Chrome or equivalent).

In practice, the above HTML file actually contains all of the three primary building blocks (languages) of web applications - HTML, CSS and JavaScript.

For a project template, see lcjs-html-example

Intellisense / type information​

The biggest caveat in developing using the IIFE distribution is that there is no type information. When writing code, you don't see what the method names are and if you are passing the right arguments.

This can be improved by placing your JavaScript code in separate .js files (as opposed to being inside script tags in .html files), and adding this reference to external type information:

/// <reference path="lcjs.iife.d.ts" />

The lcjs.iife.d.ts file is included in the @arction/lcjs NPM release bundle. You can download it to your project for example by visiting jsdelivr CDN.

Alternatively, most of our template projects which utilize the IIFE distribution also include this file. For example, lcjs-html-example where you can also see an example how it is used.