{"spec_id":"line-markers","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// line-markers: Line Plot with Markers\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 91/100 | Created: 2026-09-05\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Weekly hardness readings (Rockwell HRC) from two heat-treatment furnace runs.\n// Furnace B week 7 dips below the minimum spec after a refractory lining check.\nconst weeks = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\nconst MIN_SPEC_HRC = 56;\nconst furnaceA = [58.2, 59.1, 57.8, 60.3, 59.6, 61.2, 60.8, 62.1, 61.5, 63.0];\nconst furnaceB = [\n  55.4,\n  56.0,\n  57.3,\n  56.8,\n  58.1,\n  57.6,\n  {\n    y: 52.5,\n    marker: { radius: 9, fillColor: t.amber, lineColor: t.ink, lineWidth: 2 },\n    dataLabels: {\n      enabled: true,\n      format: \"Refractory dip\",\n      align: \"right\",\n      x: -12,\n      y: 18,\n      style: { color: t.ink, fontSize: \"12px\", fontWeight: \"600\", textOutline: \"none\" },\n    },\n  },\n  58.4,\n  59.8,\n  60.2,\n];\n\nconst title = \"line-markers · javascript · highcharts · anyplot.ai\";\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: title,\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  xAxis: {\n    categories: weeks.map((w) => `Week ${w}`),\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    gridLineColor: t.grid,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    title: {\n      text: \"Production Week\",\n      style: { color: t.inkSoft, fontSize: \"16px\" },\n    },\n  },\n  yAxis: {\n    title: {\n      text: \"Hardness (HRC)\",\n      style: { color: t.inkSoft, fontSize: \"16px\" },\n    },\n    gridLineColor: t.grid,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    plotLines: [\n      {\n        value: MIN_SPEC_HRC,\n        color: t.amber,\n        width: 1.5,\n        dashStyle: \"Dash\",\n        zIndex: 5,\n        label: {\n          text: `Min spec: ${MIN_SPEC_HRC} HRC`,\n          align: \"left\",\n          x: 4,\n          y: -6,\n          style: { color: t.inkSoft, fontSize: \"12px\", fontWeight: \"600\" },\n        },\n      },\n    ],\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      lineWidth: 2.5,\n      marker: { radius: 6, lineWidth: 1.5, lineColor: t.pageBg },\n    },\n  },\n  series: [\n    {\n      name: \"Furnace A\",\n      data: [\n        ...furnaceA.slice(0, -1),\n        {\n          y: furnaceA[furnaceA.length - 1],\n          dataLabels: {\n            enabled: true,\n            format: \"+2.8 HRC vs B\",\n            align: \"center\",\n            y: -18,\n            style: { color: t.ink, fontSize: \"12px\", fontWeight: \"600\", textOutline: \"none\" },\n          },\n        },\n      ],\n      marker: { symbol: \"circle\" },\n    },\n    {\n      name: \"Furnace B\",\n      data: furnaceB,\n      marker: { symbol: \"diamond\" },\n      dashStyle: \"ShortDash\",\n    },\n  ],\n});\n"}