{"spec_id":"bar-diverging","library":"echarts","language":"javascript","code":"// anyplot.ai\n// bar-diverging: Diverging Bar Chart\n// Library: echarts 6.1.0 | JavaScript 22.23.2\n// Quality: 92/100 | Created: 2026-08-18\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Net Promoter Score by product feature, sorted ascending so the highest\n// score renders at the top of the category axis (echarts draws category\n// index 0 at the bottom).\nconst features = [\n  \"Technical Reliability\",\n  \"Shipping & Delivery\",\n  \"Return Policy\",\n  \"Packaging\",\n  \"Price Value\",\n  \"Checkout Experience\",\n  \"Customer Support\",\n  \"Website Navigation\",\n  \"Loyalty Program\",\n  \"Product Quality\",\n  \"Mobile App Experience\",\n];\nconst scores = [-41, -26, -18, -11, -4, 8, 15, 21, 38, 44, 52];\n\nconst positiveData = scores.map((v) => (v >= 0 ? v : null));\nconst negativeData = scores.map((v) => (v < 0 ? v : null));\n\n// --- Init ---------------------------------------------------------------\nconst chart = echarts.init(document.getElementById(\"container\"));\n\n// --- Option -----------------------------------------------------------------\nchart.setOption({\n  animation: false,\n  backgroundColor: \"transparent\",\n  title: {\n    text: \"bar-diverging · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    textStyle: { color: t.ink, fontSize: 22 },\n  },\n  legend: {\n    data: [\"Positive\", \"Negative\"],\n    top: 74,\n    left: \"center\",\n    textStyle: { color: t.ink, fontSize: 16 },\n    itemWidth: 20,\n    itemHeight: 12,\n  },\n  grid: { left: 40, right: 70, top: 150, bottom: 90, containLabel: true },\n  xAxis: {\n    type: \"value\",\n    min: -60,\n    max: 60,\n    name: \"Net Promoter Score\",\n    nameLocation: \"middle\",\n    nameGap: 44,\n    nameTextStyle: { color: t.inkSoft, fontSize: 16 },\n    axisLabel: { color: t.inkSoft, fontSize: 14 },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    splitLine: { lineStyle: { color: t.grid } },\n  },\n  yAxis: {\n    type: \"category\",\n    data: features,\n    axisLabel: { color: t.inkSoft, fontSize: 14 },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    splitLine: { show: false },\n  },\n  series: [\n    {\n      name: \"Positive\",\n      type: \"bar\",\n      stack: \"score\",\n      barCategoryGap: \"35%\",\n      itemStyle: { color: t.palette[0] },\n      label: {\n        show: true,\n        position: \"right\",\n        color: t.ink,\n        fontSize: 14,\n        formatter: (params) => `+${params.value}`,\n      },\n      markLine: {\n        symbol: \"none\",\n        silent: true,\n        animation: false,\n        lineStyle: { color: t.ink, width: 1.5, type: \"solid\" },\n        label: { show: false },\n        data: [{ xAxis: 0 }],\n      },\n      data: positiveData,\n    },\n    {\n      name: \"Negative\",\n      type: \"bar\",\n      stack: \"score\",\n      itemStyle: { color: t.palette[4] },\n      label: {\n        show: true,\n        position: \"left\",\n        color: t.ink,\n        fontSize: 14,\n        formatter: (params) => `${params.value}`,\n      },\n      data: negativeData,\n    },\n  ],\n});\n"}