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 directory
cd ShadePlot/

Usage Example

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'
})

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.