Scale (Axis) Breaks with DevExtreme HTML5 Chart and Range Selector (v17.2)

This post covers the DevExtreme Chart and Range Selector widgets, which are available for jQuery, as Angular components, ASP.NET MVC and ASP.NET Core MVC controls, and as Knockout bindings.

In v17.2, the dxChart and dxRangeSelector controls introduce a small but very useful feature: scale breaks a.k.a. axis breaks. This solves the problem where values in a chart have such a high amplitude that some series points are rendered very small, possibly almost invisible but certainly too small to interact with.

Scale breaks make such charts more useful by skipping parts of the scale. You can declare a collection of custom scale breaks, which is supported for both the value and the argument axis. The breakStyle property allows visual customization of the break appearance.

valueAxis: {
  ...
  breaks: [{
    startValue: 1,
    endValue: 14.6
  }, {
    startValue: 95,
    endValue: 318
  }, {
    startValue: 17.2,
    endValue: 95
  }],
  breakStyle: {
    line: 'waved' // default value
  }
}

The widget can also calculate the scale breaks automatically for the value axis:

valueAxis: {
  ...
  autoBreaksEnabled: true,
  maxAutoBreakCount: 3
}

Finally, custom scale breaks are implemented for the dxRangeSelector widget:

scale: {
  startValue: 15000,
  endValue: 150000,
  breaks: [{
    startValue: 20000,
    endValue: 35000
  }, {
    startValue: 100000,
    endValue: 145000
  }]
}

Try it now!

You can get v17.2 right now via npm.

npm install devextreme@17.2

Please let us know your thoughts about this feature!