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

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!

no comments
No Comments

Please login or register to post comments.