Elbow Curve for K-Means Clustering — Highcharts

An elbow curve visualizes the relationship between the number of clusters (k) and within-cluster sum of squares (inertia/distortion) in K-means clustering. The plot helps identify the optimal number of clusters by finding the "elbow point" where adding more clusters yields diminishing returns in reducing inertia. This is a fundamental diagnostic tool for unsupervised learning parameter selection.

Elbow Curve for K-Means Clustering rendered with Highcharts

Renders

JavaScript source (Highcharts)

// anyplot.ai
// elbow-curve: Elbow Curve for K-Means Clustering
// Library: highcharts 12.6.0 | JavaScript 22.23.2
// Quality: 95/100 | Created: 2026-09-05

const t = window.ANYPLOT_TOKENS;

// --- Data (in-memory, deterministic) ----------------------------------------
// Customer segmentation: K-means clustering on annual spend + visit frequency,
// inertia (within-cluster sum of squares) across candidate cluster counts.
const kValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const inertia = [8420, 4180, 2350, 1580, 1310, 1120, 980, 870, 790, 730];
const elbowK = 4;

const seriesData = kValues.map((k, i) =>
  k === elbowK
    ? { x: k, y: inertia[i], marker: { radius: 11, lineWidth: 3, lineColor: t.ink } }
    : [k, inertia[i]]
);

// --- Chart -------------------------------------------------------------------
Highcharts.chart("container", {
  chart: { type: "areaspline", backgroundColor: "transparent", animation: false,
           style: { fontFamily: "inherit" } },
  credits: { enabled: false },
  colors: t.palette,
  title: { text: "elbow-curve · javascript · highcharts · anyplot.ai",
           style: { color: t.ink, fontSize: "22px", fontWeight: "600" } },
  xAxis: { title: { text: "Number of Clusters (k)",
                     style: { color: t.inkSoft, fontSize: "16px" } },
           min: 1, max: 10, tickInterval: 1,
           lineColor: t.inkSoft, tickColor: t.inkSoft, gridLineColor: t.grid,
           labels: { style: { color: t.inkSoft, fontSize: "14px" } },
           plotLines: [{
             value: elbowK, color: t.inkSoft, dashStyle: "Dash", width: 1.5, zIndex: 3,
             label: { text: `Optimal k = ${elbowK}`, style: { color: t.inkSoft, fontSize: "14px" },
                      align: "left", x: 8, y: 16 },
           }] },
  yAxis: { title: { text: "Inertia (within-cluster sum of squares)",
                     style: { color: t.inkSoft, fontSize: "16px" } },
           gridLineColor: t.grid,
           labels: { style: { color: t.inkSoft, fontSize: "14px" } } },
  legend: { enabled: false },
  tooltip: { enabled: true, backgroundColor: t.elevatedBg, borderColor: t.grid,
             style: { color: t.ink, fontSize: "13px" },
             formatter() {
               return `k = ${this.x}<br/>Inertia: ${this.y.toLocaleString()}`;
             } },
  plotOptions: { series: { animation: false, lineWidth: 3,
                            fillOpacity: 0.12,
                            marker: { radius: 7, fillColor: t.palette[0], lineWidth: 0 } } },
  series: [{ name: "Inertia", data: seriesData, color: t.palette[0] }],
});

Retrieve this implementation

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

Part of Elbow Curve for K-Means Clustering on anyplot.ai.

Other implementations