Request new feature: Rendering Highchart core in Streamlit

[ielsiu18028]

With the current version of highchart-core, how can I show the chart on Streamlit?
Or can anyone guide me the way to convert the js chart to HTML so that I can render HTML directly on Streamlit?
Thank you so much

[hcpchris]

Hi @ielsiu18028 : Thanks for the question and the feature request! There is not currently a native integration with Streamlit, so unfortunately there is not yet a simple way of saying .to_streamlit() or anything similar. It's a good feature request, hwoever, and something that would definitely add value (we're working on similar integrations with Panel and Plotly Dash already).

So there's no native integration yet, but in the meantime you can definitely assemble the output of Highcharts Core for Python into HTML that can be directly rendered within Streamlit. There are three pieces of HTML code that need to ultimately be rendered in your Streamlit dashboard. I haven't taken a close enough look at Streamlit to provide a suggestion for how to best get this HTML into your Streamlit dashboard, but in general:

1. You will need to load the Highcharts (JS) modules that your chart depends on. The specific combination of modules depends on the features that you are using in your chart, but Highcharts Core for Python you can generate a <script/> tag for you if you call my_chart.get_script_tags(). There are two ways to use this method:

   # Returns a list of <script> tags
   my_script_list = my_chart.get_script_tags()
   
   # Returns a string containing the required Highcharts <script> tags
   my_script_string = my_chart.get_script_tags(as_str = True)

2. You will need an empty div with an id in your Streamlit render. This can be as simple as <div id="container"></div>. This is the <div> where your Highcharts chart will ultimately be rendered.

3. You will need to generate a <script> tag which renders your chart inside your container <div>. The way to do this is:

   1. First, make sure that your chart has the correct container value set:

      my_chart.container = 'container'

   2. Next, generate a <script> tag containing the JS literal from your chart:

      chart_as_str = f'<script>{my_chart.to_js_literal()}</script>'

   3. Insert your new <script> tag into your Streamlit HTML.