Charts

Charts are rendered entirely by DynoStatic as escaped SVG plus an ordinary semantic HTML table. They do not load a JavaScript chart library, send values to a provider, or require Node on the hosted server.

Build a chart

Create Charts from the selected website's Add Widget catalog, then choose Bar, Line, or Donut.

1. Add between one and 100 point labels in display order.
2. Add between one and eight series.
3. Give each series a stable label, choose one of the closed chart palette colors, and enter one comma-separated value for each point label.
4. Save the draft, preview it, and publish when ready.

Bar and line charts accept positive, zero, and negative finite values. Donut values must be non-negative, and every donut series needs at least one positive value. Values outside the bounded supported range, NaN, infinity, malformed lists, mismatched point counts, unknown colors, controls, and excess labels or series fail before the draft changes.

Layout behavior

• Bar groups every series at each labelled point and keeps a visible zero axis for negative values.
• Line plots every series over the ordered labels. A one-point or flat series remains finite and visible without dividing by zero.
• Donut renders one donut per series. Segment colors correspond to point labels, and the series name and total appear in the center.

The SVG uses a responsive viewBox, so it resizes without a client runtime. Long datasets sample visual axis labels to keep the SVG readable; the data table below it always contains every point and every value.

Accessibility and motion

Every SVG has an accessible name, <title>, and <desc>. Color is never the only source of meaning: the legend is labelled, each visual mark carries a text title, and the complete data is repeated in a table with column and row headers. The table region can receive keyboard focus when horizontal scrolling is needed.

The optional entrance animation changes opacity only. It never changes the values or replaces the table, and prefers-reduced-motion: reduce disables it completely.

Limits and hosting

• 1–8 series.
• 1–100 labelled points per series.
• 100 characters per point or series label.
• Finite values with an absolute value no greater than 1,000,000,000,000,000.
• Closed, validated series color tokens; raw CSS and arbitrary color strings are not accepted.
• No public write endpoint, remote data call, provider credential, schema migration, or third-party chart dependency.

Charts participate in the ordinary widget draft, publication, backup, Automation, local-workspace, template, appearance, and website-isolation contracts.