Skip to main content
Version: 5.2.0

Reporting

Saving charts to picture​

Prompting client to download a picture of a chart is as simple as triggering saveToFile method. This method is available on all chart types, as well as the Dashboard control.

chart.saveToFile('screenshot', 'image/jpeg')

Please note that the download operation may be blocked by the clients browser. This can happen for example if the method is triggered without any user interaction. Usually you trigger the function in a click event handler.

Alternatively, you can use captureFrame method to save a screenshot to a variable and send it over to a server for example:

const dataBlob = chart.engine.captureFrame('image/jpeg')
const dataUrl = chart.engine.captureFrame(
    'image/png',
    undefined, 
    // Return as data url instead of blob
    true
)

Creating PDF reports​

LightningChart JS lets you write charts into picture assets (see above) which can be embedded into PDF reports.

As for how the actual PDF file is created, please refer to a Node PDF generator library such as PDFKit.

LightningChart in server​

Normally, LightningChart JS is used as a frontend library for adding data visualization components as part of the user interface. It is also possible to use it on server-side as a tool for generating static pictures of charts. This can be useful in some specific scenarios, for example:

  • Creation of picture/PDF/etc. reports for storing or delivery to clients.
  • Applications where data is never transferred to client. Instead, only a picture of the data visualization is sent to the client device.

Both these use cases are based on lcjs-headless, a separate support package that allows using LightningChart JS in headless mode, without an actual browser to display the charts.

danger

Due to not having active users, lcjs-headless is currently not maintained to work with latest LightningChart JS versions (starting with v5.0.0). If your use case requires running LightningChart JS in server-side, please contact us.

For detailed technical requirements, please refer to documentation of lcjs-headless.

Basic use example​

Install lcjs-headless and pngjs for writing PNG files.

npm i @arction/lcjs @arction/lcjs-headless pngjs

Below is a simple use snippet that creates a chart and renders it to a PNG file.

// index.js
const { lightningChart, renderToPNG } = require("@arction/lcjs-headless");
const { Themes } = require("@arction/lcjs");
const { PNG } = require("pngjs");
const fs = require("fs");

const lc = lightningChart();
const chart = lc.ChartXY({ theme: Themes.light });

const chartOutput = renderToPNG(chart, 1920, 1080);
const outputBuff = PNG.sync.write(chartOutput);
fs.writeFileSync("./chart.png", outputBuff);

Important! lcjs-headless is currently bugged when imported with ESM import. Either use CommonJS, or contact us.

// This might result in strange bugs!
import { lightningChart } from '@arction/lcjs-headless'