Accepted answer

This would require quite a bit of additional work. Here's an outline of what you would have to do.

  • Create two scales, one for the lower part and one for the upper. Set domains and ranges accordingly.
  • Pass values to the lower scale, capping them at the maximum domain value such that bars that are longer will reach the maximum.
  • Pass values to the upper scale, filtering those that are lower than the minimum.

You basically need to create two graphs that are aligned with each other to give the impression that there's just one. If you keep that in mind, doing it shouldn't be too difficult.

Here's a quick and dirty proof of concept that uses the linear scale's .clamp(true) to prevent the bars from becoming too long for values outside the domain.


The d3fc-discontinuous-scale component adapts any other scale (for example a d3 linear scale) and adding the concept of discontinuities. These discontinuities are determined via a 'discontinuity provider', which can be used to create one or more 'gaps' in a scale.

For example, to remove a range, you can construct a scale as follows:

var scale = scaleDiscontinuous(scaleLinear())
    .discontinuityProvider(discontinuityRange([50, 75]))

Here is a complete example that shows how to use this to create a 'break' in a scale in order to render values that have large gaps in their overall range.

Related Query

More Query from same tag