Basic Count Plot in Highcharts (JavaScript)

The same plot in 14 other libraries — JavaScript: Chart.js, D3.js, Apache ECharts, MUI X Charts; Python: Altair, Bokeh, lets-plot, Matplotlib, Plotly, plotnine, Pygal, Seaborn; R: ggplot2; Julia: Makie.jl. Compare all 15 side by side: Basic Count Plot in Python, R, Julia and JavaScript.

A count plot displays the frequency of observations in each category of a categorical variable using vertical bars. Unlike a basic bar chart that requires pre-computed values, a count plot automatically counts occurrences from raw data. This makes it ideal for quick exploratory analysis of categorical distributions without manual aggregation.

Basic Count Plot rendered with Highcharts

Renders

JavaScript source (Highcharts)

// anyplot.ai
// count-basic: Basic Count Plot
// Library: highcharts 12.6.0 | JavaScript 22.23.1
// Quality: 94/100 | Created: 2026-08-11

//# anyplot-orientation: landscape
const t = window.ANYPLOT_TOKENS;

// --- Data (in-memory, deterministic) ---------------------------------------
// Raw per-checkout genre observations from a library lending log; the count
// plot tallies occurrences from these raw records rather than pre-aggregated
// values.
function lcg(seed) {
  let state = seed;
  return () => {
    state = (state * 1664525 + 1013904223) % 4294967296;
    return state / 4294967296;
  };
}
const random = lcg(42);

const genres = [
  "Fiction",
  "Fantasy",
  "Mystery",
  "Sci-Fi",
  "Biography",
  "Romance",
  "History",
  "Poetry",
];
const weights = [0.22, 0.18, 0.15, 0.13, 0.1, 0.09, 0.07, 0.06];
const cumulative = weights.reduce((acc, w, i) => {
  acc.push((acc[i - 1] || 0) + w);
  return acc;
}, []);

const checkouts = [];
for (let i = 0; i < 1200; i++) {
  const r = random();
  checkouts.push(genres[cumulative.findIndex((c) => r <= c)]);
}

const counts = {};
genres.forEach((genre) => (counts[genre] = 0));
checkouts.forEach((genre) => (counts[genre] += 1));

const sorted = genres
  .map((genre) => ({ genre, count: counts[genre] }))
  .sort((a, b) => b.count - a.count);

const categories = sorted.map((d) => d.genre);
const values = sorted.map((d) => d.count);
const total = values.reduce((sum, v) => sum + v, 0);
const mean = total / values.length;
const leader = sorted[0];
const trailer = sorted[sorted.length - 1];
const leadRatio = (leader.count / trailer.count).toFixed(1);

// --- Chart -----------------------------------------------------------------
Highcharts.chart("container", {
  chart: {
    type: "column",
    backgroundColor: "transparent",
    animation: false,
    spacingRight: 25,
    style: { fontFamily: "inherit" },
  },
  credits: { enabled: false },
  colors: t.palette,
  title: {
    text: "count-basic · javascript · highcharts · anyplot.ai",
    style: { color: t.ink, fontSize: "22px", fontWeight: "600" },
  },
  subtitle: {
    text: `${leader.genre} leads with ${leader.count} checkouts — ${leadRatio}× ${trailer.genre}'s ${trailer.count}`,
    style: { color: t.inkSoft, fontSize: "14px" },
  },
  xAxis: {
    categories,
    lineColor: t.inkSoft,
    tickColor: t.inkSoft,
    labels: { style: { color: t.inkSoft, fontSize: "14px" } },
  },
  yAxis: {
    title: { text: "Checkouts", style: { color: t.inkSoft, fontSize: "16px" } },
    gridLineColor: t.grid,
    labels: { style: { color: t.inkSoft, fontSize: "14px" } },
    plotLines: [
      {
        value: mean,
        color: t.inkSoft,
        dashStyle: "ShortDash",
        width: 1.5,
        zIndex: 5,
        label: {
          text: `Mean: ${mean.toFixed(0)}`,
          align: "right",
          x: -10,
          style: { color: t.inkSoft, fontSize: "12px" },
        },
      },
    ],
  },
  legend: { enabled: false },
  plotOptions: {
    series: { animation: false },
    column: {
      borderWidth: 0,
      borderRadius: 4,
      colorByPoint: true,
      dataLabels: {
        enabled: true,
        crop: false,
        overflow: "allow",
        color: t.ink,
        style: { fontSize: "14px", fontWeight: "500", textOutline: "none" },
        formatter: function () {
          return `${this.y} (${((this.y / total) * 100).toFixed(0)}%)`;
        },
      },
    },
  },
  series: [{ name: "Checkouts", data: values }],
});

Retrieve this implementation

Runnable source as JSON, for any HTTP client: https://api.anyplot.ai/specs/count-basic/highcharts/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": "count-basic",
  "language": "javascript",
  "library": "highcharts",
  "page": "https://anyplot.ai/count-basic/javascript/highcharts",
  "hub": "https://anyplot.ai/count-basic",
  "code_json": "https://api.anyplot.ai/specs/count-basic/highcharts/code",
  "spec_json": "https://api.anyplot.ai/specs/count-basic",
  "render_light_png": "https://storage.googleapis.com/anyplot-images/plots/count-basic/javascript/highcharts/plot-light.png",
  "render_dark_png": "https://storage.googleapis.com/anyplot-images/plots/count-basic/javascript/highcharts/plot-dark.png",
  "interactive_light_html": "https://storage.googleapis.com/anyplot-images/plots/count-basic/javascript/highcharts/plot-light.html",
  "interactive_dark_html": "https://storage.googleapis.com/anyplot-images/plots/count-basic/javascript/highcharts/plot-dark.html",
  "quality_score": 94.0,
  "license": "MIT",
  "guide": "https://anyplot.ai/llms.txt"
}

Part of Basic Count Plot on anyplot.ai.

Other implementations