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

[kburchfiel]

Description

I would love to make it possible to easily vary the width of vertical bars, or the height of horizontal bars, within a bar chart, to reflect a certain variable (such as the sample size on which that bar is based).

Why should this feature be added?

This would make it easier to visually represent an additional data point (e.g. sample size, monthly revenue, etc.), thus allowing viewers to get more context about a bar.

For example, suppose that you're showing the percentage of individuals in five political parties that support or oppose a certain measure. However, some of these parties have only a small amount of respondents. Varying the thickness of these bars by your sample size would make it clearer that some of your data points are based on a relatively small sample.

Mocks/Designs

Here is an example of what a variable-height horizontal bar chart would look like. (I created this using go.Bar() rather than px.bar(), but this involved a decent amount of additional code, including a custom legend. Being able to customize these heights via a 'bar_width' or 'bar_height' argument within px.bar would be terrific.

[robertclaus]

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!

[kburchfiel]

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 automatically calculate (given a list of bar widths) the correct y values to use on its end. The resulting chart would look something like this:

[camdecoster]

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