{"spec_id":"bar-horizontal","library":"echarts","language":"javascript","code":"// anyplot.ai\n// bar-horizontal: Horizontal Bar Chart\n// Library: echarts 6.1.0 | JavaScript 22.23.1\n// Quality: 93/100 | Created: 2026-08-05\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Survey: reasons customers cited for choosing a software subscription (n=500,\n// multi-select, so shares don't sum to 100). Sorted descending for ranking.\nconst reasons = [\n  \"Ease of use and onboarding\",\n  \"Price and value for money\",\n  \"Customer support quality\",\n  \"Integration with existing tools\",\n  \"Feature completeness\",\n  \"Data security and compliance\",\n  \"Recommendation from a colleague\",\n  \"Brand reputation\",\n];\nconst shares = [68, 61, 54, 47, 41, 35, 24, 18];\n\n// Top-ranked reason (index 0, since shares are sorted descending) keeps\n// full-strength brand green and a bold value label as the focal point; the\n// rest are softened so the ranking hierarchy reads at a glance, not just\n// from sort order.\nconst barData = shares.map((value, i) => ({\n  value,\n  itemStyle: {\n    borderRadius: [0, 4, 4, 0],\n    color: i === 0 ? t.palette[0] : `${t.palette[0]}99`,\n  },\n  label: i === 0 ? { fontWeight: 700 } : undefined,\n}));\n\n// --- Init --------------------------------------------------------------------\nconst chart = echarts.init(document.getElementById(\"container\"));\n\n// --- Option --------------------------------------------------------------------\nchart.setOption({\n  animation: false,\n  color: t.palette,\n  backgroundColor: \"transparent\",\n  title: {\n    text: \"bar-horizontal · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    textStyle: { color: t.ink, fontSize: 26, fontWeight: 500 },\n  },\n  grid: { left: 24, right: 90, top: 90, bottom: 70, containLabel: true },\n  xAxis: {\n    type: \"value\",\n    name: \"Respondents citing this reason (%)\",\n    nameLocation: \"middle\",\n    nameGap: 40,\n    nameTextStyle: { color: t.inkSoft, fontSize: 14 },\n    max: 80,\n    axisLabel: { color: t.inkSoft, fontSize: 14, formatter: \"{value}%\" },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    axisTick: { show: false },\n    splitLine: { lineStyle: { color: t.grid } },\n  },\n  yAxis: {\n    type: \"category\",\n    data: reasons,\n    inverse: true,\n    axisLabel: { color: t.inkSoft, fontSize: 14 },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    axisTick: { show: false },\n    splitLine: { show: false },\n  },\n  series: [\n    {\n      type: \"bar\",\n      data: barData,\n      barCategoryGap: \"35%\",\n      label: {\n        show: true,\n        position: \"right\",\n        formatter: \"{c}%\",\n        color: t.ink,\n        fontSize: 14,\n      },\n      // ECharts-distinctive touch: an auto-computed average markLine gives\n      // viewers an at-a-glance benchmark beyond the raw ranking.\n      markLine: {\n        silent: true,\n        symbol: \"none\",\n        lineStyle: { color: t.inkSoft, type: \"dashed\", width: 1.5 },\n        label: { formatter: \"Avg {c}%\", color: t.inkSoft, fontSize: 12, position: \"insideEndTop\" },\n        data: [{ type: \"average\", name: \"Average\" }],\n      },\n    },\n  ],\n});\n"}