Figma Bar Chart

Preview

Figma Bar Chart

Bar charts are rectangular, vertical, or horizontal bar-shaped charts that commonly visualize comparisons between things. They can be used to compare data across different categories and show trends over time.

Bar Charts UI Best Practices

Combine bar charts with Line or Pie Charts to clearly show multiple data dimensions. Bar charts excel at comparing values, while line charts reveal trends, and pie charts display proportions. This combination can create a more insightful visualization of your data.

Sort bars logically - either by natural order or by size to indicate importance;
Always sort bar chart data (ascending/descending) unless time-based;
Use label properties clearly above or inside bars.

The bar chart set draws vertical and horizontal bars for category comparison, with label properties for values above or inside the bars and sorted, time-based or grouped series.

Bar Chart AI Prompt

Paste this into Claude, ChatGPT, or Figma Make:

Build a bar chart component in Figma with vertical and horizontal orientations. Vertical: a plot area with a light horizontal gridline every 20 percent, a Y axis with five value labels, an X axis with category labels, and a row of rounded-top bars drawn as individual components so each can be resized by height. Horizontal: the same with bars growing from the left and category labels down the Y axis. Add variants for a single series, a grouped series with two colours side by side, and a stacked series with segments in one bar. Give each bar a Default and Hover state where hover darkens the fill and shows a tooltip with the exact value. Add a Labels property that places values above the bars, inside the bars, or hides them, and a legend row with coloured dots and series names. Build a responsive container with Small, Medium and Large sizes so the chart drops into dashboard cards, and keep bar colours on chart variables shared with the line and pie charts.

Source