01
Area filled trend
fillArea: truesoft fill, smooth curve, one series CSSScript Demo Page
Particle Charts JavaScript Library Demos
Download Back To CSSScript.Com
Shape plain JSON into bars, lines, areas, bubbles, radar, pies, and donuts — then tune the particle field in real time.
07chart forms
01canvas engine
∞particle states
Signal / 12 months
Revenue pulse
Hover the field to inspect a point
loading particles in frame
01 / Chart index
Seven forms of the same field.
Each example is live. Hover for a tooltip, use the legend to mute a series, and resize the page to watch the plot re-layout.
02
Bar grouped comparison
showValues: truetwo series, four quarters03
Line smooth comparison
curve: 'smooth'monotone, never overshoots04
Pie part to whole
padAngle: 3direct labels and category key05
Donut total in the center
innerRadius: .62same data, open center06
Bubble size carries a third value
{ x, y, r }two independent x positions07
Radar multi-axis silhouette
levels: 4two models, six measures02 / Playground
Tune the field.
Change a type, move a slider, or hide a layer. The preview and the configuration update together.
Live configuration
Bar / grouped comparison
current options
03 / Methods
Make the particles move.
A small method loop for the moments that matter: update the data, retune the look, or take the frame with you.
public methods
04 / Snippets
Copy the useful parts.
Short examples for a plain HTML page, multi-series data, and the options used by the live lab.
01 / CDN
02 / Browser chart
03 / Multi-series
04 / Live update
More data shapes and module syntax
05 / Module import
06 / Bubble data
05 / API sheet
The controls behind the canvas.
The compact reference keeps the page useful while the playground stays focused on interaction.
| Option | Behavior |
|---|---|
| Core | |
| type | 'line', 'area', 'bar', 'bubble', 'radar', 'pie', or 'donut'. |
| data | Numbers, { label, value } records, { labels, values }, or { labels, series }. |
| background | Canvas fill painted behind the particles. Transparent by default. |
| padding | A number, [y, x], or { top, right, bottom, left }. Auto-measured by default. |
| responsive | Re-layout the chart when its container changes size. |
| Particles | |
| particleColor | One color, an array of colors, or a function receiving the particle index and series. |
| particleSize | Base particle radius in CSS pixels. Default: 0.8. |
| particleDensity | Multiplier for the auto-computed particle budget. Default: 15. |
| particleCount | Hard ceiling for the particle budget. Default: 50000. |
| particleBloom | Additive glow strength from 0 to 1. |
| particleOpacity | Global particle alpha, kept below 1 to preserve color under stacking. |
| particleJitter | Idle drift amplitude in pixels. Set to 0 for a static field. |
| particleSpeed | Spring stiffness pulling each particle toward its target. |
| particleShape | 'soft' particles are circles with a readable halo; 'square' forces rectangles. |
| Chrome | |
| showAxis / showGrid | Toggle axes, tick labels, and grid lines. |
| showLegend | Render the series or category legend. Legend entries are keyboard-toggleable. |
| showTooltip | Show a hover tooltip and crosshair. |
| showValues | Print values next to marks or slices. |
| legendPosition | 'top', 'bottom', 'left', or 'right'. |
| min / max | Pin the value domain instead of deriving it from the data. |
| ticks | Approximate tick count. Nice-number rounding selects the final set. |
| valueFormat | Function returning the text used by ticks, labels, and tooltips. |
| Chart-specific | |
| curve / fillArea | Line interpolation can be 'smooth', 'linear', or 'step'. Area charts enable fill. |
| stacked / horizontal | Bar layout switches for stacked or horizontal marks. |
| minRadius / maxRadius | Bubble radius range. Values map by area, not by diameter. |
| levels / webShape | Radar ring count and web style: 'polygon' or 'circle'. |
| innerRadius | Donut hole as a fraction of the outer radius. Default donut: 0.62. |
| startAngle / padAngle | Radial start angle in degrees and the gap between slices. |
| Methods | |
| chart.update(data, opts) | Swap the data and let the particles morph to the new shape. |
| chart.setOptions(opts) | Change the look without replacing the data. |
| chart.resize() | Force a layout pass. |
| chart.start() / stop() | Resume or pause the render loop. |
| chart.toggleSeries(key) | Mute or restore a series, the same action used by the legend. |
| chart.toDataURL() | Return a PNG snapshot of the current frame. |
| chart.destroy() | Stop the loop, drop listeners, and remove chart-owned DOM. |