Colorful Lollipop Chart for Data Visualization

Lollipop charts are a captivating way to display data, particularly when comparing values across different categories. Their simple design, featuring circular markers (lollipops) on stems extending from a baseline, makes them highly accessible and easy to interpret. Ideal for showcasing single values for various items, they offer a clear visual representation of magnitudes and facilitate quick comparisons. These charts are incredibly versatile. They can highlight key performance indicators (KPIs), sales figures, survey results, or any dataset where distinct categories are associated with individual numerical values. The visual appeal of lollipop charts ensures your data is not just understood but also remembered. Their effectiveness lies in their clarity and efficiency in conveying information.

Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa

<html>

  <head>
    <!-- Include the CanvasXpress library in your HTML file -->
    <link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
    <script src="https://www.canvasxpress.org/dist/canvasXpress.min.js"></script>
  </head>

  <body>

    <!-- Create a canvas element for the chart with the desired dimensions -->
    <div>
      <canvas id="canvasId" width="600" height="600"></canvas>
    </div>


    <!-- Create a script to initialize the chart -->
    <script>

      // Use a data frame (2D-array) for the graph
      var data = [
        [ "Id", "Var1", "Color"],
        [ "Engineering", -40, "A"],
        [ "Biology", -85, "B"],
        [ "Computer", -60, "C"],
        [ "Psycology", 50, "D"],
        [ "Education", 75, "E"],
        [ "Health", 100, "F" ]
      ];

      // Create the configuration for the graph
      var config = {
         "barLollipopOpen" : true,
         "barType" : "lollipopBullet",
         "colorBy" : "Color",
         "colorScheme" : "GGPlot",
         "dataPointSizeScaleFactor" : 7,
         "graphType" : "Bar",
         "marginBottom" : 50,
         "marginLeft" : 50,
         "marginRight" : 50,
         "marginTop" : 50,
         "maxTextSize" : 80,
         "rangeColors" : ["rgb(200,200,200)"],
         "setMaxX" : 150,
         "setMinX" : -150,
         "showDataValues" : true,
         "showLegend" : false,
         "title" : "Occupations",
         "xAxis2Show" : false,
         "xAxisGridMajorShow" : false,
         "xAxisGridMinorShow" : false,
         "xAxisShow" : false,
         "xAxis" : ["Var1"]
      }

      // Event used to create graph (optional)
      var events = false


      // Call the CanvasXpress function to create the graph
      var cX = new CanvasXpress("canvasId", data, config, events);

      
    </script>

  </body>

</html>

<html>

  <head>
    <!-- Include the CanvasXpress library in your HTML file -->
    <link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
    <script src="https://www.canvasxpress.org/dist/canvasXpress.min.js"></script>
  </head>

  <body>

    <!-- Create a canvas element for the chart with the desired dimensions -->
    <div>
      <canvas id="canvasId" width="600" height="600"></canvas>
    </div>


    <!-- Create a script to initialize the chart -->
    <script>

      // Create the data for the graph
      var data = {
         "x" : {
            "Color" : ["A","B","C","D","E","F"]
         },
         "y" : {
            "data" : [
              [-40,-85,-60,50,75,100]
            ],
            "smps" : ["Engineering","Biology","Computer","Psycology","Education","Health"],
            "vars" : ["Var1"]
         }
      }

      // Create the configuration for the graph
      var config = {
         "barLollipopOpen" : true,
         "barType" : "lollipopBullet",
         "colorBy" : "Color",
         "colorScheme" : "GGPlot",
         "dataPointSizeScaleFactor" : 7,
         "graphType" : "Bar",
         "marginBottom" : 50,
         "marginLeft" : 50,
         "marginRight" : 50,
         "marginTop" : 50,
         "maxTextSize" : 80,
         "rangeColors" : ["rgb(200,200,200)"],
         "setMaxX" : 150,
         "setMinX" : -150,
         "showDataValues" : true,
         "showLegend" : false,
         "title" : "Occupations",
         "xAxis2Show" : false,
         "xAxisGridMajorShow" : false,
         "xAxisGridMinorShow" : false,
         "xAxisShow" : false,
         "xAxis" : ["Var1"]
      }

      // Event used to create graph (optional)
      var events = false


      // Call the CanvasXpress function to create the graph
      var cX = new CanvasXpress("canvasId", data, config, events);

      
    </script>

  </body>

</html>

library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/r/cX-lollipop2-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
x=read.table("https://www.canvasxpress.org/data/r/cX-lollipop2-smp.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  smpAnnot=x,
  barLollipopOpen=TRUE,
  barType="lollipopBullet",
  colorBy="Color",
  colorScheme="GGPlot",
  dataPointSizeScaleFactor=7,
  graphType="Bar",
  marginBottom=50,
  marginLeft=50,
  marginRight=50,
  marginTop=50,
  maxTextSize=80,
  rangeColors=list("rgb(200,200,200)"),
  setMaxX=150,
  setMinX=-150,
  showDataValues=TRUE,
  showLegend=FALSE,
  title="Occupations",
  xAxis=list("Var1"),
  xAxis2Show=FALSE,
  xAxisGridMajorShow=FALSE,
  xAxisGridMinorShow=FALSE,
  xAxisShow=FALSE
)