data-chart

Anti-FOUC

FOUC (Flash of Unstyled Content) happens when the raw table is briefly visible before JavaScript converts it to a chart.

Default Behavior

data-chart automatically injects CSS that hides all table[data-chart] elements on initialization. No additional CSS is needed in most cases — just load the script:

<script src="https://unpkg.com/data-chart" defer></script>

However, because defer scripts run after HTML parsing, there is a brief window where the table may be visible before the script executes and injects the hiding CSS.

Optional: Eliminate the Flash Completely

If you need zero-flash loading, add this inline <style> to your <head>:

<style>
  table[data-chart] {
    visibility: hidden;
    position: absolute;
    width: 0; height: 0;
    overflow: hidden;
  }
</style>

This CSS lives in <head>, so the browser processes it before JavaScript loads. The table is never visible.

If you use a bundler (Vite, webpack, etc.), you can import the same CSS as a module instead:

import 'data-chart/css';

<noscript> Fallback

The inline CSS above hides the table unconditionally. If JavaScript is disabled, data-chart won’t run and the table stays invisible.

Add a <noscript> block to restore visibility when JS is off:

<noscript>
  <style>
    table[data-chart] {
      visibility: visible;
      position: static;
      width: auto; height: auto;
      overflow: visible;
    }
  </style>
</noscript>

Preventing Layout Shift (CLS)

Inserting the chart SVG can cause layout shift. To prevent this, reserve space for the chart container using aspect-ratio:

.chart-wrapper {
  aspect-ratio: 500 / 220;
}

The SVG viewBox width is always 500. The height defaults to 220 and can be changed with data-chart-height. If you set a custom height, update the ratio accordingly:

<table data-chart="bar" data-chart-height="300">...</table>
.chart-wrapper {
  aspect-ratio: 500 / 300;
}

Combining inline anti-FOUC CSS with space reservation can effectively eliminate CLS.