While the text rotation and truncation features of JET Charts are effective when attempting to render categorical axis labels in the limited axis space, we found room for optimizing how much immediately readable information can be presented in the categorical axis by text-wrapping the axis labels. With our new JET 2.0.0 release, we have provided the ability for horizontal and vertical categorical axis labels to wrap when possible.

blog_waterfall.PNG

The default label wrapping feature is delimited by spaces and controlled by setting the CSS white-space property on xAxis.tickLabel.style. By default, horizontal and vertical categorical axis labels will be capable of text-wrapping. This feature can be turned off by setting the white-space property as 'noWrap'. In addition, applications can also use the non-breaking space character within label names to have control over where the text will be allowed to wrap.

 

<!-- HTML Snippet. Do not forget to require the 'ojs/ojchart' component in your main.js, and declare group and series data. -->
<!-- Turning off categorical axis label wrapping. -->
<div data-bind="ojComponent: { 
  component: 'ojChart',
  type: 'bar',
  series: chartSeriesData,
  group: chartGroupData,
  xAxis: {tickLabel: {style: 'white-space:noWrap'}}
}">
</div> 






 

 

Expected Behavior

The expected behavior for text-wrapping prioritizes displaying as much useful label information as possible.

 

     Example 1. Untruncated, horizontal text is prioritized.

     Horizontal axis labels will text wrap to avoid both rotation and truncation. Vertical axis label text do not rotate, and will text wrap to avoid truncation.

  blog_icecream1.PNGblog_icecream2.PNG

 

     Example 2. Truncated text is preferred over label skipping.

     When text-wrapping, rotated horizontal labels and vertical labels will forgo wrapping and/or truncate as necessary to minimize label skipping and maximize how many axis labels are shown.

blog_icecream3.PNG

 

Hierarchical Labels

Text-wrapping will also apply when hierarchical categorical labels are used, where it can become even more beneficial. In addition to maximizing how much data is shown in each level, text-wrapping will maximize how many levels of labels are able to render.

 

Hierarchical Label Data Set without Text Wrapping
hierachical_horiz_no_wrapping.PNG
Hierarchical Label Data Set with Text Wrapping
hierachical_horiz_wrapping2.PNG