logoImejis.io

Lollipop chart

Chart styletype: "chart"

Generate lollipop chart images — a stem-and-dot take on bar charts, ideal for ranking many categories cleanly. Fresh data per API call. Try Imejis free.

Edit it — this is the actual editor panel
Design JSON — “Lollipop” variant
{
  "title": "Chart sample",
  "description": "A dynamic bar chart",
  "dimensions": {
    "width": 800,
    "height": 420
  },
  "background": {
    "color": "#ffffff"
  },
  "components": [
    {
      "id": "sample-chart",
      "key": "sales",
      "type": "chart",
      "position": {
        "x": 140,
        "y": 60
      },
      "rotation": 0,
      "size": {
        "width": 520,
        "height": 300
      },
      "dynamic": true,
      "properties": {
        "chartType": "lollipop",
        "data": [
          42,
          58,
          35,
          71,
          49,
          63
        ],
        "labels": [
          "Docs",
          "API",
          "Editor",
          "Templates",
          "Exports",
          "Fonts"
        ],
        "colors": [
          "#8B5CF6"
        ],
        "orientation": "vertical",
        "showAxis": true,
        "showGrid": true,
        "showValues": true,
        "valueFormat": "number",
        "opacity": 1
      }
    }
  ]
}

Chart examples

Real renders of the lollipop chart — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.

Feature adoption ranking

Percentage of users touching each feature, single accent color.

API overrides for this example
{
  "sales.chartType": "lollipop",
  "sales.data": [
    72,
    64,
    58,
    41,
    33
  ],
  "sales.labels": [
    "Editor",
    "Templates",
    "API",
    "Exports",
    "Fonts"
  ],
  "sales.colors": [
    "#4F46E5"
  ],
  "sales.showValues": true,
  "sales.valueFormat": "percent"
}

NPS by segment

Net promoter score per customer segment as a clean ranked dot plot.

API overrides for this example
{
  "sales.chartType": "lollipop",
  "sales.data": [
    48,
    61,
    39,
    55
  ],
  "sales.labels": [
    "Startup",
    "SMB",
    "Mid-market",
    "Enterprise"
  ],
  "sales.colors": [
    "#0EA5E9"
  ],
  "sales.showValues": true
}

When to use the lollipop style

  • Category rankings for editorial and social cards
  • Survey or poll result graphics
  • Feature-usage comparisons in reports

Use it dynamically via the API

Feed fresh numbers via '<key>.data' (or '<key>.series' for multi-series), and swap '<key>.labels' or '<key>.chartType' per render.

Full API request with this variant's current values — the playground above sends only the properties you change
curl --location 'https://render.imejis.io/v1/{{YOUR_DESIGN_ID}}' \
--header 'dma-api-key: {{YOUR_API_KEY}}' \
--header 'Content-Type: application/json' \
--data '{
    "sales.chartType": "lollipop",
    "sales.data": [
        42,
        58,
        35,
        71,
        49,
        63
    ],
    "sales.labels": [
        "Docs",
        "API",
        "Editor",
        "Templates",
        "Exports",
        "Fonts"
    ],
    "sales.colors": [
        "#8B5CF6"
    ],
    "sales.orientation": "vertical",
    "sales.showAxis": true,
    "sales.showGrid": true,
    "sales.showValues": true,
    "sales.valueFormat": "number",
    "sales.opacity": 1
}'

Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.

Other chart styles

DefaultLineAreaHorizontal barsStacked series100% stackedSparklineMulti-lineWaterfallLollipopStep lineSlopeCombo (dual-axis)

See the chart component page for the full property reference and FAQs.