Wrap Labels for the Trend Indicator

[tlmille2]

When your labels are a long number of character's, with underscores, the Trend Indicator doesn't wrap the labels. The long label names will then 'misbehave' their css properties. Padding the Trend Indicator is a temporary fix, but it would be nice if a trend indicator can support wrapping of labels.

[MarcSkovMadsen]

Hi @tlmille2

Thanks for reporting.

It would help a lot of you provided a minimum, reproducible example and a screenshot of the problem. Could you do that?

And please add the css of the temporary fix or a true fix. Thanks.

Thanks.

[tlmille2]

@MarcSkovMadsen - Here's a reproducible example and screenshot

Example

import pandas as pd
import panel as pn
  
data = [[1, 10, 15], [2, 15, 20], [3, 20, 25], 
       [4, 25, 30], [5, 30, 35], [6, 35, 40], 
       [7, 40, 45], [8, 45, 50], [9, 50, 55]]
  
df = pd.DataFrame(data, columns = ['week', 'TEST_LONG_NAME_WITH_UNDERSCORE_1', 'TEST_LONG_NAME_WITH_UNDERSCORE_2'])

columns = df.columns

list_of_trend = []

for i in columns:
    data = df[['week', i]]
    data = data.rename(columns={"week": "x", i: "y"})
    
    trend = pn.indicators.Trend(title=i, data=data, width=200, height=200, plot_type='area')
    
    list_of_trend.append(trend)
    
pn.Row(list_of_trend[0], list_of_trend[1], list_of_trend[2])

Temporary Fix Using Margins

The temporary fix is to add margins to the indicator widget

import pandas as pd
import panel as pn
  
data = [[1, 10, 15], [2, 15, 20], [3, 20, 25], 
       [4, 25, 30], [5, 30, 35], [6, 35, 40], 
       [7, 40, 45], [8, 45, 50], [9, 50, 55]]
  
df = pd.DataFrame(data, columns = ['week', 'TEST_LONG_NAME_WITH_UNDERSCORE_1', 'TEST_LONG_NAME_WITH_UNDERSCORE_2'])

columns = df.columns

list_of_trend = []

for i in columns:
    data = df[['week', i]]
    data = data.rename(columns={"week": "x", i: "y"})
    
    trend = pn.indicators.Trend(title=i, data=data, width=200, height=200, plot_type='area', margin=(25, 50))
    
    list_of_trend.append(trend)
    
pn.Row(list_of_trend[0], list_of_trend[1], list_of_trend[2])

[philippjfr]

Thanks @tlmille2!