{"spec_id":"line-stepwise","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// line-stepwise: Step Line Plot\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 89/100 | Created: 2026-09-05\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ---------------------------------------\n// Active instance count of an autoscaling web-server cluster, sampled every\n// 20 minutes. The group only resizes on the hour, so within an hour the\n// three samples repeat the same count until the next scaling decision.\nconst hourlyInstances = [\n  3, 3, 2, 2, 2, 2, 3, 4, 6, 8, 10, 12,\n  13, 14, 14, 13, 12, 10, 8, 6, 5, 4, 4, 3,\n];\nconst samplesPerHour = 3;\nconst peakValue = Math.max(...hourlyInstances);\nconst peakHour = hourlyInstances.indexOf(peakValue);\n\nconst data = [];\nlet previousValue = null;\nfor (let hour = 0; hour < hourlyInstances.length; hour += 1) {\n  const value = hourlyInstances[hour];\n  const isStepChange = value !== previousValue;\n  for (let sample = 0; sample < samplesPerHour; sample += 1) {\n    const point = { x: hour + sample / samplesPerHour, y: value };\n    // Mark the instant the autoscaler actually resizes the group, so the\n    // discrete step change (not a smooth ramp) reads at a glance.\n    if (isStepChange && sample === 0) {\n      point.marker = { enabled: true, radius: 4, fillColor: t.palette[0] };\n    }\n    if (hour === peakHour && sample === 0) {\n      point.dataLabels = {\n        enabled: true,\n        format: \"Peak: {y} instances\",\n        style: { color: t.ink, fontSize: \"14px\", fontWeight: \"600\", textOutline: \"none\" },\n        y: -16,\n      };\n    }\n    data.push(point);\n  }\n  previousValue = value;\n}\n\n// --- Chart -----------------------------------------------------------------\nHighcharts.chart(\"container\", {\n  chart: {\n    type: \"area\",\n    backgroundColor: \"transparent\",\n    animation: false,\n    style: { fontFamily: \"inherit\" },\n  },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: {\n    text: \"line-stepwise · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  xAxis: {\n    title: { text: \"Hour of Day\", style: { color: t.inkSoft, fontSize: \"16px\" } },\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    gridLineColor: t.grid,\n    min: 0,\n    max: 24,\n    tickInterval: 4,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n  },\n  yAxis: {\n    title: { text: \"Active Server Instances\", style: { color: t.inkSoft, fontSize: \"16px\" } },\n    gridLineColor: t.grid,\n    min: 0,\n    max: 18,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n  },\n  legend: { enabled: false },\n  plotOptions: {\n    series: { animation: false },\n    // Highcharts' post-alignment step: the new count takes effect exactly at\n    // the hour it starts, matching the autoscaler's actual resize instant.\n    // A low-opacity fill under the step line adds visual hierarchy beyond a\n    // bare line, and per-point markers/dataLabels above call out the\n    // discrete change points and the peak instance count.\n    area: {\n      step: \"right\",\n      lineWidth: 2.5,\n      fillOpacity: 0.12,\n      marker: { enabled: false },\n      dataLabels: { enabled: false },\n    },\n  },\n  series: [{ name: \"Active Instances\", data, color: t.palette[0] }],\n});\n"}