If you have a table of numbers and an assignment or report due, the chart names can blur together. Each type of graph here comes with a small example table you can paste into a free maker, and we built every example chart from those exact tables in Chartjuice.

The numbers are made up to show the shape of the input, not taken from a real survey or class. Everything here is about data graphs for class and reports, from middle school through college statistics, not graphs of functions like y = 2x + 1.

Which type of graph should you use?

The different types of graphs fall into five groups, one for each question you can ask of a table of numbers. Find your question in the left column, then jump to the section that answers it.

Your question Graph to use Jump to
Which group is bigger or smaller? Bar graph, double bar graph, radar chart Graphs that compare groups
How did it change over time? Line graph Graphs that show change over time
What share of the total is each part? Pie chart, stacked bar, sankey diagram Graphs that show parts of a whole
How are the values spread out? Histogram, box and whisker plot, dot plot (line plot) Graphs that show how data is spread out
Do two variables move together? Scatter plot, bubble chart, heatmap Graphs that show relationships between variables

Sometimes two rows seem to fit, because the same list of values can be compared across groups or shown as a spread. Pick the one that matches what you want a reader to notice first.

Two mix-ups come up more than any others. If your data is a list of measurements, such as test scores, you probably need a histogram rather than a bar graph, and histogram vs bar graph explains why. If your data is measured over time, bar graph vs line graph helps you choose between the two.

Graphs that compare groups

A bar graph compares one value across separate groups. Each group gets its own bar, and the length of the bar shows the amount. Use it when your categories are labeled groups, such as grades, classes or survey answers, and you want a reader to see at a glance which one is larger.

For example, a survey asks students in four grades how many hours they spend on homework each week.

Grade Average homework hours per week
6th 4
7th 5
8th 7
9th 9
Bar graph of average weekly homework hours by grade: 4 in 6th, 5 in 7th, 7 in 8th and 9 in 9th Hours per week Grade 0 2 4 6 8 10 6th 7th 8th 9th chartjuice.com
Bar graph: average homework hours by grade.

The bars rise from left to right, so the pattern is clear before you read a single number. When the order of the groups doesn't matter, sort the bars from largest to smallest, and when it does, as with grades, keep the natural order. Build this chart with the bar graph maker, or use the column chart maker if you want the bars to stand upright.

Types of bar graphs

The types of bar graphs you meet in class all start from the same idea and differ in how they handle a group that splits into smaller categories.

A double bar graph (also called a grouped or clustered bar graph) puts two bars side by side for each group, so you can compare two series directly. Use it when you have exactly two things to compare within each group, such as the same test given in the fall and again in the spring.

Class Fall average Spring average
Period 1 72 78
Period 2 75 77
Period 3 68 80
Double bar graph of fall and spring test averages for three class periods, with Period 3 rising from 68 to 80 Average score Class 0 20 40 60 80 Period 1 Period 2 Period 3 Fall average Spring average chartjuice.com
Double bar graph: fall vs spring test averages.

You can read the gap between the two bars within each class and also see that Period 3 improved the most. Make one with the double bar graph maker.

A stacked bar graph stacks the categories on top of each other in a single bar. The full bar shows the total for the group, and each colored segment shows one category inside it, which makes it a good fit when the total matters as much as the split. Here's how students in each grade get to school.

Grade Bus Walk Car
6th 40 25 35
7th 45 20 30
8th 38 22 40
Stacked bar graph of how students in 6th, 7th and 8th grade get to school, split into bus, walk and car Students Grade 0 20 40 60 80 100 6th 7th 8th Bus Walk Car chartjuice.com
Stacked bar graph: how students get to school.

The bottom segment is easy to compare across bars because it starts at zero, while the segments higher up start at different heights and are harder to compare by eye. In our version, it's easy to see that 7th grade has the most bus riders, but much harder to tell whether 6th or 8th has more walkers. If one category is the main point, put it at the bottom or switch to a double bar graph. The stacked bar chart maker builds this layout from the same kind of table.

Radar chart

