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 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.