overlay and subplot do not plot (Chart empty)

Summary

I am not a coder so please. I am trying to learn and make a analysis chart myself. I have prepared below code to plot candles with overlay ema20 and volume and macd as sub plot. candles plot but volume and MACD chart is blank. Ema also not plot. can you please suggest me the reason and solution:

selected_stock-5minute-candle.csv
datetime,open,high,low,close
0,2023-05-02 09:00:00,1022.2,1022.2,1022.2,1022.2
1,2023-05-02 09:05:00,1022.2,1022.2,1020.4,1020.4
2,2023-05-02 09:15:00,1022.05,1032.15,1021.6,1031.35

selected_stock-5minute-ema.csv
datetime,ema20
2023-05-02 09:00:00,
2023-05-02 09:05:00,
2023-05-02 09:15:00,

selected_stock-5minute-macd.csv
datetime,macd_fast,macd_slow,macd_hist
2023-05-02 09:00:00,
2023-05-02 09:05:00,
2023-05-02 09:15:00,
2023-05-02 09:20:00,
2023-05-02 09:25:00,
2023-05-02 11:45:00,
.
.
.
2023-05-02 11:50:00,5.165247857378063,8.073360673526318,-2.9081128161482557
2023-05-02 11:55:00,4.751474533183455,7.4089834454577455,-2.6575089122742908
2023-05-02 12:00:00,4.309327632083068,6.78905228278281,-2.479724650699742
2023-05-02 12:05:00,3.981613363333963,6.227564498893041,-2.2459511355590775

selected_stock-5minute-volume.csv
datetime,volume
0,2023-05-02 09:00:00,4937
1,2023-05-02 09:05:00,2212
2,2023-05-02 09:15:00,210658

Steps to reproduce

Blockquote

Code snippet:

# Define the series for the candlestick and volume charts
series_candlestick_chart = [
    {
        "type": "Candlestick",
        "data": candles,
        "options": {
            "upColor": COLOR_BULL,
            "downColor": COLOR_BEAR,
            "borderVisible": False,
            "wickUpColor": COLOR_BULL,
            "wickDownColor": COLOR_BEAR
        }
    }
]

series_ema20_line = [
    {
        "type": "Line",
        "data": ema20,
        "options": {
            "color": 'green',
            "lineWidth": 2,
        }
    }
]

series_volume_chart = [
    {
        "type": "Bar",
        "data": volume,
        "options": {
            "color": volume_colors,
            "priceFormat": {
                "type": "volume"
            },
            "priceScaleId": ""
        },
        "priceScale": {
            "scaleMargins": {
                "top": 0,
                "bottom": 0
            },
            "alignLabels": False
        }
    }
]
seriesMACDchart = [
    {
        "type": 'Line',
        "data": macd_fast,
        "options": {
            "color": 'blue',
            "lineWidth": 2
        }
    },
    {
        "type": 'Line',
        "data": macd_slow,
        "options": {
            "color": 'green',
            "lineWidth": 2
        }
    },
    {
        "type": 'Histogram',
        "data": macd_hist,
        "options": {
            "color": 'red',
            "lineWidth": 1
        }
    }
]

# Define the chart options
chart_multipane_options = [
                                    # Candles -1     chart_multipane_options
    {                               
        "width": 1100,
        "height": 600,
        "layout": {
            "background": {
                "type": "solid",
                "color": "white"
            },
            "textColor": "black"
        },
        "grid": {
            "vertLines": {
                "color": "rgba(197, 203, 206, 0.5)"
            },
            "horzLines": {
                "color": "rgba(197, 203, 206, 0.5)"
            }
        },
        "crosshair": {
            "mode": 0
        },
        "priceScale": {
            "borderColor": "rgba(197, 203, 206, 0.8)"
        },
        "timeScale": {
            "timeVisible": True,
            "timeFormat": "%h:%m:%s",
            "timezone": "Asia/Kolkata",
            "borderColor": "rgba(197, 203, 206, 0.8)",
            "barSpacing": 15
        },
        "watermark": {
            "visible": True,
            "fontSize": 24,
            "horzAlign": "center",
            "vertAlign": "center",
            "color": "rgba(171, 71, 188, 0.3)",
            "text": f"{selected_stock} - {interval}",
        }
    },
    # Add the options for the EMA20 line pane      #  Ema -2            chart_multipane_options
    {                              
        "color": '#FFA500',
        "lineWidth": 2,
    },
    # Volume                    # volume -3 
    {
        "width": 1100,
        "height": 100,
        "layout": {
            "background": {
                "type": "solid",
                "color": "transparent"
            },
            "textColor": "black"
        },

        "timeScale": {
            "visible": False
        },
        "watermark": {
            "visible": True,
            "fontSize": 14,
            "horzAlign": "left",
            "vertAlign": "top",
            "color": "rgba(171, 71, 188, 0.7)",
            "text": "Volume"
            
        }
    },
    # MACD              # MACD 4       chart_multipane_options
    {     
        "width": 1100   ,
        "height": 200,
        "layout": {
            "background": {
                "type": "solid",
                "color": 'white'
            },
            "textColor": "black"
        },
        "timeScale": {
            "visible": False,
        },
        "watermark": {
            "visible": True,
            "fontSize": 14,
            "horzAlign": 'left',
            "vertAlign": 'top',
            "color": 'rgba(171, 71, 188, 0.7)',
            "text": 'MACD',
        }
    }
]

st.subheader("Multipane Chart with overlays")
# Render the candlestick and volume charts
renderLightweightCharts([
    {
        "chart": chart_multipane_options[0],
        "series": series_candlestick_chart + series_ema20_line
    },

    {
        "chart": chart_multipane_options[2],
        "series": series_volume_chart
    },
 
     {
    "chart": chart_multipane_options[3],
    "series": seriesMACDchart        # MACD three lines overlay on each other
    },        

], "multipane")

If applicable, please provide the steps we should take to reproduce the error or specified behavior.

Expected behavior:

Explain what you expect to happen when you run the code above.

Actual behavior:

Explain the undesired behavior or error you see when you run the code above.
If you’re seeing an error message, share the full contents of the error message here.

Debug info

  • Streamlit version: (get it with $ streamlit version)
  • Python version: (get it with $ python --version)
  • Using Conda? PipEnv? PyEnv? Pex?
  • OS version:
  • Browser version:

Requirements file

Using Conda? PipEnv? PyEnv? Pex? Share the contents of your requirements file here.
Not sure what a requirements file is? Check out this doc and add a requirements file to your app.

Links

  • Link to your GitHub repo:
  • Link to your deployed app:

Additional information

If needed, add any other context about the problem here.

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.