Diverging Bar Chart in Highcharts (JavaScript)

The same plot in 14 other libraries — JavaScript: Chart.js, D3.js, Apache ECharts, MUI X Charts; Python: Altair, Bokeh, lets-plot, Matplotlib, Plotly, plotnine, Pygal, Seaborn; R: ggplot2; Julia: Makie.jl. Compare all 15 side by side: Diverging Bar Chart in Python, R, Julia and JavaScript.

A diverging bar chart displays bars extending in opposite directions from a central baseline, typically at zero. This visualization is ideal for comparing positive and negative values, showing responses above and below a neutral point, or contrasting opposing categories. Different colors distinguish positive from negative values, making it easy to identify magnitude and direction at a glance.

Diverging Bar Chart rendered with Highcharts

Renders

JavaScript source (Highcharts)

// anyplot.ai
// bar-diverging: Diverging Bar Chart
// Library: highcharts 12.6.0 | JavaScript 22.23.2
// Quality: 93/100 | Created: 2026-08-18

const t = window.ANYPLOT_TOKENS;

// --- Data (in-memory, deterministic) ----------------------------------------
// Net satisfaction score (-100..+100) per product category, ascending so the
// horizontal bars read bottom (most negative) to top (most positive).
const categories = [
  "DVD Rental Service",
  "Legacy Software Suite",
  "Landline Phone Service",
  "Print Newsletter Subscription",
  "Cable TV Package",
  "Physical Retail Store",
  "Mobile Banking App",
  "Streaming Video Service",
  "Cloud Storage Plan",
  "Wireless Earbuds",
];
const netSatisfaction = [-61, -52, -41, -38, -29, -12, 34, 47, 58, 66];

// --- Chart -------------------------------------------------------------------
Highcharts.chart("container", {
  chart: {
    type: "bar",
    backgroundColor: "transparent",
    animation: false,
    style: { fontFamily: "inherit" },
  },
  credits: { enabled: false },
  title: {
    text: "bar-diverging · javascript · highcharts · anyplot.ai",
    style: { color: t.ink, fontSize: "22px", fontWeight: "600" },
  },
  subtitle: {
    text: "Net satisfaction score by product category, sorted low to high (green = above zero, red = below zero)",
    style: { color: t.inkSoft, fontSize: "14px" },
  },
  xAxis: {
    categories,
    lineColor: t.inkSoft,
    tickColor: t.inkSoft,
    labels: { style: { color: t.inkSoft, fontSize: "14px" } },
  },
  yAxis: {
    title: { text: "Net Satisfaction Score", style: { color: t.inkSoft, fontSize: "16px" } },
    min: -80,
    max: 80,
    gridLineColor: t.grid,
    labels: { style: { color: t.inkSoft, fontSize: "14px" } },
    plotLines: [{ value: 0, color: t.inkSoft, width: 2, zIndex: 5 }],
  },
  legend: { enabled: false },
  plotOptions: {
    series: { animation: false },
    bar: {
      borderWidth: 1,
      borderColor: t.pageBg,
      pointPadding: 0.1,
      groupPadding: 0.05,
      dataLabels: {
        enabled: true,
        color: t.ink,
        style: { fontSize: "13px", fontWeight: "500", textOutline: "none" },
        formatter() {
          return (this.y > 0 ? "+" : "") + this.y;
        },
      },
    },
  },
  series: [
    {
      name: "Net Satisfaction",
      data: netSatisfaction,
      color: t.palette[0],
      negativeColor: t.palette[4],
    },
  ],
});

Retrieve this implementation

Runnable source as JSON, for any HTTP client: https://api.anyplot.ai/specs/bar-diverging/highcharts/code. Any spec id and library id listed in llms-full.txt fit the same URL shape; every URL below is complete and callable.

{
  "spec_id": "bar-diverging",
  "language": "javascript",
  "library": "highcharts",
  "page": "https://anyplot.ai/bar-diverging/javascript/highcharts",
  "hub": "https://anyplot.ai/bar-diverging",
  "code_json": "https://api.anyplot.ai/specs/bar-diverging/highcharts/code",
  "spec_json": "https://api.anyplot.ai/specs/bar-diverging",
  "render_light_png": "https://storage.googleapis.com/anyplot-images/plots/bar-diverging/javascript/highcharts/plot-light.png",
  "render_dark_png": "https://storage.googleapis.com/anyplot-images/plots/bar-diverging/javascript/highcharts/plot-dark.png",
  "interactive_light_html": "https://storage.googleapis.com/anyplot-images/plots/bar-diverging/javascript/highcharts/plot-light.html",
  "interactive_dark_html": "https://storage.googleapis.com/anyplot-images/plots/bar-diverging/javascript/highcharts/plot-dark.html",
  "quality_score": 93.0,
  "license": "MIT",
  "guide": "https://anyplot.ai/llms.txt"
}

Part of Diverging Bar Chart on anyplot.ai.

Other implementations