Search code examples
pythonplotlyplotly-dashplotly-python

Plotly: how to sum the "text" values displayed on a bar chart?


I'm creating a bar chart in Plotly Express and would like to sum the "text" values displayed on the plot.

My data is as follows:

import plotly.express as px
import pandas as pd
df = pd.DataFrame({'Make':['Mercedes', 'BMW', 'Mercedes', 'Mercedes', 'Chrysler', 'Chrysler', 'Chrysler', 'Chrysler', 'BMW', 'Chrysler', 'BMW', 'Mercedes', 'BMW', 'Mercedes'],
                          'Dimension':['Styling', 'Styling', 'Price', 'Styling', 'MPG', 'MPG', 'Styling', 'Styling', 'MPG', 'MPG', 'Price', 'Price', 'Styling', 'MPG'],
                          'Country':['USA', 'USA', 'USA', 'Germany', 'USA', 'USA', 'USA', 'England', 'Germany', 'USA', 'Germany', 'Poland', 'Italy', 'USA'],
                          'LowValue':['64', '61', '70', '65', '59', '68', '63', '57', '58', '55', '69', '63', '69', '61'],
                          'HighValue':['82', '95', '93', '95', '87', '93', '85', '85', '95', '92', '83', '87', '80', '80']})

I plot this data in Plotly Express using the following:

px.bar(df, x='Make', y='LowValue', color='Dimension', 
       barmode='group', text='LowValue')

As you can see, the Styling bar for Mercedes shows two values: 65 and 64 (because those are the underlying data points).

Question: Is there a way to coalesce the underlying data into a single value and only display that single summed up value?

For example, displaying 129 (the sum of the underlying data points) at the top of the Styling bar for Mercedes (instead of displaying 65 and 64).


Solution

  • You could use pandas groupby() to calculate the total LowValue by Make and Dimension before creating the bar chart:

    import plotly.express as px
    import pandas as pd
    
    df = pd.DataFrame({'Make': ['Mercedes', 'BMW', 'Mercedes', 'Mercedes', 'Chrysler', 'Chrysler', 'Chrysler', 'Chrysler', 'BMW', 'Chrysler', 'BMW', 'Mercedes', 'BMW', 'Mercedes'],
                       'Dimension': ['Styling', 'Styling', 'Price', 'Styling', 'MPG', 'MPG', 'Styling', 'Styling', 'MPG', 'MPG', 'Price', 'Price', 'Styling', 'MPG'],
                       'Country': ['USA', 'USA', 'USA', 'Germany', 'USA', 'USA', 'USA', 'England', 'Germany', 'USA', 'Germany', 'Poland', 'Italy', 'USA'],
                       'LowValue': ['64', '61', '70', '65', '59', '68', '63', '57', '58', '55', '69', '63', '69', '61'],
                       'HighValue': ['82', '95', '93', '95', '87', '93', '85', '85', '95', '92', '83', '87', '80', '80']})
    
    df['LowValue'] = df['LowValue'].astype(int)
    
    df1 = pd.DataFrame(df.groupby(by=['Make', 'Dimension'])['LowValue'].sum())
    
    df1.reset_index(inplace=True)
    
    fig = px.bar(df1, x='Make', y='LowValue', color='Dimension', barmode='group', text='LowValue')
    
    fig.show()
    

    enter image description here