Skip to main content
Frontend Glossary

UI components · Data display

Chart

Also called: Data visualization, Graph, Line chart, Bar chart, Pie chart

Turns numbers into lines, bars, slices, and other shapes to show trends, comparisons, and proportions, so the data makes sense at a glance.

Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.

How to tell AI

Swap in your own content first

Use ECharts to draw a line chart of visits over the last 30 days. Make it fit the container's width and 300px tall, with dates on the x-axis and visits on the y-axis. On hover, show a tooltip with that day's number. Add a "Daily / Weekly" switch in the top-right corner. While data is loading, show a skeleton, and when there's no data, show empty-state text.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Chart is what you need.

Use Chart when

  • You need to show how data changes over a period of time
  • You need to compare amounts or proportions across a few categories
  • A dashboard needs to boil lots of numbers down into takeaways people get at a glance

Pick something else when

  • Users need to check exact values one by one

    Use insteadTable

  • Only one or two numbers need to stand out; statistic cards are enough

    Use insteadStatistic

  • There are more than a dozen categories, so a pie chart's slices get too thin to tell apart

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    Picking the wrong chart type to look nice, like using a pie chart to show a trend over time

    The wireframe below shows this case. The red dashed box marks the problem.

  2. 02

    No axis labels, units, or legend, so you can't tell what each line means

  3. 03

    The container has no height or doesn't resize with the window, so the chart shows up blank or cut off

Anti-pattern, matches item 01

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A plot area (lines, bars, or slices), axes and tick marks, a legend, a title, and a data tooltip on hover.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

Chart is a big family, and the most common types each have a job. A line chart shows change over time. A bar chart compares the sizes of a few categories. A pie or donut chart shows how parts make up the whole, and works best with no more than five or six categories. A scatter plot shows the relationship between two numbers. A complete chart usually has a title, axes with tick marks, a legend, and a tooltip with the data that pops up on hover.

Frontend code usually doesn't draw charts by hand. It uses a chart library: ECharts, Recharts, Chart.js, and AntV G2 are all common, and the shadcn/ui Chart component is built on Recharts. How it splits the work with a Statistic: a statistic gives "what it is right now," while a chart shows "how it changes and how it's spread out." How it splits the work with a Table: use a table to see exact numbers and check row by row, and a chart to see the overall pattern.

Developer info
Term ID
component-chart
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • [_echarts_instance_]
  • .recharts-wrapper
  • [data-slot="chart"]
  • .highcharts-container
  • .apexcharts-canvas
  • canvas[role="img"]
Priority
1 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026