Chart Types & Data Visualization Reference

Choosing the right chart is the first step of data visualization. This page lists the most common chart types, when to use them and when to avoid them, so your data tells a clear story.

How It Works

A chart is not decoration — it translates a data relationship into a shape the eye grasps quickly. Before drawing, ask: am I showing a trend, a proportion, a distribution, or a comparison? Is the data one- or multi-dimensional? Does the audience need precise values or a gestalt?

Line charts suit time series, bar/column charts suit category comparison, pie charts only suit a few mutually-exclusive shares, scatter/bubble charts reveal correlation, and heatmaps show density. The wrong chart (e.g. a pie with 20 slices) misleads readers, sometimes to the opposite conclusion.

When to Use This Table

This table is for choosing a chart type for a set of data. It gives trade-offs through two columns, best-for and avoid-when, covering bar, line, pie, scatter, heatmap, boxplot and other common types. Choose by first looking at the shape of the data and the question you want the reader to answer.

When not to consult it: you are doing visual design such as colours, font sizes, legend placement and axis ranges, or interaction design such as zoom and tooltips. This table answers which type of chart, not how to make it look good.

Rule of thumb: start from the question the reader must answer. Comparing quantities across categories calls for a bar chart; change over time calls for a line; part-to-whole within a single dimension calls for a pie or a stacked bar; correlation between two variables calls for a scatter. This rule matters more than any styling guideline.

Mind the limits of pie charts: they work only for proportions within one dimension, and usually with no more than five slices. Comparing proportions across several dimensions, or having more than five categories, breaks them — switch to a stacked or grouped bar.

Boundaries and Common Pitfalls

Overusing pie charts is the most common visualisation mistake
Human comparison of angles and areas is far weaker than comparison of length, since position encoding is the strongest, so comparing two similar slices in a pie is unreliable. The rule: use a pie only with five or fewer categories within a single dimension; use a 100% stacked bar for multi-level proportions of one dimension; switch to a bar whenever precise numeric comparison matters. A useful heuristic: if the reader may ask how much larger A is than B, use a bar chart.
A line chart x-axis is not always time, and smoothing invents data
A line chart only requires an ordered continuous x-axis, and time is merely the most common one; plotting discrete ordinal values as a line invents a continuity that does not exist. More importantly, interpolation: spline smoothing creates undulation between data points that is not in the data, and readers will believe the interval really fluctuated. Use straight segments by default and consider smoothing only when the axis is genuinely continuous and sampling is dense.
Dual-axis charts create false impressions of correlation
When two series of different magnitude are drawn on left and right y axes, simply rescaling the two ranges makes the curves appear to move together, cross or diverge — and that is entirely determined by the axis ranges, not the data. Such charts are often used to imply causation or correlation that does not exist. Better alternatives: normalise both series to a common scale and draw two lines, or use a scatter plot with x as the predictor and y as the response, which expresses the real relationship naturally.

How This Relates to Neighbours

To actually produce a chart, use the in-site chart generator tools; this page only covers selection.

Responsive sizing, theme adaptation and lazy loading are implementation concerns, out of scope here.

Assessing whether a colour palette meets accessibility contrast requirements needs a dedicated method, not this table.

If the goal is choosing a chart for a real scenario, start from the question the reader must answer; the rule of thumb here is a starting point.

Practical Snippet

Key points: (1) choose from the question the reader must answer, not from the shape of the data; (2) a pie is only valid for one dimension with five or fewer categories — use a bar whenever precise comparison matters; (3) a dual-axis chart visual relationship is determined entirely by the two axis ranges, so it can manufacture false correlation — normalise both series or use a scatter; (4) connect line chart points with straight segments by default, since smoothing invents undulation that is not in the data; (5) a line x-axis only needs to be ordered and continuous — plotting discrete ordinals as a line implies continuity that does not exist.

