{"spec_id":"scatter-annotated","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// scatter-annotated: Annotated Scatter Plot with Text Labels\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 88/100 | Created: 2026-09-05\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Revenue vs. market cap for a set of well-known tech companies (illustrative\n// figures, not live market data). Labels annotate every point since n is small.\n// Two points are called out as focal outliers: Nvidia carries by far the\n// richest market-cap-to-revenue multiple (~36x vs. a ~3-17x range for peers),\n// and Amazon is the clear revenue leader — a distinct kind of standout.\nconst companies = [\n  { name: \"Apple\", revenue: 383, marketCap: 2950 },\n  { name: \"Microsoft\", revenue: 212, marketCap: 3100 },\n  { name: \"Alphabet\", revenue: 307, marketCap: 1850 },\n  { name: \"Amazon\", revenue: 575, marketCap: 1900, highlight: true },\n  { name: \"Nvidia\", revenue: 61, marketCap: 2200, highlight: true },\n  { name: \"Meta\", revenue: 135, marketCap: 1250 },\n  { name: \"Tesla\", revenue: 97, marketCap: 780 },\n  { name: \"Broadcom\", revenue: 35, marketCap: 610 },\n  { name: \"Oracle\", revenue: 50, marketCap: 330 },\n  { name: \"Adobe\", revenue: 19, marketCap: 230 },\n  { name: \"Salesforce\", revenue: 34, marketCap: 260 },\n  { name: \"IBM\", revenue: 61, marketCap: 175 },\n  { name: \"Intel\", revenue: 54, marketCap: 105 },\n  { name: \"Cisco\", revenue: 57, marketCap: 200 },\n  { name: \"Uber\", revenue: 37, marketCap: 145 },\n];\n\n// Data-label offset from each point (CSS px) — shared between the dataLabels\n// config below and the connector-line renderer so the two stay in sync.\nconst LABEL_DX = 14;\nconst LABEL_DY = 0;\n\nconst points = companies.map((c) => ({\n  x: c.revenue,\n  y: c.marketCap,\n  name: c.name,\n  marker: c.highlight\n    ? { radius: 9, fillColor: t.palette[0], lineWidth: 1.5 }\n    : undefined,\n  dataLabels: c.highlight\n    ? { style: { fontWeight: \"700\" } }\n    : undefined,\n}));\n\n// --- Chart -------------------------------------------------------------------\nHighcharts.chart(\"container\", {\n  chart: {\n    type: \"scatter\",\n    backgroundColor: \"transparent\",\n    animation: false,\n    style: { fontFamily: \"inherit\" },\n    events: {\n      // Draw a subtle connector from each marker's edge to its offset label\n      // via the SVG renderer directly (Highcharts has no built-in scatter\n      // dataLabel connector — that's a pie-only feature).\n      render: function () {\n        const chart = this;\n        if (chart.connectorGroup) {\n          chart.connectorGroup.destroy();\n        }\n        const group = chart.renderer.g(\"data-connectors\").add();\n        chart.series[0].points.forEach((point) => {\n          if (!point.graphic || !point.dataLabel) return;\n          const r = point.graphic.attr(\"r\") || 7;\n          const x1 = chart.plotLeft + point.plotX + r;\n          const y1 = chart.plotTop + point.plotY;\n          const x2 = chart.plotLeft + point.plotX + LABEL_DX - 2;\n          const y2 = chart.plotTop + point.plotY + LABEL_DY;\n          chart.renderer\n            .path([\"M\", x1, y1, \"L\", x2, y2])\n            .attr({ \"stroke-width\": 1, stroke: t.inkSoft, opacity: 0.5, zIndex: 3 })\n            .add(group);\n        });\n        chart.connectorGroup = group;\n      },\n    },\n  },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: {\n    text: \"scatter-annotated · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  xAxis: {\n    type: \"logarithmic\",\n    title: {\n      text: \"Annual Revenue (USD billions, log scale)\",\n      style: { color: t.inkSoft, fontSize: \"16px\" },\n    },\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    gridLineColor: t.grid,\n    gridLineWidth: 1,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n  },\n  yAxis: {\n    type: \"logarithmic\",\n    title: {\n      text: \"Market Cap (USD billions, log scale)\",\n      style: { color: t.inkSoft, fontSize: \"16px\" },\n    },\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    gridLineColor: t.grid,\n    gridLineWidth: 1,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n  },\n  legend: { enabled: false },\n  tooltip: {\n    pointFormat: \"Revenue: {point.x}B · Market Cap: {point.y}B\",\n  },\n  plotOptions: {\n    series: { animation: false },\n    scatter: {\n      marker: {\n        radius: 7,\n        fillColor: Highcharts.color(t.palette[0]).setOpacity(0.7).get(),\n        lineWidth: 1,\n        lineColor: t.pageBg,\n      },\n      dataLabels: {\n        enabled: true,\n        format: \"{point.name}\",\n        align: \"left\",\n        verticalAlign: \"middle\",\n        x: LABEL_DX,\n        y: LABEL_DY,\n        allowOverlap: false,\n        style: {\n          color: t.ink,\n          fontSize: \"13px\",\n          fontWeight: \"normal\",\n          textOutline: \"none\",\n        },\n      },\n    },\n  },\n  series: [\n    {\n      name: \"Companies\",\n      data: points,\n      color: t.palette[0],\n    },\n  ],\n});\n"}