Start with var graphs = "{{plot | safe }}";

I have a flask boilerplate that I am using to display graphs at the frontend of the app. However, this code on HTML div class is giving me an error. What specifically am I missing out here

HTML CODE:

                    <div class="layer w-100 pX-20 pT-20">
                      <h6 class="lh-1">Monthly Stats</h6>
                      <div class="chart" id="bargraph">
                        <script>
                          var graphs = {{plot | safe}};
                          Plotly.plot('bargraph',graphs,{});
                        </script>
                      </div>
                    </div>

The Errors I am getting are
1. Identifier string,literal or numeric expected
2. statement expected
3. Unnecessary semicolon
4. Unterminated statement
5. var used instead of let or const
6. unresolved variable ‘plot’
7. Expression is not assignment or call
8. Unresolved variable ‘safe’

This is how my index code looks like

from flask import Flask, render_template,request
import plotly
import plotly.graph_objs as go
import pathlib
import pandas as pd
import numpy as np
import json

app = Flask(__name__)

#create path
PATH = pathlib.Path(__file__).parent
DATA_PATH = PATH.joinpath("data").resolve()

#Data function
def data_used():
    # Import data
    df = pd.read_csv(DATA_PATH.joinpath("fulldata.csv"), low_memory=False)
    return df

#####################################################################################
def create_df():
    # get counts per NAR type
    df_nar = pd.DataFrame(data_used().groupby('Hosp_id')['Document Source'].value_counts())
    df_nar = df_nar.rename({'Document Source': 'Doc count'}, axis='columns')
    df_nar = df_nar.reset_index()

    return df_nar



def create_plot(df_nar):
    # set up plotly figure
    fig = go.Figure()
    # Manage NAR types (who knows, there may be more types with time?)
    nars = df_nar['Document Source'].unique()
    nars = nars.tolist()
    nars.sort(reverse=False)
    # add one trace per NAR type and show counts per hospital
    data = []
    for nar in nars:
        # subset dataframe by NAR type
        df_ply = df_nar[df_nar['Document Source'] == nar]

        # add trace
        fig.add_trace(go.Bar(x=df_ply['Hospital_id'], y=df_ply['Doc count'], name='Document Type=' + str(nar)))

    # make the figure a bit more presentable
    fig.update_layout(title='Document Use per hospital',
                yaxis=dict(title='<i>count of Docuement types</i>'),
                xaxis=dict(title='<i>Hospital</i>'))


    graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)

    return graphJSON

@app.route('/')
def index():

    bar = create_plot(create_df())
    return render_template('index.html', plot=bar)





if __name__ == '__main__':
    app.run(debug = True, port = 8686)

Its Javascript I am using to display the plot on that Div class. the backend has been well coded, I am only getting this error from that section of div class. Anyone experienced it to help