CandleStick & MACD Indicator using plotly.graph_object

[bianca]

Hello!

I have a csv file with data about crypto symbol such as timestamp, open, high, low, close, volume and I wanna display a Candlestick with MACD indicator.

I have the following function to calculate MACD indicator :

    def calculate_macd(self):
        if self.df is not None and not self.df.empty:
            self.df['12EMA'] = self.df['close'].ewm(span=12, adjust=False).mean()
            self.df['26EMA'] = self.df['close'].ewm(span=26, adjust=False).mean()
            self.df['MACD'] = self.df['12EMA'] - self.df['26EMA']
            self.df['Signal Line'] = self.df['MACD'].ewm(span=9, adjust=False).mean()

And the following code to display the Candlestick:

    def show_candlestick_chart(self):
        self.calculate_macd()
        if self.df is not None and not self.df.empty:
            fig = make_subplots(rows=2, cols=1, shared_xaxes=True, vertical_spacing=0.2, row_heights=[0.7, 0.3])

            candlestick_trace = go.Candlestick(x=self.df['timestamp'],
                                               open=self.df['open'],
                                               high=self.df['high'],
                                               low=self.df['low'],
                                               close=self.df['close'],
                                               name='Candlestick')

            macd_trace = go.Scatter(x=self.df['timestamp'], y=self.df['MACD'], mode='lines', line=dict(width=2),
                                    name='MACD')
            signal_trace = go.Scatter(x=self.df['timestamp'], y=self.df['Signal Line'], mode='lines',
                                      name='Signal Line')

            fig.add_trace(candlestick_trace, row=1, col=1)
            fig.add_trace(macd_trace, row=2, col=1)
            fig.add_trace(signal_trace, row=2, col=1)

            fig.update_layout(height=1000)
            self.browser.setHtml(fig.to_html(include_plotlyjs='cdn'))
        else:
            self.browser.setHtml("<p>No data available for plotting.</p>")

And I get the following output :

Fig 1.

The problem is that I don't want to display the CandleStick and MACD in different plots, just a single plot including both, like this:

Fig 2.

I modified the code as it follows :

    def show_candlestick_chart(self):
        self.calculate_macd()
        if self.df is not None and not self.df.empty:
            fig = make_subplots(rows=1, cols=1, shared_xaxes=True, vertical_spacing=0.05)

            candlestick_trace = go.Candlestick(x=self.df['timestamp'],
                                               open=self.df['open'],
                                               high=self.df['high'],
                                               low=self.df['low'],
                                               close=self.df['close'],
                                               name='Candlestick')

            macd_trace = go.Scatter(x=self.df['timestamp'], y=self.df['MACD'], mode='lines', line=dict(width=2),
                                    name='MACD')
            signal_trace = go.Scatter(x=self.df['timestamp'], y=self.df['Signal Line'], mode='lines',
                                      name='Signal Line')

            fig.add_trace(candlestick_trace, row=1, col=1)
            fig.add_trace(macd_trace, row=1, col=1)
            fig.add_trace(signal_trace, row=1, col=1)

            fig.update_layout(height=800)
            self.browser.setHtml(fig.to_html(include_plotlyjs='cdn'))
        else:
            self.browser.setHtml("<p>No data available for plotting.</p>")

But my output is like this :

Fig 3.

Any ideas how to solve this?