Figma line & bar chart components

Figma has no chart tool. Every graph you've ever seen in a Figma file was either drawn by hand, generated by a plugin, or assembled from components, and the choice between those three quietly decides how maintainable your dashboards are six months from now.

The 9 chart components and 116 variants above take the component route, and here's why that's usually the right call.

Plugins make data, components make systems

Chart plugins are great at one thing: turning a real CSV into an accurate one-off graph. What they can't do is match your design system, restyle when your brand changes, or stay consistent across forty dashboard screens designed by three people.

Component charts flip the tradeoff: the data is illustrative rather than precise, but every chart in the file shares the same styles, spacing, and behavior, which is what product design work actually needs. When a stakeholder needs the real numbers plotted, that's a job for the actual product, not the mockup.

The honest division of labor: components for design work, plugins for the occasional accurate one-off, and never hand-drawn vectors that nobody can edit later.

Line or bar?

The oldest rule in data viz still decides it: lines for trends over time, bars for comparisons between categories. Nielsen Norman Group's chart-type guidance covers the reasoning. Both styles live in one component here, so switching is a property flip.

The line charts come with 12 swappable data curves in gradual, wavy, and volatile personalities, plus dedicated bar data sets, so your revenue chart can look plausibly like revenue instead of a perfect sine wave that screams "placeholder".

The x-axis component switches between 7 day, 30 day, and 12 month ranges to match, and the y-axis labels toggle independently, so the same chart works as a detailed report figure or a stripped-back trend line.

Anatomy you can toggle

Legends (top, right, or none), axis labels (on or off), and chart markers in line, minimal, and dash styles are all component properties, and each chart has a desktop version sized for dashboard cards and a compact mobile version.

That toggle-based anatomy is what makes the charts fit anywhere: strip the axes and legend for a sparkline-ish card in a metrics row, or run the full treatment in a dashboard's main chart. The pie charts, radar charts, and activity gauges round out the family for the data shapes lines and bars don't cover.

Accessible data viz

Two WCAG rules do most of the work in chart design. Use of color: never let hue alone separate two series, so label lines directly or vary the markers, which is one reason the marker styles exist.

And non-text contrast: strokes and bars need 3:1 contrast against their background, which gets genuinely hard in dark mode where thin bright lines start to vibrate. Both the light and dark versions of these charts are tuned with that in mind, so the dark dashboards don't quietly fail the contrast checks the light ones pass.

When it's time to build, the same charts exist in code. Untitled UI React charts are open source, built with Tailwind CSS, matching these components so the dashboard your team ships looks like the one you designed.