[FEATURE]: Make it possible to base heights of horizontal bars (and widths of vertical bars) on a given variable #5720

Activity

1. kburchfiel

   added

   featuresomething newsomething new

   on Sep 8, 2026
2. robertclaus commented on Sep 8, 2026

   

   robertclaus

   on Sep 8, 2026

   More actions

   Great news! Plotly.js and Plotly.py should already support this!

   There is an example of it at: https://plotly.com/python/bar-charts/ under the subtitle "Customizing Individual Bar Widths".

   import plotly.graph_objects as go
   
   fig = go.Figure(data=[go.Bar(
       x=[1, 2, 3, 5.5, 10],
       y=[10, 8, 6, 4, 2],
       width=[0.8, 0.8, 0.8, 3.5, 4] # customize width here
   )])
   
   fig.show()
   

   If this works for your use-case please feel free to close this issue. If not, please let us know what case it didn't work in for you!
3. kburchfiel

   changed the title [-][FEATURE]: Make it possible to base heights of horizontal bars (and widths of vertical bars) to be modified on a given variable[/-] [+][FEATURE]: Make it possible to base heights of horizontal bars (and widths of vertical bars) on a given variable[/+] on Sep 8, 2026
4. kburchfiel commented on Sep 8, 2026

   

   kburchfiel

   on Sep 8, 2026

   Last edited by kburchfiel

   Author

   More actions

   Thank you for the prompt response! Here's some sample code (which should be reproducible on your end) for a fake dataset that illustrates my issue. The code creates a horizontal bar chart that shows what % of respondents to a survey, by the color of their car, provided various responses to the question "I enjoy driving fast."

   import plotly.graph_objects as go
   import pandas as pd
   import plotly.express as px
   
   df = pd.read_csv('https://raw.githubusercontent.com/ifstudies/carsurveydata/refs/heads/main/car_survey_updated.csv')
   
   # Reducing the number of black-car drivers in the table for 
   # demonstration purposes:
   df = pd.concat([df.query("Car_Color in ['Black', 'White']"), df.query("Car_Color == 'Red'").sample(frac=0.4)]).reset_index()
   df['Car_Color'].value_counts()
   
   df_pivot = df.pivot_table(index = ['Car_Color', 
   'Response_Sort_Map', 'Enjoy_Driving_Fast'], values = ['Weight', 'Count'],
   aggfunc = 'sum').reset_index()
   df_pivot['Pct'] = 100*(
   df_pivot['Weight'] / df_pivot.groupby('Car_Color')[
   'Weight'].transform('sum'))
   df_pivot['Responses_for_Car_Color'] = df_pivot.groupby('Car_Color')[
   'Count'].transform('sum')
   
   unique_responses = df_pivot['Enjoy_Driving_Fast'].unique()
   response_color_map = {unique_responses[i]:px.colors.qualitative.Plotly[i] 
   for i in range(len(unique_responses))}
   
   df_pivot['Response_Color'] = df_pivot['Enjoy_Driving_Fast'].map(
   response_color_map)
   
   
   df_pivot['Rounded_Pct'] = df_pivot['Pct'].round().astype('int')
   df_pivot
   
   go.Figure(data=[go.Bar(y=df_pivot['Car_Color'], x = df_pivot['Pct'], 
   text = df_pivot['Rounded_Pct'], 
   # width = df_pivot['Responses_for_Car_Color']
   marker={'color':df_pivot['Response_Color']}, orientation = 'h')],
   layout = {'height':600, 'width':800}
   )
   
   fig_data = [go.Bar(y=df_pivot['Car_Color'], x = df_pivot['Pct'], 
   text = df_pivot['Rounded_Pct'], showlegend = False,
   # width = df_pivot['Responses_for_Car_Color']
   marker={'color':df_pivot['Response_Color']}, orientation = 'h')]
   
   # Adding a custom legend:
   # This is based off the response by akroma at
   # https://community.plotly.com/t/adding-custom-legend-in-plotly/65610/3
   for key in response_color_map:
       fig_data.append(go.Scatter(mode = 'markers', name = key,
                                  # Without the following two items,
                                  # no markers will appear within the legend:
                                  x=[None], y = [None],
                                  marker={
                                      'size':10,'symbol':'square',
                                      'color':response_color_map[key]}))
   
   go.Figure(data=fig_data,
   layout = {'height':600, 'width':800, 'title':'% of drivers, by car \
   color, who agree with the statement "I enjoy driving fast"'}
   )
   

   Here's what the figure looks like:

   

   Let's say that I want to adjust the height of each bar based on the number of respondents to the survey (407, 341, and 124 for Black, White, and Red, respectively). If I attempt to do so using the following code:

   go.Figure(data=[go.Bar(y=df_pivot['Car_Color'], x = df_pivot['Pct'], 
   text = df_pivot['Rounded_Pct'], 
   width = df_pivot['Responses_for_Car_Color'],
   marker={'color':df_pivot['Response_Color']}, orientation = 'h')],
   layout = {'height':600, 'width':800}
   )
   

   I end up with this output:

   

   I think the main issue here is that my IV field is categorical, whereas the example within Plotly's documentation uses numeric 'x' and 'y' fields.

   So ideally, it would be great if Plotly could use a field with numerical values to automatically calculate the correct y values to use on its end. The resulting chart would look something like this:

   
5. camdecoster commented on Sep 9, 2026

   

   camdecoster

   on Sep 9, 2026

   Contributor

   More actions

   Thanks for that clarification. Let us dig into it a bit more and follow up.

   ❤️React with ❤️1Reacted by Kenneth Burchfiel
6. kburchfiel commented on Sep 9, 2026

   

   kburchfiel

   on Sep 9, 2026

   Author

   More actions

   Wonderful, thank you! I also realized that I could skip the custom-legend component by adding each group of bars individually via fig.add_trace(). That being said, being able to have this kind of functionality in Plotly Express would be awesome, since that option usually allows me to create charts more quickly.

   👍React with 👍1Reacted by Cameron DeCoster
7. camdecoster

   added

   P3backlogbacklog

   size: 5

   on Sep 15, 2026
8. camdecoster

   self-assigned this

   on Sep 15, 2026
9. camdecoster

   added

   enhancement

   on Sep 16, 2026