Welcome to the barplot section of the d3 graph gallery. A barplot is used to display the relationship between a numerical and a categorical variable. This section also include stacked barplot and grouped barplot two levels of grouping are shown.

Step by step

Building barplots in d3.js relies on the addition of several rect, one per group in the categorical variable. The first example below should guide you in this procedure. Note that ordering groups is an important step when building barplots. This example explains how to do it.


Due to its simplicity, barplot is a very good chart to understand the basic concepts of interactivity. Below are many examples illustrating how to deal with transition, buttons, the enter() function and more.

Grouped and Stacked barplot

A barplot can also display values for several levels of grouping. Subgroups can be displayed one beside each other, giving a grouped barplot. If subgroups are displayed on top of each other, it is a stacked barplot.

Related chart types

Spider / Radar
Circular Barplot