Problem using Streamlit Highcharts

🧩 Custom Components
1

Hello everyone. I faced the problem when using streamlit_highcharts for my application. The chart is not displayed until 30s after the reload, and the warning message is like this. After 30s, the chart is loaded.
Can anyone help me to understand why I faced this problem?
image

2

Hi @Ngan_Ho

Could you share the code of the app.py and requirements.txt file so that others in the community can help see and identify the source of this.

Thanks!

3

Hello @dataprofessor . Thank you for your reply.

Here is my example app.py and requirements.txt I use:

app.py

import streamlit as st
import streamlit_highcharts as hct
    
chart = {
    "chart": {"type": "waterfall"},
     'title': {'text': 'Profit and Loss'},
 'xAxis': {'type': 'category'},
 'yAxis': {'title': {'text': '$'}},
 'legend': {'enabled': False},
 'tooltip': {'pointFormat': '<b>€ {point.y:,.2f}</b><br/><b>{point.perc:.2f}%</b> of NSV',
  'followPointer': True},
 'series': [{'name': '',
   'data': [{'name': '<b>Net Sales Value</b>',
     'y': 5000,
     'color': '#005959'},
    {'name': 'COGS',
     'y': -2000,
     'color': '#CB333B'},
    {'name': '<b>Gross Margin</b>',
     'y': 3000,
     'color': '#005959',
     'isSum': True},
    {'name': 'Demurrage Cost',
     'y': -100,
     'color': '#CB333B'},
    {'name': 'Storage Cost',
     'y': -100,
     'color': '#CB333B'},
    {'name': 'Handling Cost',
     'y': -100,
     'color': '#CB333B'},
    {'name': 'Transport Cost',
     'y': -100,
     'color': '#CB333B'},
    {'name': '<b>CBM</b>',
     'y': 3600,
     'color': '#005959',
     'isSum': True},
    {'name': 'IOC',
     'y': -200,
     'color': '#CB333B'},
    {'name': '<b>CBM after IOC</b>',
     'y': 3400,
     'color': '#005959',
     'isSum': True},
    {'name': 'SG&A',
     'y': -200,
     'color': '#CB333B'},
    {'name': '<b>EBIT after IOC</b>',
     'y': 3200,
     'color': '#005959',
     'isSum': True}],
   'dataLabels': {'enabled': True,
    'verticalAlign': 'top',
    'y': -30,
    'style': {'fontSize': '9px', 'fontWeight': 'bold'},
    'color': 'black'},
   'pointPadding': 0,
   'borderRadius': 3,
   'colorByPoint': True}]}


hct.streamlit_highcharts(chart, height = 522)

requirements.txt

streamlit==1.24.0
pandas==2.1.3
plotly==5.9.0
streamlit-aggrid==0.3.4.post3
Pillow==9.5.0
seaborn==0.12.2
numpy==1.26.2
highcharts-core==1.5.1
streamlit-highcharts==0.2.0
tzlocal==4.3.1
streamlit-extras==0.3.5
streamlit-folium==0.17.3
folium==0.15.1
branca==0.7.0
openpyxl==3.1.2

Currently, I need to wait exact 1 minute for the chart to load like this:

image
image887×684 22.3 KB

It’s quite annoying because if I want to adjust the filter, it will take me 1 minute to load the chart. I have had this problem since last Friday, while before that day everything was ok.
One more information is that I can not access to the website highcharts.com since Friday and don’t know if it’s relevant to the problem.

Thank you in advance.