A lollipop plot is basically a bar plot, but with
line and a
dot instead of a bar. It shows the relationship between a category and a value. On the Y axis, the value is represented by the
center of a dot - not by the top/bottom edge (or right/left for inverted chart) what is commonly mistaken.
Using the Lollipop series is useful when you have several bars of the same height, especially when the values are ~90% of range - it avoids the Moiré effect and the chart is not such visually aggressive.
Lollipop series requires loading the Highcharts and all
Here is an example for loading lollipop modules into a webpage:
<script src="https://code.highcharts.com/highcharts.js"></script><script src="https://code.highcharts.com/highcharts-more.js"></script><script src="https://code.highcharts.com/modules/dumbbell.js"></script><script src="https://code.highcharts.com/modules/lollipop.js"></script>
The demo below represents a simple lollipop plot
To display a vertical lollipops, set
The dot can be customized as every other marker in Highcharts, among the others:
series.marker.fillColor- color for the dot.
series.marker.radius- size of the dot.
The connector line can be customized by:
series.connectorColor- color for the connector line.
series.connectorWidth- width of the connector line.