ShadePlot 
Render charts to PNG files using WebGPU and Deno.
 |
 |
| Light — Simple |
Dark — Simple |
 |
 |
| Light — Title + Legend |
Dark — Title + Legend |
- Deno (v2.5.0 or higher recommended)
- WebGPU Compatible Hardware (GPU with WebGPU support)
- Git (for cloning the repository)
# Clone the repository
git clone https://github.com/NeaByteLab/ShadePlot.git
# Enter the project directory
cd ShadePlot/
import shadeplot from '@neabyte/shadeplot'
await shadeplot({
canvas: {
width: 1280,
height: 720,
style: 'dark'
},
layout: {
title: 'Monthly Performance',
showLegend: true,
legendPosition: 'top-right'
},
series: [
{
label: 'Revenue',
data: [
{ x: 1, y: 42 },
{ x: 2, y: 58 },
{ x: 3, y: 71 }
],
color: '#3b82f6',
line: { width: 2, dash: 'solid' },
marker: { show: true, size: 5 }
},
{
label: 'Expenses',
data: [
{ x: 1, y: 80 },
{ x: 2, y: 85 },
{ x: 3, y: 92 }
],
color: '#f43f5e',
line: { width: 2, dash: 'dash' },
marker: { show: true, size: 5 }
}
],
output: './chart.png'
})shadeplot(options: ShadePlotOptions): Promise<void>
- Returns: Promise<void> — resolves when the PNG file is written.
- Throws: Error if canvas dimensions are <= 0 or any series data is empty.
| Field |
Type |
Required |
Description |
| canvas |
Canvas |
✓ |
Canvas size and color theme |
| layout |
Layout |
|
Title and legend configuration |
| series |
Series[] |
✓ |
One or more data series to render |
| output |
string |
✓ |
Output PNG file path |
| Field |
Type |
Required |
Description |
| width |
number |
✓ |
Canvas width in pixels |
| height |
number |
✓ |
Canvas height in pixels |
| style |
'dark' | 'light' |
✓ |
Color theme |
| Field |
Type |
Default |
Description |
| title |
string |
|
Chart title, centered in header |
| showLegend |
boolean |
false |
Show legend in header |
| legendPosition |
'top-left' | 'top-right' |
'top-left' |
Horizontal legend alignment |
| Field |
Type |
Required |
Description |
| label |
string |
✓ |
Series name shown in legend |
| data |
Array<{ x: number; y: number }> |
✓ |
Data points to plot |
| color |
string |
✓ |
Hex color string (e.g. #3b82f6) |
| line |
LineOptions |
|
Line style options |
| marker |
MarkerOptions |
|
Marker style options |
| Field |
Type |
Default |
Description |
| width |
number |
2 |
Line width in pixels |
| dash |
'solid' | 'dash' | 'dot' |
'solid' |
Line dash style |
| Field |
Type |
Default |
Description |
| show |
boolean |
false |
Show circle marker at each point |
| size |
number |
4 |
Marker diameter in pixels |
This project is licensed under the MIT license. See the LICENSE file for more info.
