{"spec_id":"bar-diverging","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// bar-diverging: Diverging Bar Chart\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 93/100 | Created: 2026-08-18\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Net satisfaction score (-100..+100) per product category, ascending so the\n// horizontal bars read bottom (most negative) to top (most positive).\nconst categories = [\n  \"DVD Rental Service\",\n  \"Legacy Software Suite\",\n  \"Landline Phone Service\",\n  \"Print Newsletter Subscription\",\n  \"Cable TV Package\",\n  \"Physical Retail Store\",\n  \"Mobile Banking App\",\n  \"Streaming Video Service\",\n  \"Cloud Storage Plan\",\n  \"Wireless Earbuds\",\n];\nconst netSatisfaction = [-61, -52, -41, -38, -29, -12, 34, 47, 58, 66];\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-diverging · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  subtitle: {\n    text: \"Net satisfaction score by product category, sorted low to high (green = above zero, red = below zero)\",\n    style: { color: t.inkSoft, fontSize: \"14px\" },\n  },\n  xAxis: {\n    categories,\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n  },\n  yAxis: {\n    title: { text: \"Net Satisfaction Score\", style: { color: t.inkSoft, fontSize: \"16px\" } },\n    min: -80,\n    max: 80,\n    gridLineColor: t.grid,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    plotLines: [{ value: 0, color: t.inkSoft, width: 2, zIndex: 5 }],\n  },\n  legend: { enabled: false },\n  plotOptions: {\n    series: { animation: false },\n    bar: {\n      borderWidth: 1,\n      borderColor: t.pageBg,\n      pointPadding: 0.1,\n      groupPadding: 0.05,\n      dataLabels: {\n        enabled: true,\n        color: t.ink,\n        style: { fontSize: \"13px\", fontWeight: \"500\", textOutline: \"none\" },\n        formatter() {\n          return (this.y > 0 ? \"+\" : \"\") + this.y;\n        },\n      },\n    },\n  },\n  series: [\n    {\n      name: \"Net Satisfaction\",\n      data: netSatisfaction,\n      color: t.palette[0],\n      negativeColor: t.palette[4],\n    },\n  ],\n});\n"}