Managing negative values on the Stacked Bar Chart

[zauzaj]

Hey @plouc 👋

I'm currently facing a challenge with the stacked bar chart in @nivo/bar, specifically around how negative Y-axis values are handled in a diverging layout.

I have two series:

• Installments (always positive)

• Refunds (always negative)

Here's a data structure:

[
  {id: '2025-06-29', label: 'Jun 29, 2025', Installments: 1184666.65, Refunds: -7500}
  {id: '2025-07-06', label: 'Jul 6, 2025', Installments: 1219666.65, Refunds: 0}
  {id: '2025-07-13', label: 'Jul 13, 2025', Installments: 1235166.65, Refunds: -7500}
  {id: '2025-07-20', label: 'Jul 20, 2025', Installments: 1253666.65, Refunds: -7500}
  {id: '2025-07-27', label: 'Jul 27, 2025', Installments: 1263666.65, Refunds: -7500}
  {id: '2025-08-03', label: 'Aug 3, 2025', Installments: 1277666.65, Refunds: 0}
]

I’d like to display custom Y-axis ticks with separate intervals for positive and negative values, such as:

• Positive side: 1m, 1.2m, 1.4m, etc. (exactly how it is today)

• Negative side: -2500, -5000, -7500

So that both scales are visually meaningful and accurately reflect the data.

❌ The Problem:

Even when I manually set min and max in valueScale and pass custom tickValues to axisLeft, Nivo still distributes ticks uniformly across the full range.

This results in something like:

• A visible tick at -200k, but my actual lowest value (-7500) is barely visible or completely off-chart

❓My Question:

Is there a way to use the @nivo/bar stacked chart (with diverging values) and:

• Fully control the Y-axis ticks on both sides of 0

• Use different intervals for positive and negative ranges

• Ensure proper bar rendering for small negative values like -7500

Any recommended workaround or guidance would be greatly appreciated.

Thanks for all your work on Nivo 🙏