Implementing shaded areas in plotly for recession and bear-market analysis

Fabian Scheler
August 22, 2023

Bear market smoke gets in one's eyes and it blinds us to buying opportunities if we are too intent on market timing.

There are many ways to study events, but the typical line chart tends to be among the most intuitive. In an earlier post, we, therefore, introduced a handy function that automatically adds recession shading based on the NBER recession indicator to ggplot2 graphics.

Developing this function was relatively straightforward, grace to the geom_rect function in ggplot2. However, a bit of wizardry is required when attempting to achieve the same in plotly given the lack of an equivalent to geom_rect or Matplotlib's fill_between().

One apparently commonly used workaround over which we stumbled is using ggplotly to convert ggplot2-based implementations into plotly charts, which, however, frequently messes with the layout. Other approaches in Python draw rectangles behind the line chart, but we couldn't find any handy and readily applicable R implementation and thus decided to come up with our own workaround (plotlyRec).

Furthermore, we have extended our recession shading function and now allow users to implement likewise shading for bear markets using various definitions (plotlyBear).
The below example was created directly on the quantamental platform using the plotlyRec function and explores the performance of Emerging Market stocks relative to the U.S. stock market during NBER recessions.

Can Emerging Markets perform when the world's largest economy struggles, or does the rest of the world always get a cold when the U.S. sneezes?

Emerging Markets underperformed the S&P 500 during the three most recent U.S. recessions.

Recession shading is used widely but is only sometimes what interests us. Economic downturns occur relatively seldom, and markets tend to anticipate them. As investors, we may therefore be more interested in turning points in various markets and the out- or underperformance of different assets during bear markets.

The following graphics, therefore, demonstrate the use of the ggBear function. In this case, we defined a bear market as a minimum 15% drawdown in the S&P 500 vs its previous high. Again, we plotted the relative performance of the S&P 500 vs the MSCI Emerging Markets Index.

Interestingly, while Emerging Markets underperformed during recessions (GDP contraction), they significantly outperformed the U.S. during the burst of the Dotcom bubble and the 2018 bear market, as well as in the early 90s. With a 10% cutoff, Emerging Markets outperformed during the last 5 of 12 U.S. bear markets.

Unfortunately, not all assets follow the beautiful trajectory of the U.S. stock markets observable during recent decades. How to analyze bear markets when an asset does not rebound to new highs? Well, the plotlyBear function offers a solution for this problem.

As demonstrated in the below example, we included the function to use rolling highs with user-defined window length to define the onset of a "new" bear market within a more extended downturn.

The plotlyBear function supports different bear-market and turning point definitions.
plotlyRec function and example application

plotlyBear function and example application

Subscribe to our newsletter
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.