Pictogram Chart (Isotype Visualization) — Apache ECharts

A pictogram chart represents quantities using repeated icons or symbols, where each icon stands for a fixed number of units. Inspired by Otto Neurath's ISOTYPE system, this visualization makes numerical comparisons more intuitive and engaging than plain bar charts. It is especially effective for public-facing data communication and infographics where visual appeal and immediate comprehension are important.

Pictogram Chart (Isotype Visualization) rendered with Apache ECharts

Renders

JavaScript source (Apache ECharts)

// anyplot.ai
// pictogram-basic: Pictogram Chart (Isotype Visualization)
// Library: echarts 5.5.1 | JavaScript 22.22.3
// Quality: 90/100 | Created: 2026-06-03

//# anyplot-orientation: landscape

const t = window.ANYPLOT_TOKENS;

// Coffee production by country, 2022 (millions of 60 kg bags)
const ICON_UNIT  = 5;  // 1 icon = 5 million bags
const categories = ["Brazil", "Vietnam", "Colombia", "Indonesia", "Ethiopia", "Honduras"];
const production = [63, 29, 14, 12, 10, 8];
const iconCounts = production.map(v => v / ICON_UNIT);
const maxIcons   = 14;  // axis ceiling (above max 12.6)

// Scale title font for longer string
const titleText = "Coffee Production · pictogram-basic · javascript · echarts · anyplot.ai";
const titleSize = Math.max(14, Math.round(22 * 67 / titleText.length));

const chart = echarts.init(document.getElementById("container"));

chart.setOption({
  animation: false,
  color: t.palette,
  backgroundColor: "transparent",

  title: {
    text: titleText,
    subtext: "○  Each icon = 5 million 60 kg bags",
    left: "center",
    top: 20,
    textStyle: {
      color: t.ink,
      fontSize: titleSize,
      fontWeight: "bold",
    },
    subtextStyle: {
      color: t.inkSoft,
      fontSize: 16,
    },
    itemGap: 8,
  },

  grid: {
    left: 130,
    right: 160,
    top: 130,
    bottom: 90,
  },

  xAxis: {
    type: "value",
    max: maxIcons,
    interval: 2,
    axisLabel: {
      color: t.inkSoft,
      fontSize: 14,
      formatter: v => v > 0 ? (v * ICON_UNIT) + "M" : "0",
    },
    axisLine: { lineStyle: { color: t.inkSoft } },
    axisTick: { show: false },
    splitLine: { show: false },
    name: "Production (millions of 60 kg bags)",
    nameLocation: "middle",
    nameGap: 55,
    nameTextStyle: { color: t.inkSoft, fontSize: 14 },
  },

  yAxis: {
    type: "category",
    data: categories,
    inverse: true,
    axisLabel: {
      color: t.inkSoft,
      fontSize: 16,
      margin: 12,
    },
    axisLine: { lineStyle: { color: t.inkSoft } },
    axisTick: { show: false },
    splitLine: { show: false },
  },

  series: [
    {
      type: "pictorialBar",
      symbol: "circle",
      symbolSize: [80, 80],
      symbolMargin: "10%",
      symbolRepeat: true,
      symbolBoundingData: maxIcons,
      emphasis: { disabled: true },
      label: {
        show: true,
        position: "right",
        color: t.inkSoft,
        fontSize: 14,
        formatter: params => production[params.dataIndex] + "M bags",
      },
      data: iconCounts.map((val, i) => ({
        value: val,
        itemStyle: { color: t.palette[i % 8] },
      })),
    },
  ],
});

Retrieve this implementation

Runnable source as JSON, for any HTTP client: https://api.anyplot.ai/specs/pictogram-basic/echarts/code. Any spec id and library id listed in llms-full.txt fit the same URL shape; every URL below is complete and callable.

{
  "spec_id": "pictogram-basic",
  "language": "javascript",
  "library": "echarts",
  "page": "https://anyplot.ai/pictogram-basic/javascript/echarts",
  "hub": "https://anyplot.ai/pictogram-basic",
  "code_json": "https://api.anyplot.ai/specs/pictogram-basic/echarts/code",
  "spec_json": "https://api.anyplot.ai/specs/pictogram-basic",
  "render_light_png": "https://storage.googleapis.com/anyplot-images/plots/pictogram-basic/javascript/echarts/plot-light.png",
  "render_dark_png": "https://storage.googleapis.com/anyplot-images/plots/pictogram-basic/javascript/echarts/plot-dark.png",
  "interactive_light_html": "https://storage.googleapis.com/anyplot-images/plots/pictogram-basic/javascript/echarts/plot-light.html",
  "interactive_dark_html": "https://storage.googleapis.com/anyplot-images/plots/pictogram-basic/javascript/echarts/plot-dark.html",
  "quality_score": 90.0,
  "license": "MIT",
  "guide": "https://anyplot.ai/llms.txt"
}

Part of Pictogram Chart (Isotype Visualization) on anyplot.ai.

Other implementations