A radar chart (sometimes called a spider chart) compares a few items across several measures at once. Each measure gets its own axis, the axes spread out from a center point like spokes, and each item is drawn as a closed shape. A bigger shape means higher scores overall, and a lopsided shape shows where an item is strong or weak.

It works when every measure is on the same scale and you're comparing two or three items, because with more than that the shapes pile on top of each other. In this example, students rate two study methods from 1 to 10 on five measures, where a higher score is always better.

Measure Flashcards Practice tests
Ease of starting 9 5
Speed 8 4
Remembering facts 7 8
Solving problems 4 9
Confidence on test day 6 8
Radar chart comparing flashcards and practice tests on five measures rated 1 to 10 Ease of starting Speed Remembering facts Solving problems Confidence on test day Flashcards Practice tests chartjuice.com
Radar chart: two study methods rated 1 to 10, higher is better.

Flashcards stretch toward ease and speed, and practice tests stretch toward problem solving and confidence. Our first build labeled the second measure "Time needed," and the chart read backward, since a high score looked like a slow method, so we renamed it to Speed. Word every measure so that higher means better, or the shapes will mislead. If you only have one measure, a bar graph is the simpler choice. Build a radar chart with the radar chart maker.

Graphs that show change over time

A line graph shows how a value changes over time. Time runs along the bottom, the value runs up the side, and a line connects the points in order. The slope tells the story: a climb means growth, a drop means decline, and a flat stretch means little changed.

Use a line graph when the time steps are continuous and there are many of them, such as days, weeks or months. The line carries the eye from one point to the next, so the reader sees the trend as a whole. A bar graph treats each time period as its own separate group, which works for a few steps like three school years but gets crowded and hides the trend once you have a dozen or more. If you're unsure, bar graph vs line graph walks through the choice.

Here are a small online shop's sales for its first six months.

Month Sales ($)
January 1,200
February 1,350
March 1,500
April 1,450
May 1,800
June 2,100
Line graph of an online shop's sales from January to June, rising to xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" viewBox="0 0 800 450",500 in March, dipping in April and climbing to $2,100 in June Sales Month $0 $500 $1,000 $1,500 $2,000 $2,500 January February March April May June chartjuice.com
Line graph: online shop sales for the first six months.

The line rises through March, dips a little in April, then climbs steeply into June. You can see the small dip and the later jump in one look, which is harder to do with six separate bars.

You can plot two lines on one graph when they share the same units and the same time scale. Add a second column for last year's sales, or for a second product, and each series gets its own line and color, so the gap between the lines shows which one is ahead. Don't put series with different units, such as dollars and number of visitors, on one axis, because the larger numbers flatten the smaller series until it looks like it never changed. Build either version with the line graph maker.

Graphs that show parts of a whole

A pie chart shows how one total divides into parts. Each slice is a share of the whole, so the slices have to add up to 100%. It works best with a few categories, ideally five or fewer, where one or two are clearly larger than the rest, because with many thin slices a reader can't tell which one is bigger.

In this class survey, students say what they usually eat for lunch.

Lunch choice Share of students
School lunch 40%
Packed sandwich 25%
Salad or fruit 15%
Other 20%
Pie chart of what students usually eat for lunch: school lunch 40%, packed sandwich 25%, other 20% and salad or fruit 15% School lunch: 40% Packed sandwich: 25% Salad or fruit: 15% Other: 20% School lunch Packed sandwich Salad or fruit Other chartjuice.com
Pie chart: what students usually eat for lunch, with percent labels on.

The school lunch slice is clearly the largest, but the two smallest slices, at 15% and 20%, are close enough that a pie can't rank them well by shape alone. When we built it, we turned on percent labels on each slice, which settles the order for four slices but gets crowded quickly with more. If the exact order matters, a bar graph does that job better. Build a pie with the pie chart maker.

Stacked bar for comparing several wholes

A pie handles one whole. When you have several, such as one for each grade, a stacked bar is the better choice because each bar is one whole and you can compare the splits side by side. The how-students-get-to-school table in the bar graph section is this exact case, and three pies in a row would be much harder to compare. Make one with the stacked bar chart maker.

Sankey diagram

