Charts.css vs ProvChart vs FSCSS (st-core): three ways to chart without a JS chart library

JavaScript chart libraries can be powerful, but they often come with large file sizes. For pages that only need a basic trend or comparison, using a full chart library may not be necessary. Three open approaches can display data without requiring a client-side chart engine. These methods differ in workflow and target audience.

All three keep visualization close to the browser's normal layout and paint path, reducing main-thread chart code and making it easier for crawlers and clients to understand content and Core Web Vitals.

Charts.css is a styling library that turns semantic HTML table markup into bars, lines, and other views. This option is best for pages that prioritize accessibility, such as WCAG-compliant reports. It works well for static sites like Astro, Eleventy, or Jekyll where charts are part of the content, not an app shell. The process involves writing or generating a table and applying Charts.css classes to modify the appearance.

ProvChart is another alternative that treats charts as compile output. It takes JSON data or a builder as input and generates scoped HTML, CSS, or SVG. This method is ideal for performance-sensitive pages, such as SSR, Jamstack widgets, or mobile/web pages with low bandwidth. The backend or CI system owns the data, while the front-end page only injects the generated markup.

Finally, FSCSS/st-core presents charts as a CSS design layer. Instead of using a chart library, developers describe the chart structure in .fscss, and the system compiles it into native CSS using custom properties, clip-path, grids, and other layout primitives. This approach is best for teams that want consistent visual styles across different frameworks (React, Vue, Svelte, or plain HTML) and want fine control over geometry using CSS layout features.

The workflow involves authoring in FSCSS, compiling the styles, and then shipping them alongside the rest of the design system.