SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components

Answered
1
0

I tried to use the trial version of SciChart with Next.js. But I got “SciChartSurface.setRuntimeLicenseKey is not a function” error. I don’t know what’s wrong, could you provide guideline for using SciChart with Next.js?

These are the codes in my next.config.js:

const CopyPlugin = require("copy-webpack-plugin");

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  webpack: ( config, { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack } ) => {
    config.plugins.push(
            new CopyPlugin({
                patterns: [
                    { from: "node_modules/scichart/_wasm/scichart2d.data", to: "" },
                    { from: "node_modules/scichart/_wasm/scichart2d.wasm", to: "" }
                ]
            })
        );
    return config;
  },
}

module.exports = nextConfig

And I have imported these files in pages/index.js

import {SciChartSurface} from "scichart/Charting/Visuals/SciChartSurface";
import {NumericAxis} from "scichart/Charting/Visuals/Axis/NumericAxis";
Version
8.11.0
  • You must to post comments
Best Answer
1
0

Hi Kelly, I don’t think this is the correct approach

SciChartSurface.setRuntimeLicensekey() is a static function. You need to import SciChartSurface not import setRuntimeLicenseKey

Please try this code

import { SciChartSurface } from “scichart/Charting/Visuals/SciChartSurface ”;
... 
SciChartSurface.setRuntimeLicenseKey("... your license key");

If in doubt, see the docs!

Setting a Runtime License on a SciChartSurface
Another static method which allows you to license SciChart (apply a trial or paid production or test license) is SciChartSurface.setRuntimeLicenseKey()

All of our instructions for licensing can be found at the page scichart.com/licensing-scichart-js. A quick code sample is below. Ensure that you call this function once before any SciChartSurface is shown with a valid runtime key.

 import {SciChartSurface} from "scichart/Charting/Visuals/SciChartSurface";
  
   // Set a runtime key in JavaScript once before any SciChartSurface is created
   SciChartSurface.setRuntimeLicenseKey("YOUR_RUNTIME_KEY_HERE");
  

Best regards,
Andrew

  • You must to post comments
Great Answer
1
0

Hi there

We have a list of sample projects of how to configure SciChart’s wasm & data file depending on frameworks & examples at this documentation page:

Deploying Wasm (WebAssembly) and Data Files with your app.

If you receive an error message when running your app, you may not have deployed the Wasm (WebAssembly) or data files correctly. Below are some steps on how to resolve that.

Option 1: Package Wasm & Data Files with WebPack (or similar)

In our tutorials and boilerplate examples we show you how to package the Wasm & Data files to load them in a variety of JavaScript frameworks. Find the links to setting up a JavaScript project below:

nextjs code sample

Click on that NextJS code sample we’ve published above. It has a section on wasm file deployment.

SciChart.js has a Wasm (webAssembly) and Data file which must be deployed to output folders for correct operation of our Js chart library.

Next.js requires *.data file to be in /public and wasm file to be in the build output .next/static/chunks/pages

To do this, we use next.config.js and webpack to copy the wasm file

// next.config.js
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Note: we provide webpack above so you should not `require` it
    // Perform customizations to webpack config
    const destWasmFolder = "static/chunks/pages";
    config.plugins.push(new CopyPlugin({
        patterns: [
            { from: "node_modules/scichart/_wasm/scichart2d.wasm", to: destWasmFolder },
        ]
    }),)

    // Important: return the modified config
    return config
}

Does this help?

If not, let us know, we can update the NextJS sample.

Also there is a possibility to load wasm from CDN which will make life simpler, but requires an internet connection for your app.

To do this, see

Option 2: Load Wasm from URL with SciChartSurface.configure() or useWasmFromCDN()

at this webpage

  • You must to post comments
1
0

Hi Andrew,

Thanks for your help. I have changed the webpack config in my next.config.js according to the guideline. And moved the scichart2d.data to the “public” folder with the copy-files-from-to. I can see the chart loaded when I load the page now. However, I still get the “SciChartSurface.setRuntimeLicenseKey is not a function” error.

Here are my codes to initialize the SciChart:

async function initSciChart() {
const { sciChartSurface, wasmContext } = await chartBuilder.build2DChart("scichart-root", {
series: {
type: ESeriesType.LineSeries,
xyData: {
xValues: [1,2,3,4],
yValues: [1,4,2,6]
}
}
});

//xxx refer to the license code.
sciChartSurface.SetRuntimeLicenseKey("xxx");
}

It seems that the sciChartSurface does has a function called “SetRuntimeLicenseKey”. Do you know if there is anything wrong with my codes?

  • You must to post comments
1
0

Hi Andrew,

I finally found out how to add the license code. I should import the setRuntimeLicenseKey like this:

import { setRuntimeLicenseKey } from "scichart/Charting/Visuals/licenseManager2D";

The problem is solved now. Thanks!

  • You must to post comments
1
0

Hi Andrew,

I can add license key with your approach now. Thanks!.

  • You must to post comments
Showing 5 results
Your Answer

Please first to submit.