A sankey diagram shows how a total splits up and where each part goes. Bands run from left to right, and the width of each band shows the amount. Use it when the path matters as much as the share, such as a budget, or visitors moving from one page of a website to another. Here's a made-up monthly budget for a student.

From To Amount ($)
Income Rent 450
Income Food 250
Income Savings 150
Income Other 150
Sankey diagram of a student's xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" viewBox="0 0 800 450",000 monthly budget flowing to rent, food, savings and other Income: 1,000 Rent: 450 Food: 250 Savings: 150 Other: 150 chartjuice.com
Sankey diagram: a student's monthly budget.

Each row names where an amount starts, where it goes and how much it is. You don't need a row for the total: when we built this one, Chartjuice added the four rows up and labeled the Income bar with 1,000 on its own. The same three-column layout works for website traffic, with one row for visitors going from the home page to the blog, another for the home page to the pricing page, and so on. A band that thins out partway shows where people left.

A sankey with one source and a few targets, like this budget, could also be drawn as a pie. It earns its place when amounts pass through more than one step, such as income to spending categories to individual bills. Build one with the sankey diagram maker.

Graphs that show how data is spread out

The graphs in this group show where values cluster, how far they stretch, and whether anything sits far from the rest. They're the types of graphs in math that students start using in middle school statistics and keep using through college. All three below use the same 15 test scores from one class, so you can compare the pictures: 45, 65, 68, 70, 72, 72, 74, 75, 76, 78, 80, 82, 85, 88, 92.

Histogram

A histogram groups measurements into equal ranges called bins and shows how many values fall in each one. With bins 10 points wide, the counts are 1 score in the 40s, none in the 50s, 2 in the 60s, 7 in the 70s, 4 in the 80s and 1 in the 90s. The tall bar for the 70s shows where most students scored. Each bin includes its lower edge, so a score of exactly 70 counts in the 70 to 80 bar.

Histogram of 15 test scores in 10-point bins, with the tallest bar of 7 from 70 to 80 Students Test score 0 1 2 3 4 5 6 7 40–49 50–59 60–69 70–79 80–89 90–99 chartjuice.com
Histogram: the 15 test scores in 10-point bins.

The bars touch because the number line is continuous, and that's the main visual difference from a bar graph, which compares separate groups and leaves gaps. If your x-axis is a measurement, use a histogram, and if it's a list of labeled groups, use a bar graph. The bin width changes what the picture seems to say, so it's worth trying more than one. How to read a histogram covers bins and shapes in detail. Build one with the histogram maker.

Box and whisker plot

A box and whisker plot (box plot) boils the same data down to five numbers: the minimum, first quartile, median, third quartile and maximum. For these scores the median is 75, the first quartile is 70 and the third quartile is 82, so the box runs from 70 to 82. That 12-point width is the interquartile range (IQR), and it holds the middle half of the class.

Box plot of the same 15 test scores: box from 70 to 82, median 75, whiskers from 65 to 92 and an outlier at 45 Test score 40 50 60 70 80 90 100 Test score chartjuice.com
Box plot: the same 15 scores, with the quartile method set to Textbook.

The whiskers reach to the lowest and highest scores that aren't outliers. A common rule marks a value as an outlier when it falls more than 1.5 times the IQR beyond the box, which here is 18 points, so anything below 52 counts. The score of 45 falls below that cutoff and shows up as its own dot, and the lower whisker stops at 65 instead. With the quartile method set to Textbook, Chartjuice drew exactly these numbers from the 15 scores. Its other option, Excel, uses a slightly different method, so your quartiles can be off by a point or two from someone else's without either being wrong. Build one with the box plot maker.

Dot plot (line plot)

A dot plot, called a line plot in many US classrooms, puts one dot or X above a number line for every value. Two students scored 72, so that score gets a stack of two marks. Because you can see every individual score, the dot plot suits small sets of whole numbers, and the gap between 45 and 65 stands out right away. Even with 15 scores, our version shows the marks for 74, 75 and 76 nearly touching, and with hundreds of values they crowd together until a histogram reads better. Build one with the dot plot maker or the line plot maker.

