{"spec_id":"lollipop-basic","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// lollipop-basic: Basic Lollipop Chart\n// Library: highcharts 12.6.0 | JavaScript 22.23.0\n// Quality: 87/100 | Created: 2026-07-01\n\n//# anyplot-orientation: landscape\n\nconst t = window.ANYPLOT_TOKENS;\n\n// Data — Q1 units sold by tech product category (thousands), sorted ascending\nconst data = [\n    { category: \"Smart Watch\", value: 12 },\n    { category: \"Tablet\",      value: 18 },\n    { category: \"Drone\",       value: 24 },\n    { category: \"Speaker\",     value: 31 },\n    { category: \"Camera\",      value: 38 },\n    { category: \"Monitor\",     value: 45 },\n    { category: \"Keyboard\",    value: 52 },\n    { category: \"Headphones\",  value: 63 },\n    { category: \"Laptop\",      value: 78 },\n    { category: \"Smartphone\",  value: 94 },\n];\n\nconst categories = data.map(d => d.category);\nconst stemValues = data.map(d => d.value);\n\n// Scatter points — top performer gets a larger dot for emphasis\nconst dotValues = data.map((d, i) => ({\n    y: d.value,\n    marker: i === data.length - 1 ? { radius: 12 } : undefined,\n}));\n\nHighcharts.chart(\"container\", {\n    chart: {\n        backgroundColor: \"transparent\",\n        animation: false,\n        style: { fontFamily: \"inherit\" },\n        spacing: [40, 30, 40, 30],\n    },\n    credits: { enabled: false },\n    colors: t.palette,\n    title: {\n        text: \"lollipop-basic · javascript · highcharts · anyplot.ai\",\n        style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n        margin: 30,\n    },\n    xAxis: {\n        categories: categories,\n        title: {\n            text: \"Product Category\",\n            style: { color: t.inkSoft, fontSize: \"16px\" },\n        },\n        lineColor: t.inkSoft,\n        tickColor: \"transparent\",\n        gridLineWidth: 0,\n        labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    },\n    yAxis: {\n        title: {\n            text: \"Units Sold (thousands)\",\n            style: { color: t.inkSoft, fontSize: \"16px\" },\n        },\n        gridLineColor: t.grid,\n        lineColor: \"transparent\",\n        tickColor: \"transparent\",\n        labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n        min: 0,\n    },\n    legend: { enabled: false },\n    plotOptions: {\n        series: { animation: false },\n        column: {\n            borderWidth: 0,\n            pointWidth: 3,\n            groupPadding: 0,\n            pointPadding: 0,\n            enableMouseTracking: false,\n        },\n        scatter: {\n            marker: {\n                radius: 9,\n                symbol: \"circle\",\n                lineWidth: 2,\n                lineColor: t.pageBg,\n            },\n            dataLabels: {\n                enabled: true,\n                formatter: function () { return this.y + \"K\"; },\n                style: {\n                    color: t.ink,\n                    fontSize: \"11px\",\n                    fontWeight: \"400\",\n                    textOutline: \"none\",\n                },\n                verticalAlign: \"bottom\",\n                y: -14,\n            },\n        },\n    },\n    tooltip: {\n        formatter: function () {\n            return \"<b>\" + categories[this.x] + \"</b><br/>Units Sold: <b>\" + this.y + \"K</b>\";\n        },\n    },\n    series: [\n        {\n            type: \"column\",\n            name: \"Stem\",\n            data: stemValues,\n            color: t.palette[0],\n        },\n        {\n            type: \"scatter\",\n            name: \"Units Sold\",\n            data: dotValues,\n            color: t.palette[0],\n        },\n    ],\n});\n"}