JavaScript Charts - BarGauge & Funnel: Improved Label Positioning (v19.1)

DevExtreme Team Blog
01 July 2019

As we mentioned in a previous blog post, we've added quite a number of legend/label related enhancements to our JavaScript Charts & Gauge visualization library.

In this post, I will highlight another new BarGauge and Funnel chart related feature – improved label overlap support.

Label Overlapping

In both our BarGauge and Funnel Charts, labels can overlap when chart values are close to one another.  With our most recent update (v19.1), we’ve added a resolveLabelOverlapping option so you can better control the manner in which individual labels overlap.

Funnel Chart

In the Funnel, the resolveLabelOverlapping property accepts the following options:

  • shift (default)
  • hide
  • none
If enough room does not exist during a 'shift', the chart will hide labels as needed.

Bar Gauge

In the Bar Gauge, the resolveLabelOverlapping property accepts the following options:

  • hide (default)
  • none

Angular, Vue, React, ASP.NET MVC / Core and more

As you know, DevExtreme supports multiple web development frameworks. All enhancements described herein are available for: Angular, Vue, React, jQuery, Knockout, ASP.NET MVC and .NET Core.

Test It Now (and provide feedback)

Test-drive the public release now. Use the npm package:

npm install --save devextreme@19.1

We’d love to hear from you – please tell us what you think about these enhancements below.

FREE DevExpress Xamarin UI Controls

Deliver high-impact native mobile apps with our feature-rich Data Grid, Scheduler, Chart, TabView, Editors, and utility controls. Reserve your free copy today!
No Comments

Please login or register to post comments.