{"spec_id":"donut-basic","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// donut-basic: Basic Donut Chart\n// Library: highcharts 12.6.0 | JavaScript 22.23.0\n// Quality: 88/100 | Created: 2026-06-25\n//# anyplot-orientation: square\n// anyplot.ai\n// donut-basic: Basic Donut Chart\n// Library: Highcharts 12.6.0 | Node 22\n// License: Highcharts — commercial license, free for non-commercial use (highcharts.com/license)\n// Quality: pending | Created: 2026-06-25\n\nconst t = window.ANYPLOT_TOKENS;\n\n// FY 2024 annual budget allocation by department ($K); R&D is the dominant slice\nconst departments = [\n  { name: \"R&D\",        y: 420, sliced: true },\n  { name: \"Sales\",      y: 310 },\n  { name: \"Operations\", y: 260 },\n  { name: \"Marketing\",  y: 180 },\n  { name: \"IT\",         y: 145 },\n  { name: \"HR\",         y:  85 },\n];\n\nconst totalBudget = departments.reduce((s, d) => s + d.y, 0);\n\nHighcharts.chart(\"container\", {\n  chart: {\n    type: \"pie\",\n    backgroundColor: \"transparent\",\n    animation: false,\n    style: { fontFamily: \"inherit\" },\n    events: {\n      render() {\n        const s = this.series[0];\n        if (!s || !s.center) return;\n        const cx = this.plotLeft + s.center[0];\n        const cy = this.plotTop  + s.center[1];\n\n        if (this._cv) this._cv.destroy();\n        if (this._ct) this._ct.destroy();\n\n        this._cv = this.renderer\n          .text(`$${(totalBudget / 1000).toFixed(1)}M`, cx, cy - 6)\n          .attr({ align: \"center\", zIndex: 5 })\n          .css({ color: t.ink, fontSize: \"38px\", fontWeight: \"700\" })\n          .add();\n\n        this._ct = this.renderer\n          .text(\"Total Budget\", cx, cy + 26)\n          .attr({ align: \"center\", zIndex: 5 })\n          .css({ color: t.inkSoft, fontSize: \"15px\" })\n          .add();\n      },\n    },\n  },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: {\n    text: \"donut-basic · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  subtitle: {\n    text: \"FY 2024 Annual Budget Allocation by Department\",\n    style: { color: t.inkSoft, fontSize: \"14px\" },\n  },\n  plotOptions: {\n    series: { animation: false },\n    pie: {\n      innerSize: \"55%\",\n      center: [\"50%\", \"53%\"],\n      slicedOffset: 14,\n      dataLabels: {\n        enabled: true,\n        format: \"<b>{point.name}</b><br>{point.percentage:.1f}%\",\n        style: {\n          color: t.ink,\n          fontSize: \"14px\",\n          fontWeight: \"normal\",\n          textOutline: \"none\",\n        },\n        connectorColor: t.inkSoft,\n        connectorWidth: 1,\n        distance: 28,\n      },\n      borderWidth: 0,\n      point: {\n        events: {\n          legendItemClick() { return false; },\n        },\n      },\n    },\n  },\n  legend: { enabled: false },\n  responsive: {\n    rules: [{\n      condition: { maxWidth: 500 },\n      chartOptions: {\n        plotOptions: {\n          pie: {\n            dataLabels: { enabled: false },\n            center: [\"50%\", \"50%\"],\n          },\n        },\n        legend: {\n          enabled: true,\n          itemStyle: { color: t.inkSoft, fontSize: \"12px\" },\n          itemHoverStyle: { color: t.ink },\n        },\n      },\n    }],\n  },\n  series: [\n    {\n      name: \"Budget ($K)\",\n      colorByPoint: true,\n      data: departments,\n    },\n  ],\n});\n"}