Skip to main content
Version: 7.1.2

Setting up LightningChart resources

LightningChart JS is distributed along with some resource files, which are required for select features only:

  • ZoomBandChart
  • MapChart
  • Themes.cyberSpace and Themes.turquoiseHexagon
  • OnScreenMenu

When any of these features are used, the user has to ensure that the necessary resources are hosted on a file server where LightningChart JS can fetch them. In official LightningChart JS example frameworks, templates and projects, this setup is usually done beforehand using Webpack configurations or equivalent.

The resources are distributed along with the NPM bundle under @lightningchart/lcjs/dist/resources folder.

tip

If this step is not done by the user application, the required resources will be automatically fetched from lightningchart.com (but only if the features are used by the application). This works but is not recommended for production usage. In this case, a warning message is displayed in console.

Example: Local file server​

cd node_modules/@lightningchart/lcjs/dist/resources
npx http-server --cors
const lcjs = lightningChart({
    resourcesBaseUrl: 'http://127.0.0.1:8081', // <--- or whichever port http-server assigned.
})

Example: Webpack config​

If you copy the resources folder to the Webpack build, then LightningChart JS finds it without having to change the default resourcesBaseUrl value.

// webpack.config.js
plugins: [
    new CopyPlugin({
        patterns: [
            { from: "node_modules/@lightningchart/lcjs/dist/resources", to: "resources" },
        ],
    }),
]