Skip to content

Interactive charts

Preview Available in release assets

Present server-shaped data visually while retaining a complete textual summary and accessible table as canonical evidence.

Server contract

Use section.thin-interactive-chart. Return summary, SVG, and table from one server response; client code never calculates business metrics.

The GET form, text summary, and complete table remain usable when SVG, CSS, or JavaScript is unavailable.

Interactive charts primary example

Show code
<section class="thin-interactive-chart" aria-labelledby="revenue-title">
  <h2 id="revenue-title">Quarterly revenue</h2>
  <p id="revenue-summary">Revenue rose from $82,000 to $108,000 across four quarters.</p>
  <form action="/reports/revenue" method="get">
    <label for="series">Series</label>
    <select class="thin-select" id="series" name="series">
      <option value="revenue">Revenue</option>
      <option value="orders">Orders</option>
    </select>
    <button class="thin-button">Update chart</button>
  </form>
  <svg role="img" aria-labelledby="revenue-title revenue-summary" viewBox="0 0 400 180">
    <path d="M20 150 L140 110 L260 120 L380 40" fill="none" stroke="currentColor" stroke-width="4">
    </path>
  </svg>
  <table class="thin-table">
    <caption>Quarterly revenue data</caption>
    <thead>
      <tr>
        <th>Quarter</th>
        <th>Revenue</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Q1</th>
        <td>$82,000</td>
      </tr>
      <tr>
        <th>Q2</th>
        <td>$94,000</td>
      </tr>
      <tr>
        <th>Q3</th>
        <td>$91,000</td>
      </tr>
      <tr>
        <th>Q4</th>
        <td>$108,000</td>
      </tr>
    </tbody>
  </table>
</section>

Anatomy

  • Named section
  • Text summary
  • GET view controls
  • Non-interactive SVG overview
  • Captioned data table

Variants and sizes

  • Line
  • Bar
  • Single series
  • Multiple server-selected series

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • Default
  • Keyboard focus
  • Selected series
  • Pending
  • Empty data
  • Server error
  • Reconnect
  • Long labels
  • Reduced motion
  • No JavaScript

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

The native GET form requests another server-shaped view. Datastar may morph returned SVG, summary, and table together; bounded hover or focus highlighting must never hide values or mutate source data.

Accessibility

Keep a concise summary and captioned table, label controls, expose focus without pointer dependence, preserve DOM order, avoid color-only distinctions, and disable decorative motion under reduced-motion preferences.

Contract
COMPOSE
Basis
Native figure, SVG title/description, visible summary, and equivalent table; no APG Grid claim
Evidence
  • tests/unit/library/data-display.test.ts

API

Use section.thin-interactive-chart. Return summary, SVG, and table from one server response; client code never calculates business metrics.

Behavior tier: datastar-required

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

The GET form, text summary, and complete table remain usable when SVG, CSS, or JavaScript is unavailable.

Assets and dependencies

  • /foundation.css
  • /components.css

Dependencies: datastar@1.0.2

Source: packages/ui/src/items/interactive-charts/style.ts

Composition

Derived from the examples and style specs, not authored.

Composes