ShadePlot

Render charts to PNG files using WebGPU and Deno.

Light — Simple	Dark — Simple

Light — Title + Legend	Dark — Title + Legend

Requirements

• Deno (v2.5.0 or higher recommended)
• WebGPU Compatible Hardware (GPU with WebGPU support)
• Git (for cloning the repository)

Installation

# Clone the repository
git clone https://github.com/NeaByteLab/ShadePlot.git
# Enter the project directorycd ShadePlot/

Usage Example

importshadeplotfrom'@neabyte/shadeplot'awaitshadeplot({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'})

API Reference

shadeplot(options)

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.

---

ShadePlotOptions

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

---

Canvas

Field	Type	Required	Description
width	number	✓	Canvas width in pixels
height	number	✓	Canvas height in pixels
style	'dark' | 'light'	✓	Color theme

---

Layout

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

---

Series

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

---

LineOptions

Field	Type	Default	Description
width	number	2	Line width in pixels
dash	'solid' | 'dash' | 'dot'	'solid'	Line dash style

---

MarkerOptions

Field	Type	Default	Description
show	boolean	false	Show circle marker at each point
size	number	4	Marker diameter in pixels

License

This project is licensed under the MIT license. See the LICENSE file for more info.