HTML canvas: draw a chart without hiding its underlying data

Use it for a real task

A receipt dashboard draws a small trend line for quick scanning. Its width and height set the bitmap dimensions, while a nearby data summary states the key value in ordinary text. The canvas fallback sentence appears when canvas is not rendered; it is not a complete replacement for an accessible chart in a browser that does render the bitmap. Keep the source data available outside the drawing.

<figure>
  <canvas id="review-trend" width="640" height="240">
    Receipt approvals rose from 47 to 73 this period.
  </canvas>
  <figcaption>Approvals rose from 47 to 73; the report data remains available below.</figcaption>
</figure>
<p>Previous period: 47 approved. Current period: 73 approved.</p>
<script type="module" src="/assets/review-trend.js"></script>

What the markup guarantees

The module must exist and draw from trusted report values. The text values must match the plotted values; this sample does not include the data service or the drawing implementation.

Cost and limits

Bitmap work scales with pixel area and redraw frequency. A textual summary is cheap and often serves readers better than an elaborate visual for only two values.

Common Mistakes

• Do not assume pixels provide table-like relationships.
• Do not rely only on fallback descendants when canvas renders.
• Do not let chart text drift from the plotted dataset.

Connected lessons

• HTML data tables: name row and column relationships explicitly
• HTML figure and figcaption: keep an asset with its explanation
• HTML module scripts: load one module without ordering every classic script