// ① 按「读者要回答什么问题」选型
function pickChart(question, data) {
  if (/多少|大小|比较|compare|how many/.test(question)) {
    return data.length <= 5 ? 'bar' : 'line'   // 多序列看趋势用线
  }
  if (/趋势|随时间|变化|trend|over time/.test(question)) return 'line'
  if (/占比|构成|比例|share|proportion/.test(question)) {
    return isSingleDimension(data) && categories(data).length <= 5
      ? 'pie'        // ✅ 单维度 + ≤5 类
      : 'stackedBar'  // 否则用 100% 堆叠柱
  }
  if (/相关|关系|correlat|relationship/.test(question)) return 'scatter'
  if (/分布|离群|distribution|outlier/.test(question)) return 'boxplot'
  return 'bar'  // 兜底：柱状图是最不容易出错的选择
}

// ② 饼图的两个前提（不满足就别用）
function pieIsSafe(cats, dims) {
  return dims === 1 && cats.length <= 5
}

// ③ 双轴图的反面：改用归一化或散点
// ❌ 两条线各自一个 y 轴，缩放范围决定视觉关系
// ✅ 方案 A：归一化到同一尺度
const norm = series.map(s => s.map(v => (v - min) / (max - min)))
// ✅ 方案 B：散点图（x 自变量、y 因变量），关系由数据本身决定
scatter(data.map(d => ({ x: d.a, y: d.b })))

// ④ 折线图：默认直线段，不用 spline
// ❌ smooth: true   —— 插值会造出数据里没有的起伏
// ✅ 默认折线 + 数据点标记
line(points, { smooth: false, showPoints: true })

// ⑤ 分类 > 5 时饼图失效
const cats = ['A', 'B', 'C', 'D', 'E', 'F', 'G']
console.log(pieIsSafe(cats, 1))     // false ⇒ 改用 stackedBar

Practical Notes

A pie chart stops being readable past six slicesHuman vision compares lengths far better than angles, so once slices multiply the chart cannot be read. Beyond six categories switch to a sorted horizontal bar chart or fold the tail into "Other" — this is about reading the data correctly, not aesthetics.
Does the x-axis spacing reflect real time intervals?When the axis holds categories rather than continuous time, equal spacing implies equal gaps. Uneven real intervals must use a time axis or a bar chart, otherwise the apparent slope is fabricated.
Dual-axis charts manufacture spurious correlationPlotting two different quantities on left and right axes lets you make them look synchronized simply by adjusting the ranges. If it is unavoidable, lock the scales and label them, or use two stacked panels sharing one x-axis.

Data Sources

General data-visualisation practice (no single external specification)

Codes, names and definitions above come from public specifications; we claim no originality over the specification data itself. The arrangement, Chinese annotations and practical notes on this page are written by us.

Chart Type	Best For	Avoid When
Line Chart	Time series, trends, continuous data (stock price, traffic, temperature)	Unordered categories or single-point comparisons only
Bar Chart	Comparing values across distinct categories (sales by region, population by country)	Too many categories or showing part-to-whole ratios
Horizontal Bar Chart	Long category labels that read better horizontally	Time series or emphasizing trends
Pie Chart	Showing part-to-whole ratios with 5–7 categories or fewer	Many categories or similarly-sized slices
Donut Chart	Same as pie chart; center can show total or key metric	Precise comparison of segment sizes
Scatter Plot	Showing correlation between two continuous variables	Few data points or non-continuous variables
Area Chart	Emphasizing cumulative volume or magnitude over time	Overlapping series or precise reading

Frequently Asked Questions

Should I use a bar chart or a line chart?

Look at the horizontal axis: if it is time or a continuous variable, use a line chart to emphasize trends. If it is discrete categories, use a bar chart to emphasize comparison. Never connect unordered categories with a line, because it implies a continuous change that does not exist.

Why should pie charts be used sparingly?

Human eyes are much worse at comparing angles and areas than lengths. When there are more than 5–7 slices or slices are similar in size, pie charts make it hard to judge proportions accurately. Use bar charts or tables instead.

What is the most important principle of data visualization?

Accuracy beats decoration: pick the chart type that most faithfully represents the data, remove unnecessary ornamentation (3D, shadows, gradients), and start the vertical axis at zero for bar charts to avoid visual distortion.

Can a line chart show many series?

Yes, but limit simultaneously visible series to 3–5. Too many crossing lines become unreadable. Split into small multiples or add interactive highlighting when needed.