Introduction to Plotly

introduction-plotly-11.py

# 10 Add multiple plot into one frame

# Calculate the accumulated percentage
df['Percentage'] = (df['Sales'].cumsum() / df['Sales'].sum()) * 100

# Create object of figure
fig = make_subplots(
    specs = [
        [
            {
                'secondary_y': True
            }
        ]
    ]
)

# Create a bar plot
fig.add_trace(
    go.Bar(
        x = df['Fruit'],
        y = df['Sales'],
        marker_color = df['Color'],
        width = widths,
        hovertemplate = 
        'Number of sales: %{y:}<br>' +
        '<extra></extra>'
    )
)

# Add time-series plot
fig.add_trace(
    go.Scatter(
        x = df['Fruit'],
        y = df['Percentage'],
        name = 'Accumulated percentage',
        mode = 'lines+markers',
        marker = {
            'line': {
                'width': 5,
            },
            'size': 3,
            'color': '#525252'
        },
        line = {
            'color': '#525252',
            'width': 3
        },
        line_shape = 'spline',
        hovertemplate = 
        'Accumulated percentage: %{y:.3f%}%<br>' +
        '<extra></extra>'
    ),
    secondary_y = True
)

# Horizontal line
fig.add_hline(
    y = avg_sales,
    line_dash = 'dot',
    col = 'all',
    annotation_text = 'Average sales ({} units)'.format(round(avg_sales, 2)),
    annotation_position = 'right top'
)

# Config for title, background, legend etc
fig.update_layout(
    plot_bgcolor = 'white',
    font = {
        'color': '#797979'
    },
    xaxis = {
        'title': '<b>Fruit</b>',
        'linecolor': '#FFFFFF'
    },
    yaxis = {
        'title': '<b>Sales</b>',
        'linecolor': '#FFFFFF'
    },
    showlegend = False,
    hovermode = 'x'
)

# Flip the horizontal axis
fig.update_xaxes(
    tickangle = 270
)

# Set range of vertical axis
fig.update_yaxes(
    range = [0, 30000]
)

# Set custom y-axis labels
fig.update_yaxes(
    title_text = 'Accumulated percentage (%)',
    secondary_y = True,
    range = [0, 110]
)

# Add title
fig.add_annotation(
    text = '<b><span style="color:#981220">Fruit with the most sales</span></b><span style="color:#797979"> in Fresh Fruit Store, 2021</span>',
    xref = 'paper',
    yref = 'paper',
    x = -0.095,
    y = 1.325,
    showarrow = False,
    align = 'left',
    xanchor = 'left',
    font = {
        'size': 18,
        'color': '#242526'
    }
)

# Add subtitle 
fig.add_annotation(
    text = 'Data is from 5th January to 24th December 2021',
    xref = 'paper',
    yref = 'paper',
    x = -0.095,
    y = 1.24,
    showarrow = False,
    align = 'left',
    xanchor = 'left',
    font = {
        'size': 11
    }
)

# Add description
fig.add_annotation(
    text = "In 2021, bananas become the most favorite fruit, as 25,750 units were sold or about 18.9%. The number of sales for bananas and apples are<br>quite gaping, where 15,750 apples were sold. The rest of fruits sold at 10,000 to 14,500 units in 2021 with an average of around 11,800 units",
    xref = 'paper',
    yref = 'paper',
    x = -0.095,
    y = 1.175,
    showarrow = False,
    align = 'left',
    xanchor = 'left',
    font = {
        'size': 13,
        'color': '#242526'
    }
)

# Add highlight text
fig.add_annotation(
    text = 'Almost 51.2% of total sales in<br>2021 comes from big four fruits',
    xref = 'paper',
    yref = 'paper',
    x = 0.1,
    y = 0.7,
    showarrow = False,
    align = 'center',
    xanchor = 'left',
    font = {
        'size': 13,
        'color': '#242526'
    }
)

# Show graph
fig.show()