How to embedding a pygal chart on a flask app?

I'm working with pygal and I want to embed a pygal chart in a flask app.

However, I want to put a top-bar on the flask app. I don't get any errors, but only the top bar is shown. Nothing else is shown. The pygal chart does not even render.

Here's my code for your reference:

import pygal
from flask import Flask
import webbrowser as web
import socket

def test(name=None):
    def top_bar():
        return('''
               <style>
                
               .top_bar {
                 position: fixed;
                 top: 0px;
                 left: 0px;
                 right: 0px;
                 width: 100%;
                 background-color: #4CAF50;
                 color: white;
                 text-align: center;
                }
                
             </style>
             
             <div class="top_bar">
                 <h1 style="font-size:25px"><p style="font-family:verdana">Test!</p></h1>
             </div>
             
             ''')        
               
    
    app = Flask(__name__)
    
    def __info__():
        hostname = socket.gethostname()
        ip = socket.gethostbyname(hostname)
        port = int(5969)
        all_val = [str(ip),port]
        return all_val

    all_val = __info__()
    
    
    
    @app.route('/')
    def __main__():
        line_chart = pygal.Line(width=550, height=350,explicit_size=True)
        line_chart.add('Firefox', [None, None,    0, 16.6,   25,   31, 36.4, 45.5, 46.3, 42.8, 37.1])
        line_chart.add('Chrome',  [None, None, None, None, None, None,    0,  3.9, 10.8, 23.8, 35.3])
        line_chart.add('IE',      [85.8, 84.6, 84.7, 74.5,   66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1])
        line_chart.add('Others',  [14.2, 15.4, 15.3,  8.9,    9, 10.4,  8.9,  5.8,  6.7,  6.8,  7.5])
        #line_chart.render()
        # Mixed
        return(f'''
               {line_chart.render_response()}
               {top_bar()}
               '''
               )
               
    __main__()
    url=(f'http://{all_val[0]}:{all_val[1]}')
    web.open(url)
    app.run(all_val[0],all_val[1])
        
test()

Solution

See the Output section of the docs.

The render_response method returns a response object which is designed to be returned directly from a Flask route, not manually added to a template as per your code. To stick with your own approach, you could do this with the render_data_uri method. For example, by changing the end of your __main__ function to instead:

        # Mixed

        output = f'''{top_bar()}
               <img src="{line_chart.render_data_uri()}" />'''
        return output