{"spec_id":"line-multi","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// line-multi: Multi-Line Comparison Plot\n// Library: highcharts 12.6.0 | JavaScript 22.23.1\n// Quality: 92/100 | Created: 2026-08-05\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Average monthly temperature (°C) across four US cities\nconst months = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\",\n                \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"];\n\nconst newYork    = [-1, 0, 5, 11, 17, 22, 25, 24, 20, 14, 8, 2];\nconst losAngeles = [14, 15, 15, 16, 18, 20, 23, 24, 23, 20, 17, 14];\nconst chicago    = [-4, -2, 4, 10, 16, 22, 24, 23, 19, 12, 4, -2];\n// Miami's Jul peak is called out with a data label to give the chart a focal point.\nconst miami = [20, 21, 23, 25, 27, 29,\n  { y: 30, dataLabels: { enabled: true, format: \"Miami peak: {y}°C\",\n                          style: { color: t.ink, fontSize: \"13px\", fontWeight: \"600\",\n                                   textOutline: \"none\" }, y: -14 } },\n  30, 29, 27, 24, 21];\n\n// --- Chart -------------------------------------------------------------------\nHighcharts.chart(\"container\", {\n  chart: { type: \"line\", backgroundColor: \"transparent\", animation: false,\n           style: { fontFamily: \"inherit\" } },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: { text: \"line-multi · javascript · highcharts · anyplot.ai\",\n           style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" } },\n  xAxis: { categories: months,\n           lineColor: t.inkSoft, tickColor: t.inkSoft,\n           labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n           title:  { text: \"Month\", style: { color: t.inkSoft, fontSize: \"16px\" } },\n           // Subtle band calling out the Jun-Aug summer season as a focal region.\n           plotBands: [{ from: 4.5, to: 7.5, color: t.grid,\n                          label: { text: \"Summer\", verticalAlign: \"top\", y: 14,\n                                   style: { color: t.inkSoft, fontSize: \"12px\" } } }] },\n  yAxis: { title: { text: \"Average Temperature (°C)\",\n                     style: { color: t.inkSoft, fontSize: \"16px\" } },\n           gridLineColor: t.grid,\n           labels: { style: { color: t.inkSoft, fontSize: \"14px\" } } },\n  legend: { itemStyle: { color: t.inkSoft, fontSize: \"14px\" },\n            itemHoverStyle: { color: t.ink } },\n  tooltip: { shared: true, valueSuffix: \"°C\",\n             backgroundColor: t.elevatedBg, borderColor: t.inkSoft,\n             style: { color: t.ink, fontSize: \"13px\" } },\n  plotOptions: { series: { animation: false, lineWidth: 3,\n                            marker: { enabled: true, radius: 5,\n                                      states: { hover: { radiusPlus: 2 } } },\n                            states: { hover: { lineWidthPlus: 1 } } } },\n  series: [\n    { name: \"New York\", data: newYork, dashStyle: \"Solid\" },\n    { name: \"Los Angeles\", data: losAngeles, dashStyle: \"ShortDash\" },\n    // Dashed so it stays distinguishable from New York where the lines nearly meet in Jul-Aug.\n    { name: \"Chicago\", data: chicago, dashStyle: \"Dot\" },\n    { name: \"Miami\", data: miami, dashStyle: \"LongDash\", lineWidth: 4 },\n  ],\n});\n"}