Sweetening Your Data: A Tutorial on Building Lollipop Charts Using CanvasJS

2 min readJan 12, 2024

A lollipop chart is a type of data visualization that combines the features of both column charts and scatter plots. It is used to display and compare categorical data, typically for a small number of data points. The chart consists of vertical lines (resembling lollipop sticks) representing the data values and markers at the end of these lines to indicate specific data points.

Creating a lollipop chart using CanvasJS involves combining column and scatter charts to achieve a visually appealing representation of data. CanvasJS is a powerful JavaScript charting library that provides extensive customization options for creating interactive and dynamic charts.

Getting Started with CanvasJS

Before we dive into creating a lollipop chart, ensure that you have the CanvasJS library included in your project. You can download the library from the official website and include it in your HTML file or directly load it from CDN.

<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>

Create a container element in your HTML to hold the chart.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lollipop Chart with CanvasJS</title>
    <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</head>
<body>
    <div id="lollipopChartContainer" style="height: 400px; width: 100%;"></div>

</body>
</html>

Now, let’s create a lollipop chart. Add 2 dataseries, column and scatter, with same set of datapoints.

// Sample data for the chart
var dataPoints = [
    { x: 1, y: 10 },
    { x: 2, y: 20 },
    { x: 3, y: 15 },
    { x: 4, y: 25 },
    { x: 5, y: 18 }
];

// Create a new CanvasJS chart
var chart = new CanvasJS.Chart("lollipopChartContainer", {
    theme: "light2",
    dataPointWidth: 8, // Reduce the datapoint width for lollipop sticks
    title: {
        text: "Lollipop Chart"
    },
    data: [{
        type: "column", // Column chart for lollipop sticks
        dataPoints: dataPoints,
        color: "lightblue"
    }, {
        type: "scatter", // Scatter chart for lollipop heads
        color: "lightblue"
        markerSize: 30, // Customize marker size for lollipop heads
        dataPoints: dataPoints
    }]
});

// Render the chart
chart.render();

Creating a lollipop chart using CanvasJS involves combining the features of column and scatter charts, along with customization of data point width and marker size. This approach allows you to visually represent your data in a unique and engaging way. Lollipop charts are particularly effective when dealing with a small number of categories or when you want to emphasize individual data points within a dataset.

Sweetening Your Data: A Tutorial on Building Lollipop Charts Using CanvasJS

Getting Started with CanvasJS

Written by Vishwas R