{"spec_id":"titration-curve","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// titration-curve: Acid-Base Titration Curve\n// Library: highcharts 12.6.0 | JavaScript 22.23.0\n// Quality: 92/100 | Created: 2026-06-24\n\n//# anyplot-orientation: landscape\n\nconst t = window.ANYPLOT_TOKENS;\n\n// Strong acid/strong base titration: 25 mL of 0.1 M HCl + 0.1 M NaOH\nconst C = 0.1;    // molar concentration of both solutions (mol/L)\nconst V0 = 25.0;  // initial volume of HCl (mL)\nconst STEP = 0.5; // volume increment (mL)\nconst N = 101;    // data points: 0 to 50 mL inclusive\nconst nAcid = (V0 * C) / 1000; // moles of HCl = 0.0025 mol\n\n// Compute pH at each NaOH volume increment\nconst volumes = [];\nconst phs = [];\n\nfor (let i = 0; i < N; i++) {\n    const V = i * STEP;\n    const nBase = (V * C) / 1000;\n    const totalVol = (V0 + V) / 1000; // total volume in L\n    const excess = nBase - nAcid;\n\n    let ph;\n    if (Math.abs(excess) < 1e-9) {\n        ph = 7.0; // equivalence point: neutral salt solution\n    } else if (excess < 0) {\n        ph = -Math.log10(-excess / totalVol); // excess HCl\n    } else {\n        ph = 14 + Math.log10(excess / totalVol); // excess NaOH\n    }\n\n    volumes.push(V);\n    phs.push(Math.max(0, Math.min(14, ph)));\n}\n\n// Build series arrays including dpH/dV derivative via central differences\nconst phSeriesData = [];\nconst dphSeriesData = [];\n\nfor (let i = 0; i < N; i++) {\n    phSeriesData.push([volumes[i], parseFloat(phs[i].toFixed(3))]);\n\n    let d;\n    if (i === 0) {\n        d = (phs[1] - phs[0]) / STEP;\n    } else if (i === N - 1) {\n        d = (phs[N - 1] - phs[N - 2]) / STEP;\n    } else {\n        d = (phs[i + 1] - phs[i - 1]) / (2 * STEP);\n    }\n    dphSeriesData.push([volumes[i], parseFloat(Math.max(0, d).toFixed(3))]);\n}\n\n// Render\nHighcharts.chart('container', {\n    chart: {\n        backgroundColor: 'transparent',\n        animation: false,\n        alignTicks: false,\n        style: { fontFamily: 'inherit' },\n        marginRight: 90,\n    },\n    credits: { enabled: false },\n    colors: t.palette,\n\n    title: {\n        text: 'titration-curve · javascript · highcharts · anyplot.ai',\n        style: { color: t.ink, fontSize: '22px', fontWeight: '600' },\n    },\n    subtitle: {\n        text: '0.1 M HCl (25 mL) titrated with 0.1 M NaOH — strong acid/strong base system',\n        style: { color: t.inkSoft, fontSize: '14px' },\n    },\n\n    xAxis: {\n        title: {\n            text: 'Volume of NaOH added (mL)',\n            style: { color: t.inkSoft, fontSize: '16px' },\n        },\n        lineColor: t.inkSoft,\n        tickColor: t.inkSoft,\n        gridLineColor: t.grid,\n        min: 0,\n        max: 50,\n        tickInterval: 5,\n        labels: { style: { color: t.inkSoft, fontSize: '14px' } },\n        plotLines: [{\n            value: 25,\n            color: t.palette[2],\n            dashStyle: 'Dash',\n            width: 2,\n            zIndex: 5,\n            label: {\n                useHTML: true,\n                text: 'Equivalence Point<br>V = 25 mL, pH = 7',\n                style: { color: t.inkSoft, fontSize: '12px' },\n                align: 'left',\n                rotation: 0,\n                x: 6,\n                y: 20,\n            },\n        }],\n        plotBands: [{\n            from: 20,\n            to: 30,\n            color: 'rgba(0, 158, 115, 0.07)', // Imprint green, low opacity — steep transition zone\n        }],\n    },\n\n    yAxis: [\n        {\n            title: { text: 'pH', style: { color: t.inkSoft, fontSize: '16px' } },\n            min: 0,\n            max: 14,\n            tickInterval: 2,\n            lineColor: t.inkSoft,\n            tickColor: t.inkSoft,\n            gridLineColor: t.grid,\n            labels: { style: { color: t.inkSoft, fontSize: '14px' } },\n            plotLines: [{\n                value: 7,\n                color: t.inkSoft,\n                dashStyle: 'Dot',\n                width: 1,\n                zIndex: 2,\n            }],\n        },\n        {\n            title: {\n                text: 'dpH/dV (pH per mL)',\n                style: { color: t.palette[1], fontSize: '16px' },\n            },\n            min: 0,\n            max: 10,\n            opposite: true,\n            gridLineColor: 'transparent',\n            lineColor: t.palette[1],\n            tickColor: t.palette[1],\n            labels: { style: { color: t.palette[1], fontSize: '14px' } },\n        },\n    ],\n\n    legend: {\n        itemStyle: { color: t.inkSoft, fontSize: '14px' },\n        itemHoverStyle: { color: t.ink },\n    },\n\n    plotOptions: {\n        series: { animation: false },\n    },\n\n    series: [\n        {\n            name: 'pH',\n            type: 'spline',\n            data: phSeriesData,\n            color: t.palette[0], // Imprint brand green — first series\n            yAxis: 0,\n            lineWidth: 3,\n            marker: { enabled: false },\n        },\n        {\n            name: 'dpH/dV',\n            type: 'spline',\n            data: dphSeriesData,\n            color: t.palette[1], // Imprint lavender — second series\n            yAxis: 1,\n            lineWidth: 2,\n            dashStyle: 'ShortDot',\n            marker: { enabled: false },\n        },\n    ],\n});\n"}