Dot plot of the same 15 test scores, one X per score, with two marks stacked at 72 and a gap between 45 and 65 Test score 50 60 70 80 90 chartjuice.com
Dot plot (line plot): the same 15 scores.

Graphs that show relationships between variables

A scatter plot shows whether two variables move together. Each dot is one person, class or item, placed by its value on the x-axis and its value on the y-axis. Use it when both variables are numbers and you want to know whether one tends to change with the other. In this example, eight students report how many hours they studied for a test, next to their score.

Hours studied Test score
1 62
2 68
2 65
3 71
4 77
5 80
5 84
6 88
Scatter plot of hours studied against test score for eight students, with the dots climbing from lower left to upper right Test score Hours studied 50 60 70 80 90 1 2 3 4 5 6 chartjuice.com
Scatter plot: hours studied vs test score.

The dots climb from the lower left to the upper right, which is a positive correlation: as one variable rises, the other tends to rise too. Dots that slope down from the upper left to the lower right show a negative correlation, and a shapeless cloud means no correlation. Keep in mind that a pattern shows two things move together, not that one causes the other. Build one with the scatter plot maker, or use the x y graph maker if you want to join the points in order.

Bubble chart

A bubble chart is a scatter plot with a third value added as the size of each dot. The x and y positions work the same way, so you can show three numbers for each item in one picture. Here, four class periods are plotted by homework hours and test score, with bubble size showing class size.

Class Average homework hours Average test score Students
Period 1 4 72 28
Period 2 5 75 24
Period 3 7 80 30
Period 4 9 86 18
Bubble chart of four class periods by homework hours and test score, with bubble size showing class size Average test score Average homework hours 70 75 80 85 90 3 4 5 6 7 8 9 10 Period 1 Period 2 Period 3 Period 4 chartjuice.com
Bubble chart: bubble size is the number of students in the class.

A reader can see that the highest-scoring class is also the smallest. In our build, the bubbles were sized from the smallest class to the largest, so Period 4's 18 students showed up as a small dot beside Period 3's 30, which exaggerates the gap. Give the class sizes in a caption or label so readers don't judge them by area alone, and keep the number of bubbles small, since big bubbles overlap and hide each other. Make one with the bubble chart maker.

Heatmap

A heatmap shows patterns across two categories. Rows are one category, columns are another, and the color of each cell shows the value. Use it when a table has too many numbers to scan and you want the high and low spots to jump out, such as website visits by hour.

Hour Monday Tuesday Wednesday
9 am 120 135 110
12 pm 210 220 205
3 pm 150 140 160
6 pm 90 95 100
Heatmap of website visits by hour and day for Monday to Wednesday, darkest in the 12 pm row 9 am 12 pm 3 pm 6 pm Monday Tuesday Wednesday 120 135 110 210 220 205 150 140 160 90 95 100 90 220 chartjuice.com
Heatmap: website visits by hour and day.

The midday row comes out darkest, so the busy hour is obvious before you read a number. To build ours, we laid the same numbers out as one row per hour and day, in three columns named Hour, Day and Visits, so each row became one cell of the heatmap. A heatmap really pays off on a full week with every hour, where a plain table would be a wall of numbers. A class version works the same way, with students as rows, quizzes as columns and scores as the colors. Build one with the heatmap maker.

How do you make these graphs from your own data?

Every type of chart and graph above is made the same way on Chartjuice, and none of it needs an account.

  1. Open the maker linked in the section for your chart.
  2. Type over the sample in the table under the chart, click Paste data and paste a range from Excel or Google Sheets with the column names in the first row, or click Upload file and choose a CSV, TSV, XLSX, XLS or ODS file.
  3. Check Chart columns to make sure the right columns are charted, then open the Style tab to change the title, axis titles, legend and colors.
  4. Click Download and pick a PNG at 1x, 2x or 4x, or an SVG.

Files are read in your browser and never uploaded. One chart holds up to 5,000 rows and 50 columns, and the charts you make are free to use anywhere, including commercial work. If you'd rather describe the chart in plain English, the AI graph maker can set it up as a shortcut, and you can adjust anything by hand afterward.

To try it now, paste one of the example tables above into its maker, then swap in your own numbers. How it works covers the full workflow.