{"spec_id":"bar-pareto","library":"chartjs","language":"javascript","code":"// anyplot.ai\n// bar-pareto: Pareto Chart with Cumulative Line\n// Library: chartjs 4.4.7 | JavaScript 22.22.3\n// Quality: 87/100 | Created: 2026-06-20\n\nconst t = window.ANYPLOT_TOKENS;\n\n// Data — manufacturing defect counts (sorted descending by frequency)\nconst categories = ['Scratches', 'Dents', 'Cracks', 'Misalignment', 'Discoloration',\n    'Warping', 'Incomplete Fill', 'Surface Bubbles', 'Other'];\nconst counts = [320, 180, 140, 95, 75, 52, 38, 25, 18];\nconst total = counts.reduce((a, b) => a + b, 0);\n\n// Cumulative percentages at center of each bar (Pareto 80/20 rule)\nconst cumPct = [];\nlet running = 0;\nfor (const c of counts) {\n    running += c;\n    cumPct.push(parseFloat((running / total * 100).toFixed(1)));\n}\n\n// Title sizing — scale down linearly when title exceeds 67-char baseline\nconst title = 'Manufacturing Defects · bar-pareto · javascript · chartjs · anyplot.ai';\nconst titleSize = title.length > 67 ? Math.round(22 * 67 / title.length) : 22;\n\n// Mount\nconst canvas = document.createElement('canvas');\ndocument.getElementById('container').appendChild(canvas);\n\n// Chart\nnew Chart(canvas, {\n    type: 'bar',\n    data: {\n        labels: categories,\n        datasets: [\n            {\n                type: 'bar',\n                label: 'Defect Count',\n                data: counts,\n                backgroundColor: t.palette[0],   // #009E73 Imprint brand green\n                borderWidth: 0,\n                yAxisID: 'y',\n                order: 2,\n            },\n            {\n                type: 'line',\n                label: 'Cumulative %',\n                data: cumPct,\n                borderColor: t.palette[1],        // #C475FD lavender\n                backgroundColor: 'transparent',\n                borderWidth: 2.5,\n                pointRadius: 6,\n                pointBackgroundColor: t.palette[1],\n                pointBorderColor: t.pageBg,\n                pointBorderWidth: 2,\n                tension: 0,\n                yAxisID: 'y2',\n                order: 1,\n            },\n            {\n                type: 'line',\n                label: '80% Threshold',\n                data: Array(categories.length).fill(80),\n                borderColor: t.amber,             // #DDCC77 warning anchor\n                backgroundColor: 'transparent',\n                borderWidth: 2,\n                borderDash: [10, 5],\n                pointRadius: 0,\n                tension: 0,\n                yAxisID: 'y2',\n                order: 3,\n            },\n        ],\n    },\n    options: {\n        responsive: true,\n        maintainAspectRatio: false,\n        animation: false,\n        plugins: {\n            title: {\n                display: true,\n                text: title,\n                color: t.ink,\n                font: { size: titleSize, weight: 'bold' },\n                padding: { top: 8, bottom: 20 },\n            },\n            legend: {\n                labels: { color: t.inkSoft, font: { size: 14 }, boxWidth: 22, padding: 16 },\n            },\n        },\n        layout: { padding: { top: 10, bottom: 10, left: 10, right: 20 } },\n        scales: {\n            x: {\n                ticks: {\n                    color: t.inkSoft,\n                    font: { size: 13 },\n                    maxRotation: 30,\n                    minRotation: 0,\n                },\n                grid: { display: false },\n                border: { display: false },\n                title: {\n                    display: true,\n                    text: 'Defect Category',\n                    color: t.ink,\n                    font: { size: 14 },\n                    padding: { top: 6 },\n                },\n            },\n            y: {\n                beginAtZero: true,\n                ticks: { color: t.inkSoft, font: { size: 14 } },\n                grid: { color: t.grid },\n                border: { display: false },\n                title: {\n                    display: true,\n                    text: 'Defect Count',\n                    color: t.ink,\n                    font: { size: 14 },\n                },\n            },\n            y2: {\n                type: 'linear',\n                position: 'right',\n                min: 0,\n                max: 100,\n                ticks: {\n                    color: t.inkSoft,\n                    font: { size: 14 },\n                    stepSize: 20,\n                    callback: (v) => v + '%',\n                },\n                grid: { drawOnChartArea: false },\n                border: { display: false },\n                title: {\n                    display: true,\n                    text: 'Cumulative Percentage',\n                    color: t.ink,\n                    font: { size: 14 },\n                },\n            },\n        },\n    },\n    plugins: [{\n        id: 'bg',\n        beforeDraw(chart) {\n            const ctx = chart.ctx;\n            ctx.save();\n            ctx.fillStyle = t.pageBg;\n            ctx.fillRect(0, 0, chart.width, chart.height);\n            ctx.restore();\n        },\n    }],\n});\n"}