React chart example
Lollipop chart
Compare categories with dots on a shared scale and stems that show their distance from a baseline.
What is a lollipop chart?
A lollipop chart places a dot at each category’s value and connects it to a shared baseline with a thin stem. The position of the dot carries the comparison, while the stem makes magnitude easy to trace without filling a solid bar.
When to use it
Use a lollipop chart for a compact set of category totals, rankings or scores in a dashboard. It works well when you want more whitespace than a column chart. Choose horizontal bars when category names are long, or a line chart when the connection between consecutive observations matters.
Design tips
Start the value scale at zero when stem length represents magnitude.
Sort categories by value when rank is the story; preserve a meaningful order when categories have one.
Keep dots distinct and use tooltips for exact values. Too many stems make comparison harder.
Build this chart in React
Build this chart
This example uses a custom Graphy geom plugin with a React renderer. Register the plugin with createGraphyKit to use its typed builder and provider together. This example uses a fixed theme.
Compare with
Use when filled bars should make magnitude easier to judge.
Compare ranked values with long category labels on a shared baseline.
Graphy Chart SDK
Add Graphy’s lollipop charts to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.