About ARS Line Chart
A WebGPU-rendered line chart with configurable grid, axis labels, and data-point dots.
Supports dynamic data updates, color theming, responsive sizing, candlestick-aligned layout
(slot-align="candlestick"), fixed Y domain for overlay alignment, and a flat
Float64Array fast path for zero-copy WASM integration.
Basic Line Chart
Default chart with 18 data points. All styling uses built-in defaults.
Default (320×180)
Custom Sizing
Charts can be sized with the width and height attributes.
Wide (500×200)
Compact (400×160)
Color Customization
Use line-color, grid-color, and axis-color to theme the chart.
Green Theme
Red Theme
Dot Visibility
Data-point dots can be hidden with show-dots="false".
With Dots (default)
Without Dots
Candlestick Slot Alignment
Set slot-align="candlestick" to match the padding and x-positioning of ars-candlestick-chart, enabling pixel-perfect overlay alignment.
Normal Layout
slot-align="candlestick"
Fixed Y Domain
The yDomain property locks the Y-axis to a fixed [min, max] range, useful for aligning multiple overlay charts to the same scale.
Auto-scaled (default)
yDomain = [0, 100]
Float64Array Fast Path (dataBuffer)
The dataBuffer property accepts a Float64Array for zero-copy data from WASM. When set, it takes priority over the data property.
From Float64Array (50 points)
Interactive Controls
Programmatic data and attribute changes on the default chart above.
Theme Toggle
Usage Instructions
HTML Usage:
<ars-line-chart data="[10, 20, 30, 25, 35]"></ars-line-chart>
Attributes:
data: JSON array of numbers
width / height: Canvas dimensions (default 320×180)
line-color: Line stroke color (default #f6c453)
grid-color: Grid line color
axis-color: Axis label color
background-color: Canvas background
grid-lines: Number of grid lines
show-dots: Show data-point dots (default true)
slot-align: "candlestick" to match candlestick chart padding/positioning
Programmatic API:
chart.data = [10, 20, 30]; — set data via property
chart.dataBuffer = new Float64Array([...]); — zero-copy fast path from WASM
chart.yDomain = [0, 100]; — lock Y-axis to fixed range (null for auto)
chart.slotAlign = true; — use candlestick-compatible padding/positioning
chart.setAttribute('line-color', '#ff0'); — change colors at runtime