{"spec_id":"bar-feature-importance","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// bar-feature-importance: Feature Importance Bar Chart\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 92/100 | Created: 2026-09-02\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Feature importances from a gradient-boosted tree model predicting loan\n// default risk (analogous to sklearn's `.feature_importances_`, which sums\n// to 1). Sorted ascending here because Highcharts' horizontal \"bar\" chart\n// plots category index 0 at the bottom — ascending order puts the highest\n// importance at the top.\nconst featuresDesc = [\n  \"Credit score\",\n  \"Debt-to-income ratio\",\n  \"Annual income\",\n  \"Interest rate\",\n  \"Revolving balance\",\n  \"Loan amount\",\n  \"Credit history (yrs)\",\n  \"Open credit accounts\",\n  \"Delinquencies (2 yrs)\",\n  \"Employment length\",\n  \"Home ownership\",\n  \"Verification status\",\n];\nconst importanceDesc = [\n  0.238, 0.164, 0.142, 0.098, 0.081, 0.067, 0.055, 0.043, 0.036, 0.029, 0.024,\n  0.023,\n];\nconst categories = [...featuresDesc].reverse();\nconst importance = [...importanceDesc].reverse();\n\n// --- Color (Imprint sequential gradient, mapped to importance) -------------\n// Highcharts' chart-level colorAxis + series.colorKey pattern needs\n// modules/coloraxis.js for non-heatmap/treemap series, which this harness\n// does not load (core bundle only — see prompts/library/highcharts.md\n// \"Forbidden patterns\"). A per-point color computed from the Imprint\n// sequential stops is the feasible equivalent within that constraint.\nfunction hexToRgb(hex) {\n  const v = parseInt(hex.slice(1), 16);\n  return [(v >> 16) & 0xff, (v >> 8) & 0xff, v & 0xff];\n}\nfunction lerpColor(hexLow, hexHigh, ratio) {\n  const [r0, g0, b0] = hexToRgb(hexLow);\n  const [r1, g1, b1] = hexToRgb(hexHigh);\n  const r = Math.round(r0 + (r1 - r0) * ratio);\n  const g = Math.round(g0 + (g1 - g0) * ratio);\n  const b = Math.round(b0 + (b1 - b0) * ratio);\n  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;\n}\nconst minImportance = Math.min(...importance);\nconst maxImportance = Math.max(...importance);\nconst data = categories.map((name, i) => {\n  const ratio = (importance[i] - minImportance) / (maxImportance - minImportance);\n  return { name, y: importance[i], color: lerpColor(t.seq[0], t.seq[1], ratio) };\n});\n// Call out the single dominant feature (last entry — highest importance,\n// since categories/importance are sorted ascending for the horizontal bar).\ndata[data.length - 1].dataLabels = {\n  format: \"{point.y:.3f} — top predictor\",\n  style: {\n    color: t.amber,\n    fontSize: \"13px\",\n    fontWeight: \"700\",\n    textOutline: \"none\",\n  },\n};\n\n// --- Chart -------------------------------------------------------------------\nHighcharts.chart(\"container\", {\n  chart: {\n    type: \"bar\",\n    backgroundColor: \"transparent\",\n    animation: false,\n    style: { fontFamily: \"inherit\" },\n  },\n  credits: { enabled: false },\n  title: {\n    text: \"bar-feature-importance · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  subtitle: {\n    text: \"Gradient-boosted model · predicting loan default risk\",\n    style: { color: t.inkSoft, fontSize: \"14px\" },\n  },\n  xAxis: {\n    categories,\n    lineWidth: 0,\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n  },\n  yAxis: {\n    min: 0,\n    title: {\n      text: \"Relative importance\",\n      style: { color: t.inkSoft, fontSize: \"16px\" },\n    },\n    gridLineColor: t.grid,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n  },\n  legend: { enabled: false },\n  plotOptions: {\n    series: { animation: false },\n    bar: {\n      borderWidth: 0,\n      pointPadding: 0.1,\n      groupPadding: 0.1,\n      dataLabels: {\n        enabled: true,\n        format: \"{point.y:.3f}\",\n        style: {\n          color: t.ink,\n          fontSize: \"13px\",\n          fontWeight: \"600\",\n          textOutline: \"none\",\n        },\n      },\n    },\n  },\n  tooltip: { enabled: false },\n  series: [{ name: \"Importance\", data }],\n});\n"}