{"spec_id":"line-styled","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// line-styled: Styled Line Plot\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 92/100 | Created: 2026-09-05\n\n//# anyplot-orientation: landscape\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Server resource utilization sampled every 30 minutes over a 24-hour window.\n// Four metrics are distinguished by line style so the chart still reads once\n// printed in black and white.\nconst hours = [];\nfor (let i = 0; i <= 48; i++) hours.push(i / 2);\n\nconst cpuLoad = hours.map((h) => 42 + 22 * Math.sin((h / 24) * 2 * Math.PI - 1.2) + 6 * Math.sin((h / 3) * 2 * Math.PI));\nconst memoryUse = hours.map((h) => 58 + 9 * Math.sin((h / 24) * 2 * Math.PI - 0.4) + h * 0.15);\nconst networkIo = hours.map((h) => 30 + 28 * Math.max(0, Math.sin((h / 12) * 2 * Math.PI)) + 4 * Math.sin((h / 1.5) * 2 * Math.PI));\nconst diskIo = hours.map((h) => 18 + 6 * Math.sin((h / 8) * 2 * Math.PI + 0.8) + 0.3 * h);\n\nconst toPoints = (series) => hours.map((h, i) => [h, Math.round(series[i] * 10) / 10]);\n\n// --- Chart -------------------------------------------------------------------\nHighcharts.chart(\"container\", {\n  chart: {\n    type: \"line\",\n    backgroundColor: \"transparent\",\n    animation: false,\n    style: { fontFamily: \"inherit\" },\n  },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: {\n    text: \"line-styled · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  xAxis: {\n    title: { text: \"Time of Day (hours)\", 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: {\n      style: { color: t.inkSoft, fontSize: \"14px\" },\n      formatter() {\n        return `${this.value}:00`;\n      },\n    },\n    // CPU and Memory both crest in this window (see data formulas above) —\n    // a plotBand calls out the one moment worth noticing among four equally-weighted lines.\n    plotBands: [\n      {\n        from: 8.5,\n        to: 10.5,\n        color: t.elevatedBg,\n        label: {\n          text: \"CPU + Memory peak\",\n          style: { color: t.inkSoft, fontSize: \"12px\" },\n          verticalAlign: \"top\",\n          y: 16,\n        },\n      },\n    ],\n  },\n  yAxis: {\n    title: { text: \"Utilization (%)\", style: { color: t.inkSoft, fontSize: \"16px\" } },\n    gridLineColor: t.grid,\n    min: 0,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n  },\n  legend: {\n    itemStyle: { color: t.inkSoft, fontSize: \"14px\" },\n    itemHoverStyle: { color: t.ink },\n  },\n  tooltip: { enabled: false },\n  plotOptions: {\n    series: {\n      animation: false,\n      marker: { enabled: false },\n      lineWidth: 3,\n    },\n  },\n  series: [\n    { name: \"CPU\", data: toPoints(cpuLoad), dashStyle: \"Solid\" },\n    { name: \"Memory\", data: toPoints(memoryUse), dashStyle: \"Dash\" },\n    { name: \"Network I/O\", data: toPoints(networkIo), dashStyle: \"Dot\" },\n    { name: \"Disk I/O\", data: toPoints(diskIo), dashStyle: \"DashDot\" },\n  ],\n});\n"}