{"id":19472066,"url":"https://github.com/Lightning-Chart/lcjs-headless","last_synced_at":"2025-04-25T12:31:19.777Z","repository":{"id":38966797,"uuid":"259629341","full_name":"Lightning-Chart/lcjs-headless","owner":"Lightning-Chart","description":"Headless server use support for LightningChart JS.","archived":false,"fork":false,"pushed_at":"2024-08-05T06:43:24.000Z","size":274,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-13T20:20:38.318Z","etag":null,"topics":["example","lcjs","lightningchart-js","node-js","server"],"latest_commit_sha":null,"homepage":"https://www.arction.com/lightningchart-js/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Lightning-Chart.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-28T12:22:36.000Z","updated_at":"2024-08-30T04:31:35.000Z","dependencies_parsed_at":"2024-12-29T00:31:30.100Z","dependency_job_id":"1be70f0c-1c05-49e7-9f4f-76ff2f8c32a9","html_url":"https://github.com/Lightning-Chart/lcjs-headless","commit_stats":{"total_commits":69,"total_committers":5,"mean_commits":13.8,"dds":0.536231884057971,"last_synced_commit":"c52e09d27b435d29fab83de595ac5173da87a1a2"},"previous_names":["lightning-chart/lcjs-headless","arction/lcjs-headless"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lightning-Chart%2Flcjs-headless","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lightning-Chart%2Flcjs-headless/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lightning-Chart%2Flcjs-headless/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lightning-Chart%2Flcjs-headless/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Lightning-Chart","download_url":"https://codeload.github.com/Lightning-Chart/lcjs-headless/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250817619,"owners_count":21492186,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["example","lcjs","lightningchart-js","node-js","server"],"created_at":"2024-11-10T19:12:09.721Z","updated_at":"2025-04-25T12:31:19.285Z","avatar_url":"https://github.com/Lightning-Chart.png","language":"TypeScript","readme":"# LightningChart JS Node JS support package\n\nNode JS support package for LightningChart JS.\n\nThis package uses [JSDOM][jsdom], [node-canvas][node-canvas] and [headless-gl][gl] to bring the [LightningChart JS][lcjs] to Node JS.\n\n- [System Dependencies](#system-dependencies)\n  - [Linux](#linux)\n  - [Windows](#windows)\n- [Getting Started](#getting-started)\n  - [Local Resources](#local-resources)\n  - [Headless in Linux machine](#headless-in-linux-machine)\n- [Using Helpers](#using-helpers)\n  - [`renderToSharp`](#rendertosharp)\n  - [`renderToPNG`](#rendertopng)\n  - [`renderToBase64`](#rendertobase64)\n  - [`renderToDataURI`](#rendertodatauri)\n  - [`renderToRGBABuffer`](#rendertorgbabuffer)\n- [Font support](#font-support)\n- [Anti-aliasing](#anti-aliasing)\n- [Troubleshooting](#troubleshooting)\n\n## System dependencies\n\n[`node-gyp`](node-gyp) is required on some platforms. See the documentation for [node-gyp](node-gyp) for installation instructions.\n\n### Linux\n\nOnly Ubuntu is currently officially supported. `@lightningchart/lcjs-headless` most likely works on other distributions but might require extra work.\n\n#### Ubuntu\n\nRequirements:\n\n- [Python 2.7][python2.7]\n- GNU C++ environment (`build-essential` package from `apt`)\n- [libxi-dev][libxi]\n- OpenGl driver ([Mesa 3D][mesa])\n- [Glew][glew]\n- [pkg-config][pkg-config]\n\n`$ sudo apt-get install -y build-essential libxi-dev libglu1-mesa-dev libglew-dev pkg-config`\n\nSee [headless-gl system dependencies][gl-dependencies] for more details.\n\n### Windows\n\n- [Python 2.7][python2.7]\n- [Microsoft Visual Studio][vs]\n\n### macOS\n\n- [Xcode][xcode] or [Xcode Command Line Tools][xcode-command-line-tools]\n\n## Getting Started\n\nInstall both `@lightningchart/lcjs-headless` and `@lightningchart/lcjs` from npm.\n\n`npm install @lightningchart/lcjs-headless @lightningchart/lcjs`\n\nWhen creating a new chart make sure to import the `lightningChart()` function from `@lightningchart/lcjs-headless` instead of `@lightningchart/lcjs`. Other LightningChart JS related imports can be imported from `@lightningchart/lcjs`.\n\nTo render a chart to a buffer, call `chart.engine.renderFrame(width, height)`. This function will provide you a buffer containing a single image.\n\n```js\nimport { lightningChart } from \"@lightningchart/lcjs-headless\";\n\nconst lc = lightningChart({\n  license: \"my-deployment-license-key\",\n  licenseInformation: \"my-deployment-license-information\",\n});\nconst chart = lc.ChartXY();\n\nchart.engine.renderFrame(1280, 720);\n```\n\nThe `@lightningchart/lcjs-headless` package provides a couple of helper functions to make the use of LightningChart JS in Node JS environment easier. You can render an image directly to a `sharp` or `pngjs` objects with `renderToSharp` and `renderToPNG` helper functions.\n\n```js\nimport { lightningChart, renderToSharp } from \"@lightningchart/lcjs-headless\";\n\nconst lc = lightningChart({\n  license: \"my-deployment-license-key\",\n  licenseInformation: \"my-deployment-license-information\",\n});\nconst chart = lc.ChartXY();\n\nrenderToSharp(chart, 1920, 1080).toFile(\"out.png\");\n```\n\n```js\nconst fs = require(\"fs\");\nconst { PNG } = require(\"pngjs\");\nconst {\n  lightningChart,\n  renderToPNG,\n} = require(\"@lightningchart/lcjs-headless\");\n\nconst lc = lightningChart({\n  license: \"my-deployment-license-key\",\n  licenseInformation: \"my-deployment-license-information\",\n});\nconst chart = lc.ChartXY();\n\nconst chartOutput = renderToPNG(chart, 1920, 1080);\nconst outputBuff = PNG.sync.write(chartOutput);\nfs.writeFileSync(\"./chartOutput.png\", outputBuff);\n```\n\n### Local Resources\n\nWhen using Map Chart with in Node JS you need to provide the path to the LCJS resource files. To do this provide `resourcesBaseUrl` with `fs:` prefix.\n\n```js\nconst lcjs = lightningChart({\n  license: \"my-deployment-license-key\",\n  licenseInformation: \"my-deployment-license-information\",\n  resourcesBaseUrl: `fs:${path.resolve(\n    __dirname,\n    \"node_modules\",\n    \"@lightningchart\",\n    \"lcjs\",\n    \"dist\",\n    \"resources\"\n  )}`,\n});\n```\n\n### Headless in Linux machine\n\nWhen running lcjs-headless in a Linux environment that doesn't provide a X11 or OpenGL environment you will need two more packages to make the environment ready for lcjs-headless.\n\n1. [Xvfb][xvfb]\n\n2. [Mesa][mesa]\n\n`xvfb-run -s \"-ac -screen 0 1280x720x24\" \u003cnode program\u003e`\n\n## Using helpers\n\nThere is a few helper methods available that are exported by this package.\n\n### `renderToSharp`\n\n- Requires `sharp` package to be installed. [https://sharp.pixelplumbing.com/][sharp]\n  - Also install `@types/sharp` if you are using TypeScript\n- Prepares the frame to a \"sharp\" object, which allows the use of `sharp` to manipulate the image further or export it to a many different image formats.\n\n```js\nimport { lightningChart, renderToSharp } from \"@lightningchart/lcjs-headless\";\n\nconst lc = lightningChart({\n  license: \"my-deployment-license-key\",\n  licenseInformation: \"my-deployment-license-information\",\n});\n\nconst chart = lc.ChartXY();\n\nrenderToSharp(chart, 1920, 1080).toFile(\"out.png\");\n```\n\n\u003e Note: There is a known issue with using `sharp` on Windows. https://sharp.pixelplumbing.com/install#canvas-and-windows\n\n### `renderToPNG`\n\n- Requires `pngjs` package to be installed. [https://github.com/lukeapage/pngjs][pngjs]\n  - Also install `@types/pngjs` if you are using TypeScript.\n- Prepares the frame to a PNG image which can then be written to disk.\n\n```js\nconst fs = require(\"fs\");\nconst { PNG } = require(\"pngjs\");\nconst chartOutput = renderToPNG(chart, 1920, 1080);\nconst outputBuff = PNG.sync.write(chartOutput);\nfs.writeFileSync(\"./chartOutput.png\", outputBuff);\n```\n\n### `renderToBase64`\n\n- Requires `pngjs` package to be installed. [https://github.com/lukeapage/pngjs][pngjs]\n  - Also install `@types/pngjs` if you are using TypeScript.\n- Uses the `pngjs` package to encode the raw RGBA data to a PNG and then encodes the buffer to a base 64 string.\n\n### `renderToDataURI`\n\n- Requires `pngjs` package to be installed. [https://github.com/lukeapage/pngjs][pngjs]\n  - Also install `@types/pngjs` if you are using TypeScript.\n- Uses the `pngjs` package to encode the raw RGBA data to a PNG and then encodes the buffer to a base 64 string and adds the required data uri string.\n\n### `renderToRGBABuffer`\n\n- Creates a raw Node JS buffer from the UInt8Array that is returned by the `chart.engine.renderFrame`.\n\n## Font support\n\nDifferent font's can be easily used.\n\nThe font is specified in the application code just like you would specify it when using LightningChart JS in browser.\n\nIf the font is not a system font, then it needs to be registered before it can be used. Registering should be done before any chart is created. Registering can be done with `registerFont` function. If the font is not found, then a default font for the system will be used.\nThis function is re-exported by this package from the `node-canvas` package.\n\n```js\nimport { lightningChart, registerFont } from \"@lightningchart/lcjs-headless\";\n// Register Open Sans font from a font file\nregisterFont(\"OpenSans-Regular.ttf\", { family: \"Open Sans\" });\n\n// Create a chart\nconst lc = lightningChart({\n  license: \"my-deployment-license-key\",\n  licenseInformation: \"my-deployment-license-information\",\n});\nconst chart = lc.ChartXY();\n// Use the registered font\nchart.setTitleFont((f) =\u003e f.setFamily(\"Open Sans\"));\n```\n\n## Anti-aliasing\n\nAnti-aliasing that is normally available in browsers is not available when using LightningChart JS in Node environment.\n\nThe `devicePixelRatio` option when creating a chart can be used to render the chart with higher resolution while scaling all elements so that when the image is downsampled to the target resolution it's displayed correctly but with the benefits of using higher resolution. Rendering at higher resolution is more work so the rendering is slower.\n\n```js\nimport { lightningChart, renderToSharp } from \"@lightningchart/lcjs-headless\";\n\n// Create a chart\nconst lc = lightningChart({\n  license: \"my-deployment-license-key\",\n  licenseInformation: \"my-deployment-license-information\",\n});\n// Create the chart with a devicePixelRatio 3 to render at higher resolution for downsampling\nconst chart = lc.ChartXY({ devicePixelRatio: 3 });\n// render the chart to a sharp object\n// the renderToSharp has built in support for downsampling by providing the pixelRatio as the fourth parameter\nrenderToSharp(chart, 1920, 1080, false, 3).toFile(\"out.png\");\n```\n\nOnly the `renderToSharp` helper has a built in scaling to downsample the image.\nOther helpers or using the `chart.engine.renderFrame` method do not have built in scaling, instead these APIs will return the image at a resolution that is multiplied by the devicePixelRatio.\n\n## Troubleshooting\n\n### `Fontconfig error: Cannot load default config file`\n\nMake sure to install `fontconfig` package.\n\n### Specified font is not used\n\nIf the font is not a system font, you will need to register the font file with `registerFont` function.\n\n[lcjs]: https://www.lightningchart.com/js-charts/\n[gl]: https://github.com/stackgl/headless-gl\n[jsdom]: https://github.com/jsdom/jsdom\n[node-canvas]: https://github.com/Automattic/node-canvas\n[sharp]: https://sharp.pixelplumbing.com/\n[pngjs]: https://github.com/lukeapage/pngjs\n[mesa]: https://www.mesa3d.org/intro.html\n[xvfb]: https://en.wikipedia.org/wiki/Xvfb\n[node-gyp]: https://github.com/nodejs/node-gyp\n[python2.7]: https://www.python.org/\n[libxi]: https://www.x.org/wiki/\n[glew]: http://glew.sourceforge.net/\n[pkg-config]: https://www.freedesktop.org/wiki/Software/pkg-config/\n[vs]: https://visualstudio.microsoft.com/\n[gl-dependencies]: https://github.com/stackgl/headless-gl#system-dependencies\n[xcode]: https://developer.apple.com/xcode/\n[xcode-command-line-tools]: https://mac.install.guide/commandlinetools/index.html\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLightning-Chart%2Flcjs-headless","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLightning-Chart%2Flcjs-headless","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLightning-Chart%2Flcjs-headless/lists"}