@@ -26,7 +26,7 @@ This package uses [JSDOM][jsdom], [node-canvas][node-canvas] and [headless-gl][g
26
26
27
27
### Linux
28
28
29
- Only Ubuntu is currently officially supported. ` @arction /lcjs-headless ` most likely works on other distributions but might require extra work.
29
+ Only Ubuntu is currently officially supported. ` @lightningchart /lcjs-headless ` most likely works on other distributions but might require extra work.
30
30
31
31
#### Ubuntu
32
32
@@ -54,45 +54,57 @@ See [headless-gl system dependencies][gl-dependencies] for more details.
54
54
55
55
## Getting Started
56
56
57
- Install both ` @arction /lcjs-headless ` and ` @arction /lcjs ` from npm.
57
+ Install both ` @lightningchart /lcjs-headless ` and ` @lightningchart /lcjs ` from npm.
58
58
59
- ` npm install @arction /lcjs-headless @arction /lcjs `
59
+ ` npm install @lightningchart /lcjs-headless @lightningchart /lcjs `
60
60
61
- When creating a new chart make sure to import the ` lightningChart() ` function from ` @arction /lcjs-headless ` instead of ` @arction /lcjs ` . Other LightningChart JS related imports can be imported from ` @arction /lcjs ` .
61
+ When 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 ` .
62
62
63
63
To render a chart to a buffer, call ` chart.engine.renderFrame(width, height) ` . This function will provide you a buffer containing a single image.
64
64
65
65
``` js
66
- import { lightningChart } from ' @arction /lcjs-headless'
66
+ import { lightningChart } from " @lightningchart /lcjs-headless" ;
67
67
68
- const lc = lightningChart ()
69
- const chart = lc .ChartXY ()
68
+ const lc = lightningChart ({
69
+ license: " my-deployment-license-key" ,
70
+ licenseInformation: " my-deployment-license-information" ,
71
+ });
72
+ const chart = lc .ChartXY ();
70
73
71
- chart .engine .renderFrame (1280 , 720 )
74
+ chart .engine .renderFrame (1280 , 720 );
72
75
```
73
76
74
- The ` @arction /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.
77
+ The ` @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.
75
78
76
79
``` js
77
- import { lightningChart , renderToSharp } from ' @arction /lcjs-headless'
80
+ import { lightningChart , renderToSharp } from " @lightningchart /lcjs-headless" ;
78
81
79
- const lc = lightningChart ()
80
- const chart = lc .ChartXY ()
82
+ const lc = lightningChart ({
83
+ license: " my-deployment-license-key" ,
84
+ licenseInformation: " my-deployment-license-information" ,
85
+ });
86
+ const chart = lc .ChartXY ();
81
87
82
- renderToSharp (chart, 1920 , 1080 ).toFile (' out.png' )
88
+ renderToSharp (chart, 1920 , 1080 ).toFile (" out.png" );
83
89
```
84
90
85
91
``` js
86
- const fs = require (' fs' )
87
- const { PNG } = require (' pngjs' )
88
- const { lightningChart , renderToPNG } = require (' @arction/lcjs-headless' )
89
-
90
- const lc = lightningChart ()
91
- const chart = lc .ChartXY ()
92
-
93
- const chartOutput = renderToPNG (chart, 1920 , 1080 )
94
- const outputBuff = PNG .sync .write (chartOutput)
95
- fs .writeFileSync (' ./chartOutput.png' , outputBuff)
92
+ const fs = require (" fs" );
93
+ const { PNG } = require (" pngjs" );
94
+ const {
95
+ lightningChart ,
96
+ renderToPNG ,
97
+ } = require (" @lightningchart/lcjs-headless" );
98
+
99
+ const lc = lightningChart ({
100
+ license: " my-deployment-license-key" ,
101
+ licenseInformation: " my-deployment-license-information" ,
102
+ });
103
+ const chart = lc .ChartXY ();
104
+
105
+ const chartOutput = renderToPNG (chart, 1920 , 1080 );
106
+ const outputBuff = PNG .sync .write (chartOutput);
107
+ fs .writeFileSync (" ./chartOutput.png" , outputBuff);
96
108
```
97
109
98
110
### Local Resources
@@ -101,8 +113,17 @@ When using Map Chart with in Node JS you need to provide the path to the LCJS re
101
113
102
114
``` js
103
115
const lcjs = lightningChart ({
104
- resourcesBaseUrl: ` fs:${ path .resolve (__dirname , ' node_modules' , ' @arction' , ' lcjs' , ' dist' , ' resources' )} `
105
- })
116
+ license: " my-deployment-license-key" ,
117
+ licenseInformation: " my-deployment-license-information" ,
118
+ resourcesBaseUrl: ` fs:${ path .resolve (
119
+ __dirname ,
120
+ " node_modules" ,
121
+ " @lightningchart" ,
122
+ " lcjs" ,
123
+ " dist" ,
124
+ " resources"
125
+ )} ` ,
126
+ });
106
127
```
107
128
108
129
### Headless in Linux machine
@@ -126,13 +147,16 @@ There is a few helper methods available that are exported by this package.
126
147
- 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.
127
148
128
149
``` js
129
- import { lightningChart , renderToSharp } from ' @arction /lcjs-headless'
150
+ import { lightningChart , renderToSharp } from " @lightningchart /lcjs-headless" ;
130
151
131
- const lc = lightningChart ()
152
+ const lc = lightningChart ({
153
+ license: " my-deployment-license-key" ,
154
+ licenseInformation: " my-deployment-license-information" ,
155
+ });
132
156
133
- const chart = lc .ChartXY ()
157
+ const chart = lc .ChartXY ();
134
158
135
- renderToSharp (chart, 1920 , 1080 ).toFile (' out.png' )
159
+ renderToSharp (chart, 1920 , 1080 ).toFile (" out.png" );
136
160
```
137
161
138
162
> Note: There is a known issue with using ` sharp ` on Windows. https://sharp.pixelplumbing.com/install#canvas-and-windows
@@ -144,11 +168,11 @@ renderToSharp(chart, 1920, 1080).toFile('out.png')
144
168
- Prepares the frame to a PNG image which can then be written to disk.
145
169
146
170
``` js
147
- const fs = require (' fs ' )
148
- const { PNG } = require (' pngjs' )
149
- const chartOutput = renderToPNG (chart, 1920 , 1080 )
150
- const outputBuff = PNG .sync .write (chartOutput)
151
- fs .writeFileSync (' ./chartOutput.png' , outputBuff)
171
+ const fs = require (" fs " );
172
+ const { PNG } = require (" pngjs" );
173
+ const chartOutput = renderToPNG (chart, 1920 , 1080 );
174
+ const outputBuff = PNG .sync .write (chartOutput);
175
+ fs .writeFileSync (" ./chartOutput.png" , outputBuff);
152
176
```
153
177
154
178
### ` renderToBase64 `
@@ -177,15 +201,18 @@ If the font is not a system font, then it needs to be registered before it can b
177
201
This function is re-exported by this package from the ` node-canvas ` package.
178
202
179
203
``` js
180
- import { lightningChart , registerFont } from ' @arction /lcjs-headless'
204
+ import { lightningChart , registerFont } from " @lightningchart /lcjs-headless" ;
181
205
// Register Open Sans font from a font file
182
- registerFont (' OpenSans-Regular.ttf' , { family: ' Open Sans' })
206
+ registerFont (" OpenSans-Regular.ttf" , { family: " Open Sans" });
183
207
184
208
// Create a chart
185
- const lc = lightningChart ()
186
- const chart = lc .ChartXY ()
209
+ const lc = lightningChart ({
210
+ license: " my-deployment-license-key" ,
211
+ licenseInformation: " my-deployment-license-information" ,
212
+ });
213
+ const chart = lc .ChartXY ();
187
214
// Use the registered font
188
- chart .setTitleFont ((f ) => f .setFamily (' Open Sans' ))
215
+ chart .setTitleFont ((f ) => f .setFamily (" Open Sans" ));
189
216
```
190
217
191
218
## Anti-aliasing
@@ -195,15 +222,18 @@ Anti-aliasing that is normally available in browsers is not available when using
195
222
The ` 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.
196
223
197
224
``` js
198
- import { lightningChart , renderToSharp } from ' @arction /lcjs-headless'
225
+ import { lightningChart , renderToSharp } from " @lightningchart /lcjs-headless" ;
199
226
200
227
// Create a chart
201
- const lc = lightningChart ()
228
+ const lc = lightningChart ({
229
+ license: " my-deployment-license-key" ,
230
+ licenseInformation: " my-deployment-license-information" ,
231
+ });
202
232
// Create the chart with a devicePixelRatio 3 to render at higher resolution for downsampling
203
- const chart = lc .ChartXY ({ devicePixelRatio: 3 })
233
+ const chart = lc .ChartXY ({ devicePixelRatio: 3 });
204
234
// render the chart to a sharp object
205
235
// the renderToSharp has built in support for downsampling by providing the pixelRatio as the fourth parameter
206
- renderToSharp (chart, 1920 , 1080 , false , 3 ).toFile (' out.png' )
236
+ renderToSharp (chart, 1920 , 1080 , false , 3 ).toFile (" out.png" );
207
237
```
208
238
209
239
Only the ` renderToSharp ` helper has a built in scaling to downsample the image.
@@ -219,7 +249,7 @@ Make sure to install `fontconfig` package.
219
249
220
250
If the font is not a system font, you will need to register the font file with ` registerFont ` function.
221
251
222
- [ lcjs ] : https://www.arction .com/lightningchart-js /
252
+ [ lcjs ] : https://www.lightningchart .com/js-charts /
223
253
[ gl ] : https://github.com/stackgl/headless-gl
224
254
[ jsdom ] : https://github.com/jsdom/jsdom
225
255
[ node-canvas ] : https://github.com/Automattic/node-canvas
0 commit comments