{"spec_id":"pie-basic","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// pie-basic: Basic Pie Chart\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 95/100 | Created: 2026-08-20\n//# anyplot-orientation: square\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ---------------------------------------\nconst companies = [\"Nimbus Cloud\", \"Vertex Systems\", \"Halcyon Labs\", \"Ferro Dynamics\", \"Quinta Networks\", \"Others\"];\nconst marketShare = [31.4, 22.8, 18.5, 12.9, 8.7, 5.7];\nconst leader = { name: companies[0], share: marketShare[0] };\n\n// Slightly explode the largest slice for emphasis\nconst sliceData = companies.map((name, i) => ({\n  name,\n  y: marketShare[i],\n  sliced: i === 0,\n  selected: i === 0,\n}));\n\n// --- Chart -----------------------------------------------------------------\nHighcharts.chart(\"container\", {\n  chart: {\n    type: \"pie\",\n    backgroundColor: \"transparent\",\n    animation: false,\n    style: { fontFamily: \"inherit\" },\n    // Highcharts-distinctive touch: draw a center label into the donut hole\n    // via the SVG renderer, reinforcing the \"market leader\" story.\n    events: {\n      render() {\n        if (this.centerLabel) this.centerLabel.destroy();\n        this.centerLabel = this.renderer\n          .text(\n            `<div style=\"text-align:center;line-height:1.35\">` +\n              `<div style=\"font-size:12px;letter-spacing:0.05em;text-transform:uppercase;color:${t.inkSoft}\">Market leader</div>` +\n              `<div style=\"font-size:17px;font-weight:700;color:${t.ink}\">${leader.name}</div>` +\n              `<div style=\"font-size:24px;font-weight:700;color:${t.palette[0]}\">${leader.share.toFixed(1)}%</div>` +\n              `</div>`,\n            0,\n            0,\n            true,\n          )\n          .add();\n        const box = this.centerLabel.getBBox();\n        this.centerLabel.attr({\n          x: this.plotLeft + this.plotWidth / 2 - box.width / 2,\n          y: this.plotTop + this.plotHeight / 2 - box.height / 2,\n        });\n      },\n    },\n  },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: {\n    text: \"pie-basic · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  subtitle: {\n    text: `Cloud infrastructure market share by vendor — ${leader.name} leads at ${leader.share.toFixed(1)}%`,\n    style: { color: t.inkSoft, fontSize: \"14px\" },\n  },\n  tooltip: {\n    pointFormat: \"{series.name}: <b>{point.percentage:.1f}%</b>\",\n  },\n  legend: {\n    enabled: true,\n    itemStyle: { color: t.inkSoft, fontSize: \"14px\" },\n    itemHoverStyle: { color: t.ink },\n  },\n  plotOptions: {\n    series: { animation: false },\n    pie: {\n      allowPointSelect: false,\n      showInLegend: true,\n      innerSize: \"55%\",\n      borderWidth: 2,\n      borderColor: t.pageBg,\n      slicedOffset: 24,\n      dataLabels: {\n        enabled: true,\n        distance: 20,\n        useHTML: true,\n        // Highcharts-distinctive connector shape (not a generic default) plus\n        // a bolder, name-carrying label on the leading slice only.\n        connectorShape: \"crookedLine\",\n        crookDistance: \"70%\",\n        style: {\n          color: t.ink,\n          fontSize: \"15px\",\n          fontWeight: \"600\",\n          textOutline: \"none\",\n        },\n        formatter() {\n          if (this.point.index === 0) {\n            return `<b>${this.point.name}</b><br/>${this.point.percentage.toFixed(1)}%`;\n          }\n          return `${this.point.percentage.toFixed(1)}%`;\n        },\n      },\n    },\n  },\n  series: [\n    {\n      name: \"Market share\",\n      colorByPoint: true,\n      data: sliceData,\n    },\n  ],\n});\n"}