Lollipop chart | the D3 Graph Gallery

Step by step

Building a lollipop chart follows almost the same process as for a barplot. It is by the way used exactly for the same kind of input dataset. The idea is to create a scalePoint() or a scaleBand() and add a set a circle and another of segments. Note that it often looks better horizontal, and that reordering is important.

Most basic

The most basic lollipop chart you can do in d3.js. Keeping only the core code.

Turn it horizontal

Lollipop plot often looks better horizontal: it makes label easier to be read. Find how to do it!

Order groups

Give more insight to your chart: reorder groups with just 3 more lines of code.

Cleveland dot plot

A variation of the lollipop where 2 data series are available for each group.

Animation

Interactivity is mainly going to be about buttons for lollipops. Here are a few examples. Note that the barplot section has many more interactive charts to offer, that can easily be converted to lollipops.

Basic animation at loading

Points start at x=0 and then take their real position.

Button to change input data

Select input data thanks to 2 buttons with smooth transition.