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

Oliver's Blog
20 November 2017

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.

Chart without scale breaks

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 

Chart with scale breaks

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

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

Range selector with scale breaks

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!

Free DevExpress Products - Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.
No Comments

Please login or register to post comments.