Wrapping Functionality for X and Y Axis Labels

[mrinasugosh]

Detailed description

This is a feature request for wrapping functionality on Carbon Labels in the X and Y axis of the line graph.

This issue is related to the Line Graph Component.

When adjusting the css on the svg text (max width) expected the label to wrap after a certain width. Instead the label didn't

Version: Carbons-Addons-Data-Viz-React 1.22.0

Team: IBM Cloud Lab's UIM Team

Steps to reproduce the issue

1. Create a Line Graph
2. Adjust the CSS to rotate the label's on x-axis to be horizontal
3. Adjust the CSS to set max width (label doesn't wrap)

Details:

Based on User Feedback, we decided to have horizontal labels on the x-axis instead of the default diagonal labels. As shown in the graph below, with some css edits we can rotate the text to appear horizontally. The issue is when we try to wrap the date and time label in two separate lines.

Things we have tried:

1. CSS max-width (!important)

   • max-width didn't work because Line Graph Charts are built on top of the D3 Charts. D3 has an override that needs a separate wrap function. The general norm has been to use the following implementation: https://bl.ocks.org/mbostock/7555321

2. New Line character as part of the string passed in

   • Tried editing the time-format prop by adding a '\n' character between date and time. This didn't work because '\n' is not one of the string specifiers d3 supports. https://github.com/d3/d3-time-format#locales

Labels

enhancement
help wanted