{"spec_id":"step-basic","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// step-basic: Basic Step Plot\n// Library: highcharts 12.6.0 | JavaScript 22.23.1\n// Quality: 89/100 | Created: 2026-07-25\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Hourly active-instance count for an auto-scaling web service: capacity only\n// changes at discrete scaling events, holding steady in between — a natural\n// fit for a step plot's \"post\" style (value holds from this hour until the\n// next scaling decision).\nconst hours = [\n  0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,\n  22, 23,\n];\nconst instances = [\n  2, 2, 2, 2, 2, 3, 3, 4, 6, 8, 8, 10, 10, 10, 9, 9, 8, 8, 7, 6, 4, 3, 2, 2,\n];\nconst data = hours.map((h, i) => [h, instances[i]]);\n\n// Peak scaling window (hours 11-13, where capacity plateaus at 10 instances) —\n// called out with a plotBand so the step's flat top reads as a deliberate\n// signal rather than just \"the highest bar\".\nconst peakBandColor = Highcharts.color(t.palette[0]).setOpacity(0.12).get();\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: \"step-basic · 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    tickInterval: 2,\n    gridLineColor: t.grid,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    plotBands: [\n      {\n        from: 10.5,\n        to: 13.5,\n        color: peakBandColor,\n        label: {\n          text: \"Peak scaling window\",\n          style: { color: t.inkSoft, fontSize: \"12px\" },\n          y: 16,\n        },\n      },\n    ],\n  },\n  yAxis: {\n    title: {\n      text: \"Active Instances\",\n      style: { color: t.inkSoft, fontSize: \"16px\" },\n    },\n    gridLineColor: t.grid,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    min: 0,\n  },\n  legend: { enabled: false },\n  plotOptions: {\n    series: { animation: false },\n    area: {\n      step: \"right\",\n      lineWidth: 2.5,\n      fillOpacity: 0.15,\n      marker: { enabled: true, radius: 5 },\n    },\n  },\n  series: [\n    {\n      name: \"Active instances\",\n      data,\n    },\n  ],\n});\n"}