Best chart blocks 2026: 75 verified sections

A chart block is a section with a chart already mounted and fake data inside. The catalogue counts 75 from 2 registries, measured on 1 November 2026 on /api/blocks/category/chart: the table shows the eight with the most files, not the prettiest.

Where a chart breaks in production

The first failure is the container. A chart inside a fixed height with a percentage width works in the desktop preview and collapses at 320 pixels, where axis labels overlap or get clipped. The second is colour: series told apart only by hue become indistinguishable for anyone who does not separate red from green, and without a supporting table the number cannot be recovered.

The third failure is weight. Most of these blocks import a full charting library to draw one line, and that library lands in the bundle of the landing page. The fourth is the tooltip: it appears on hover and ignores the keyboard, so the value exists only for pointer users.

What to read in the record before downloading

• The drawing library imported: recharts, visx or hand-written SVG change weight and control in very different ways.
• Whether the component takes a data prop or reads an internal constant: only the first case connects to an API.
• The declared height: fixed pixels are more predictable, a ratio avoids clipped labels on mobile.
• Whether a hidden table or text summary carries the same values, which is the accessibility requirement.
• The publisher licence, which across two registries means two different contracts.

In this category the file count says almost everything about separation. Two files mean the chart and the card around it: you can swap the frame without touching the drawing. One file means chart and heading are the same component, and every layout variant needs a copy.

The limitation the catalogue does not cover

None of these 75 blocks ships a data adapter. The series are constants written into the file, and the axis scale is tuned to those numbers: with real revenue spanning two orders of magnitude the shape changes and the labels collide. The second limitation is the declared licence, which covers the block but not the drawing library it imports.

The rule that avoids a rewrite

If the chart sits above the fold on mobile, demand a data prop, a fixed height and a supporting table; otherwise pick another block. If the number is secondary, a sparkline inside a stat card costs a tenth of the weight and still shows the trend. The question is not which chart looks better, but how many charts the page must draw at once.

The alternative is drawing the simple case by hand. A forty-point line in SVG takes a few lines, imports nothing and prints correctly. A block pays off when you need axes, legend, tooltip and loading states already composed; it does not pay off when the chart is decorative and nobody reads the values.

Then there is printing and export. A chart drawn in SVG survives printing and saving to PDF; a canvas chart does not, because the canvas is an image and loses definition. If your reader has to attach the report to an email, check how the block draws before anything else: the output format is a decision made by reading the file, not the preview.

curl "https://ui.eneawork.it/api/blocks/category/chart?limit=10"

The sections are in /blocks/category/chart, single charts in /components/cat/chart and state icons in /icons. The accessibility checklist is in accessible React components, library weight in the bundle size of a UI library; the comparison between a ready chart and hand-written SVG is in copy-paste or headless.