{"spec_id":"bar-pareto","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// bar-pareto: Pareto Chart with Cumulative Line\n// Library: highcharts 12.6.0 | JavaScript 22.22.3\n// Quality: 90/100 | Created: 2026-06-20\n\n//# anyplot-orientation: landscape\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (manufacturing defects, sorted descending by count) ---------------\nconst defects = [\n  { name: \"Scratches\",     count: 120 },\n  { name: \"Dents\",         count: 80  },\n  { name: \"Cracks\",        count: 55  },\n  { name: \"Misalignment\",  count: 40  },\n  { name: \"Discoloration\", count: 30  },\n  { name: \"Blistering\",    count: 18  },\n  { name: \"Warping\",       count: 12  },\n  { name: \"Contamination\", count: 8   },\n];\n\nconst categories = defects.map(d => d.name);\nconst counts     = defects.map(d => d.count);\nconst total      = counts.reduce((a, b) => a + b, 0);\n\n// Cumulative percentages (one decimal place)\nlet cumSum = 0;\nconst cumulativePct = counts.map(c => {\n  cumSum += c;\n  return Math.round((cumSum / total) * 1000) / 10;\n});\n\n// --- Chart ------------------------------------------------------------------\nHighcharts.chart(\"container\", {\n  chart: {\n    backgroundColor: \"transparent\",\n    animation: false,\n    style: { fontFamily: \"inherit\" },\n    marginRight: 80,\n    plotBorderWidth: 0,\n  },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: {\n    text: \"bar-pareto · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n    margin: 24,\n  },\n  xAxis: {\n    categories,\n    lineColor: t.inkSoft,\n    lineWidth: 1,\n    tickColor: t.inkSoft,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n  },\n  yAxis: [\n    {\n      // Primary axis — raw defect counts (left)\n      title: {\n        text: \"Defect Count\",\n        style: { color: t.inkSoft, fontSize: \"16px\" },\n      },\n      min: 0,\n      gridLineColor: t.grid,\n      lineColor: t.inkSoft,\n      lineWidth: 1,\n      tickColor: t.inkSoft,\n      labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    },\n    {\n      // Secondary axis — cumulative percentage (right)\n      title: {\n        text: \"Cumulative Percentage (%)\",\n        style: { color: t.inkSoft, fontSize: \"16px\" },\n      },\n      min: 0,\n      max: 100,\n      opposite: true,\n      gridLineColor: \"transparent\",\n      lineWidth: 0,\n      tickColor: t.inkSoft,\n      labels: {\n        format: \"{value}%\",\n        style: { color: t.inkSoft, fontSize: \"14px\" },\n      },\n      plotLines: [\n        {\n          value: 80,\n          color: \"#DDCC77\",\n          dashStyle: \"ShortDash\",\n          width: 2,\n          zIndex: 5,\n          label: {\n            text: \"80% threshold\",\n            align: \"right\",\n            x: -4,\n            style: { color: \"#DDCC77\", fontSize: \"14px\", fontWeight: \"600\" },\n          },\n        },\n      ],\n    },\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    column: {\n      borderWidth: 0,\n      groupPadding: 0.05,\n      pointPadding: 0.05,\n    },\n    line: {\n      lineWidth: 2.5,\n      marker: { enabled: true, radius: 5, symbol: \"circle\" },\n    },\n  },\n  series: [\n    {\n      type: \"column\",\n      name: \"Defect Count\",\n      data: counts,\n      color: t.palette[0],\n      yAxis: 0,\n    },\n    {\n      type: \"line\",\n      name: \"Cumulative %\",\n      data: cumulativePct,\n      color: t.palette[1],\n      yAxis: 1,\n      marker: { enabled: true, radius: 5, symbol: \"circle\" },\n    },\n  ],\n});\n"}