JavaScript Charts & Gauges - Legend Customization, Label Word-Wrap, and Other Enhancements (v19.1)

DevExtreme Team Blog
24 June 2019

Thanks to great feedback from users such as yourself, we’ve extended the capabilities of our JavaScript Chart and Gauge widgets with the following new features (v19.1).

Legend

  • Customize Legend Items - Use the new legend.customizeItems callback to change the order, text, and visibility of legend items.

DevExtreme Charts Legend Customization

Demo

  • Legend Title - A legend title can now be specified and configured using the legend.title option. You can customize the title's appearance and its position. You can also add a subtitle as needed. This new option includes the same capabilities as the widget's root title option.

  • Legend in BarGauge - Our BarGauge widget can now display a legend.

Demo

DevExtreme - Legend in BarGauge

Demo

Word-wrap

In v19.1, we added the wordWrap and textOverflow options to enable word-wrap within the Title and Chart axis, PieChart, Funnel, and TreeMap labels.

DevExtreme Charts Word Wrap

These options are similar to CSS word-wrap and text-overflow properties. Refer to the following two help topics for more information: wordWrap and textOverflow.

Note: A minor breaking change was introduced when we created this feature. To learn more, please review the following article: BC4997 - Long Titles and Chart axis, PieChart, Funnel, and TreeMap labels can now be wrapped

Other features

  • Display a tooltip only when a point is hovered:

DevExtreme Charts Tooltip

Documentation - Demo

  • Overlapped Bars - This feature allows you to create a TimeLine chart or an Overlapped Bar chart.

DevExtreme Charts Overlapped Bars

Documentation - Demo

  • Manage exported chart layout (layout by columns, etc.)

Documentation - Demo

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.

Watch the Webinar

To learn more about all JavaScript related features introduced in our v19.1 release, please watch our "New in v19.1 - DevExtreme HTML / JS Controls" webinar.

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.

2 comment(s)
Tomas Rimkus
Tomas Rimkus

Demo link for sticky hovering leads to the documentation page.

25 June, 2019
Pavel Gruba (DevExpress)
Pavel Gruba (DevExpress)

Thank you, Tomas, we've fixed the link!

26 June, 2019

Please login or register to post comments.