Home›Bar›Diverging Stacked Bar Chart
NEWBar

Diverging Stacked Bar Chart

Bi-directional stacked bar chart centered on a zero baseline for Likert scales, customer sentiment, and survey analysis.

Loading chart…
#bar#stacked#diverging#survey#likert#sentiment
Customization Guides & Code Snippets

◆Centering Likert Scale Responses with stackOffset='sign'

Use stackOffset='sign' on the vertical <BarChart> to automatically branch negative agreement scores to the left of the baseline and positive satisfaction scores to the right.

<BarChart layout="vertical" data={data} stackOffset="sign">
  <ReferenceLine x={0} stroke="#5c6370" strokeWidth={1.5} />
  <Bar dataKey="stronglyDisagree" stackId="sentiment" fill="#ef4444" radius={[4, 0, 0, 4]} />
  <Bar dataKey="disagree" stackId="sentiment" fill="#f87171" />
  <Bar dataKey="agree" stackId="sentiment" fill="#60a5fa" />
  <Bar dataKey="stronglyAgree" stackId="sentiment" fill="#00e5a0" radius={[0, 4, 4, 0]} />
</BarChart>

◆Formatting Absolute Percentage Labels on the X-Axis

Since negative scores are plotted to the left, format X-axis tick values with Math.abs(v) so users see positive percentage magnitudes on both sides of zero.

tickFormatter={(v) => `${Math.abs(v)}%`}
When to use a Diverging Stacked Bar Chart

A Diverging Stacked Bar Chart is ideal for developers and designers who need to display data clearly and effectively. Use this chart type when:

  • ✓Comparing values across multiple categories (e.g. monthly revenue per region)
  • ✓Showing ranked data where order matters (e.g. top 10 products by sales)
  • ✓Displaying survey results or poll responses
  • ✓Visualizing before/after comparisons
Tips for Recharts Diverging Stacked Bar Chart
TIP 1Always start the Y-axis at zero to avoid misleading comparisons
TIP 2Use rounded corners (radius prop) for a modern, polished look
TIP 3Add a Tooltip component so users can see exact values on hover
TIP 4Use Cell components to color individual bars differently
TIP 5For long category names, switch to a horizontal bar chart layout
Key Recharts Props
PROPTYPEDESCRIPTION
dataarrayArray of objects with your data values
dataKeystringThe key in your data objects to use for bar height
fillstringBar color — accepts hex, rgb, or CSS variable
radius[number,number,number,number]Corner radius [topLeft, topRight, bottomRight, bottomLeft]
stackIdstringGroup bars with the same stackId into a stacked bar
Frequently Asked Questions

What is a diverging stacked bar chart?

A diverging stacked bar chart is a specialized stacked bar chart aligned around a central baseline (typically 0% or neutral). Negative, disagreeing, or unfavorable responses extend to the left, while positive, agreeing, or favorable responses extend to the right.

When should you use a diverging stacked bar chart?

It is the gold standard for visualizing Likert scale survey responses, employee sentiment ratings, customer satisfaction surveys (CSAT), and political polling data where you want to compare positive vs negative sentiment at a glance.

How do you implement a diverging stacked bar chart in Recharts?

Use <BarChart layout='vertical' stackOffset='sign'> with a central <ReferenceLine x={0} stroke='#5c6370' />. Negative categories have negative numerical values (-10, -25) and stack to the left, while positive categories have positive values (+30, +45) and stack to the right.

Related Charts