Plotly Scatter Plot Text as HTML/CSS

allsyntax · November 7, 2022, 8:07pm

I have a python script that builds the plotly chart on the python side, and puts the figure as HTML in a local HTML document. I would like to have a chart series for notes, and use a font awesome icon to mark where (at date) each note exists. However, on the test text appears. The font awesome icon does not display. Sample code below:

        fig.add_trace(go.Scatter(x=df["DATE"], y=df["Note"],
                       mode="lines+text",
                       name="Lines and Text",
                       text="<i class='fa fa-home'>test</i>",
                       textposition="top center"
        ))

It seems the text appears italic as well. I don’t gather that the i is recognized as icon. But it does seem to execute as HTML, because if I use text="<b>bold text</b>", then I do see bold text in the plot. Any help would be appreciated. Thanks

jinnyzor · November 8, 2022, 5:33pm

Hello @allsyntax,

Are you importing font awesome library so it will recognize the class?

Also, if you are creating html pages, you could look into Dash for it. Or are you saving the html files to create some sort of history?

allsyntax · November 8, 2022, 6:57pm

@jinnyzor - Thanks for your reply. I am not importing the FA library. Do I need to include an external style sheet? I wasn’t sure that this is required, as I anticipated plotly would pass along the HTML (once it’s created via:fig.to_HTML()) for the icon (<i class='fa fa-home'></i>). Then, when the plot is viewed in my HTML document (which has the style sheet linked up), it would see that HTML, and interpret it to show the icon.

If it’s not possible - alternate idea 1:
I use BeautifulSoup to place the plot into a designated div container (replace empty div with div + plotly html). I have been thinking that if plotly isn’t generating executable HTML for text, that might be able to first set a dummy placeholder (like: text="zzzzz", and then, use BeautifulSoup to replace that with the HTML I need.

If it’s not possible - alternate idea 2:
Use the image of the icon instead. However, my DF is large, and it seems that putting the image as an array isn’t possible, that a loop would be required. I’m concerned this would significantly slow down the performance.

jinnyzor · November 8, 2022, 7:23pm

Yes. You should include the external style sheet. Try that and then choose the other options if that doesn’t work.

allsyntax · November 9, 2022, 2:52pm

@jinnyzor - I’m not finding resources on including external CSS for python plotly. I only see info on plotly dash - which I am not using.

import plotly
import plotly.express as px
import plotly.graph_objects as go

jinnyzor · November 9, 2022, 3:13pm

Here, give this a shot for your export to html:

import plotly.express as px
df = px.data.gapminder().query("year == 2007").query("continent == 'Europe'")
df.loc[df['pop'] < 2.e6, 'country'] = 'Other countries' # Represent only large countries
fig = px.pie(df, values='pop', names='country', title='Population of European continent')
fig.write_html('test.html')

with open('test.html', 'r') as f:
    raw = f.read()
    fixed = raw.replace('<head>', '<head><link rel="stylesheet" '
                                  'href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"></link>')

with open('test.html', 'w') as f:
    f.write(fixed)

This replaces the head to import the stylesheet.

allsyntax · November 9, 2022, 3:41pm

There might be some misunderstanding. I do have the font awesome stylesheet linked in my HTML doc. This is where the plotly fig. html ends up- and is viewed in a browser. That’s why I was thinking it should see <i class='fa fa-home'>test</i> and show the icon. Instead, italicized “test” appears; if I remove test text, icon still doesn’t show. But if I do text="<b>test</b>" then bold text actually does appear. So it seems to be executing HTML, but doesn’t seem to recognize <i as icon; instead as italic.

Here is how I generate the plotly chart in python:

myFig = fig.to_html(full_html=False, include_plotlyjs=False)

Then, myFig is combined with my html template (using beautifulsoup) to append the chart where I need it, in a <div id='plotly'></div> container. like this:

    myFig = BeautifulSoup(myFig, "html.parser") .

    with open(myPath.rstrip('script.py')+'test.html') as fp:
        soup = BeautifulSoup(fp, "html.parser")
        tag = soup.find(id="plotly")
        tag.clear() #erase any pre-existing div contents from prior runs of script.
        tag.append(myFig)

    with open(myPath.rstrip('script.py')+'test.html', "w", encoding='utf-8') as final:
        final.write(str(soup))
        final.close()

Edit 1 – Here is the portion of HTML that plotly generates via fig.to_html, as it relates to my text=icon issue:

                     <g class="textpoint" transform="translate(0,9)">
                        <text x="120.36" y="202.5" data-unformatted="<i class='fa fa-home'>test</i>" data-math="N" text-anchor="start" style="font-family: &quot;Open Sans&quot;, verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre;">
                           <tspan style="font-style:italic">test</tspan>
                        </text>
                     </g>

Edit2 – Just brute-force editing the HTML after it’s generated – replacing tspan italic with <i class='fa fa-home'> isn’t working. While I believe I could successfully replace these elements and attributes, it doesn’t appear to work either.

I may need to pursue alternate idea #2 - using an image of the icon instead. Might anyone have an example of using an image for the series data points with an efficient loop from a dataframe? DF contains date, and note fields. Notes contains a boolean value; 0 default, but 1 where a note exists for the date.

jinnyzor · November 9, 2022, 9:20pm

Try replacing this:

<tspan style="font-style:italic">test</tspan>

With this:

<tspan class="fa fa-home">test</tspan>

allsyntax · November 10, 2022, 3:51pm

Here is python code of my efforts combined into one, and the resulting plotly HTML. I wrapped the output into an HTML file with the font awesome reference so that someone could copy and paste this and visualize what I’m seeing. I’ve also included an attempt to add an image for each data point, but that’s not working either (note, due to character limit, code plotly HTML is just for the icon text attempt).

plotly code:

        fig = go.Figure()
        fig.add_trace(
             go.Scatter(mode='markers+text', name='Notes',
                        x=df['D_DATE'],
                        y=df['Note'],
                        text="<i class='fa fa-home'>test</i>",   ## Attempt of font awesome icon code
                        textposition="top center",
                        marker=dict(
                           size=15,
                           opacity=0.5,
                           symbol="triangle-down",
                           color="Grey",
                           line=dict(
                               width=1,
                               color="DarkGrey"
                           )
                        )
             )
        )
        # Font awesome image
        myIcon = Image.open(myPath.rstrip('script.py')+"\images\home.png")

        df3 = df.dropna(subset=['Note']) #limit loop to only dates with a note

        for(_, col1, col2) in df3.itertuples(name=None):
           fig.add_layout_image(
              dict(
                source=myIcon,
                xref="x",
                yref="y",
                x=col1,
                y=col2,
                sizex=3,
                sizey=3,
                xanchor="center",
                yanchor="middle",
                #sizing="contain",
                #opacity=0.8,
                layer="above"
              )
           )

HTML file Part 1 of 3:

<!DOCTYPE html>
<html>
<head>
<title>Plotly Output</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/v4-shims.min.css" rel="stylesheet"/>
</head>
<body>
<div>
   <div id="9cf9609f-1b3f-4a82-aa8c-d7d7dc328480" class="plotly-graph-div js-plotly-plot" style="height:100%; width:100%;">
      <div class="plot-container plotly">
         <div class="user-select-none svg-container" style="position: relative; width: 100%; height: 450px;">
            <svg class="main-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="852.656" height="450" style="background: white;">
               <defs id="defs-5f04dd">
                  <g class="clips">
                     <clipPath id="clip5f04ddxyplot" class="plotclip">
                        <rect width="823" height="405"></rect>
                     </clipPath>
                     <clipPath class="axesclip" id="clip5f04ddx">
                        <rect x="20" y="0" width="823" height="450"></rect>
                     </clipPath>
                     <clipPath class="axesclip" id="clip5f04ddy">
                        <rect x="0" y="25" width="852.656" height="405"></rect>
                     </clipPath>
                     <clipPath class="axesclip" id="clip5f04ddxy">
                        <rect x="20" y="25" width="823" height="405"></rect>
                     </clipPath>
                  </g>
                  <g class="gradients"></g>
               </defs>
               <g class="bglayer">
                  <rect class="bg" x="20" y="25" width="823" height="405" style="fill: rgb(229, 236, 246); fill-opacity: 1; stroke-width: 0;"></rect>
               </g>
               <g class="draglayer cursor-crosshair">
                  <g class="xy">
                     <rect class="nsewdrag drag" data-subplot="xy" x="20" y="25" width="823" height="405" style="fill: transparent; stroke-width: 0; pointer-events: all;"></rect>
                     <rect class="nwdrag drag cursor-nw-resize" data-subplot="xy" x="0" y="5" width="20" height="20" style="fill: transparent; stroke-width: 0; pointer-events: all;"></rect>
                     <rect class="nedrag drag cursor-ne-resize" data-subplot="xy" x="843" y="5" width="20" height="20" style="fill: transparent; stroke-width: 0; pointer-events: all;"></rect>
                     <rect class="swdrag drag cursor-sw-resize" data-subplot="xy" x="0" y="430" width="20" height="20" style="fill: transparent; stroke-width: 0; pointer-events: all;"></rect>
                     <rect class="sedrag drag cursor-se-resize" data-subplot="xy" x="843" y="430" width="20" height="20" style="fill: transparent; stroke-width: 0; pointer-events: all;"></rect>
                     <rect class="ewdrag drag cursor-ew-resize" data-subplot="xy" x="102.30000000000001" y="430.5" width="658.4000000000001" height="20" style="fill: transparent; stroke-width: 0; pointer-events: all;"></rect>
                     <rect class="wdrag drag cursor-w-resize" data-subplot="xy" x="20" y="430.5" width="82.30000000000001" height="20" style="fill: transparent; stroke-width: 0; pointer-events: all;"></rect>
                     <rect class="edrag drag cursor-e-resize" data-subplot="xy" x="760.7" y="430.5" width="82.30000000000001" height="20" style="fill: transparent; stroke-width: 0; pointer-events: all;"></rect>
                     <rect class="nsdrag drag cursor-ns-resize" data-subplot="xy" x="-0.5" y="65.5" width="20" height="324" style="fill: transparent; stroke-width: 0; pointer-events: all;"></rect>
                     <rect class="sdrag drag cursor-s-resize" data-subplot="xy" x="-0.5" y="389.5" width="20" height="40.5" style="fill: transparent; stroke-width: 0; pointer-events: all;"></rect>
                     <rect class="ndrag drag cursor-n-resize" data-subplot="xy" x="-0.5" y="25" width="20" height="40.5" style="fill: transparent; stroke-width: 0; pointer-events: all;"></rect>
                  </g>
               </g>
               <g class="layer-below">
                  <g class="imagelayer"></g>
                  <g class="shapelayer"></g>
               </g>
               <g class="cartesianlayer">
                  <g class="subplot xy">
                     <g class="layer-subplot">
                        <g class="shapelayer"></g>
                        <g class="imagelayer"></g>
                     </g>
                     <g class="gridlayer">
                        <g class="x">
                           <path class="xgrid crisp" transform="translate(125.57,0)" d="M0,25v405" style="stroke: rgb(255, 255, 255); stroke-opacity: 1; stroke-width: 1px;"></path>
                           <path class="xgrid crisp" transform="translate(242.05,0)" d="M0,25v405" style="stroke: rgb(255, 255, 255); stroke-opacity: 1; stroke-width: 1px;"></path>
                           <path class="xgrid crisp" transform="translate(359.82,0)" d="M0,25v405" style="stroke: rgb(255, 255, 255); stroke-opacity: 1; stroke-width: 1px;"></path>
                           <path class="xgrid crisp" transform="translate(475.66,0)" d="M0,25v405" style="stroke: rgb(255, 255, 255); stroke-opacity: 1; stroke-width: 1px;"></path>
                           <path class="xgrid crisp" transform="translate(593.43,0)" d="M0,25v405" style="stroke: rgb(255, 255, 255); stroke-opacity: 1; stroke-width: 1px;"></path>
                           <path class="xgrid crisp" transform="translate(709.27,0)" d="M0,25v405" style="stroke: rgb(255, 255, 255); stroke-opacity: 1; stroke-width: 1px;"></path>
                           <path class="xgrid crisp" transform="translate(827.04,0)" d="M0,25v405" style="stroke: rgb(255, 255, 255); stroke-opacity: 1; stroke-width: 1px;"></path>
                        </g>
                        <g class="y">
                           <path class="ygrid crisp" transform="translate(0,328.75)" d="M20,0h823" style="stroke: rgb(255, 255, 255); stroke-opacity: 1; stroke-width: 1px;"></path>
                           <path class="ygrid crisp" transform="translate(0,227.5)" d="M20,0h823" style="stroke: rgb(255, 255, 255); stroke-opacity: 1; stroke-width: 1px;"></path>
                           <path class="ygrid crisp" transform="translate(0,126.25)" d="M20,0h823" style="stroke: rgb(255, 255, 255); stroke-opacity: 1; stroke-width: 1px;"></path>
                        </g>
                     </g>
                     <g class="zerolinelayer">
                        <path class="yzl zl crisp" transform="translate(0,430)" d="M20,0h823" style="stroke: rgb(255, 255, 255); stroke-opacity: 1; stroke-width: 2px;"></path>
                     </g>
                     <path class="xlines-below"></path>
                     <path class="ylines-below"></path>
                     <g class="overlines-below"></g>
                     <g class="xaxislayer-below"></g>
                     <g class="yaxislayer-below"></g>
                     <g class="overaxes-below"></g>
                     <g class="plot" transform="translate(20,25)" clip-path="url('#clip5f04ddxyplot')">
                        <g class="scatterlayer mlayer">
                           <g class="trace scatter tracef97284" style="stroke-miterlimit: 2; opacity: 1;">
                              <g class="fills"></g>
                              <g class="errorbars"></g>
                              <g class="lines"></g>
                              <g class="points">
                                 <path class="point" transform="translate(129.25,202.5)" d="M-8.66,-3.75H8.66L0,7.5Z" style="opacity: 0.5; stroke-width: 1px; fill: rgb(128, 128, 128); fill-opacity: 1; stroke: rgb(169, 169, 169); stroke-opacity: 1;"></path>
                                 <path class="point" transform="translate(339.82,202.5)" d="M-8.66,-3.75H8.66L0,7.5Z" style="opacity: 0.5; stroke-width: 1px; fill: rgb(128, 128, 128); fill-opacity: 1; stroke: rgb(169, 169, 169); stroke-opacity: 1;"></path>
                                 <path class="point" transform="translate(538.87,202.5)" d="M-8.66,-3.75H8.66L0,7.5Z" style="opacity: 0.5; stroke-width: 1px; fill: rgb(128, 128, 128); fill-opacity: 1; stroke: rgb(169, 169, 169); stroke-opacity: 1;"></path>
                                 <path class="point" transform="translate(588.15,202.5)" d="M-8.66,-3.75H8.66L0,7.5Z" style="opacity: 0.5; stroke-width: 1px; fill: rgb(128, 128, 128); fill-opacity: 1; stroke: rgb(169, 169, 169); stroke-opacity: 1;"></path>
                                 <path class="point" transform="translate(648.95,202.5)" d="M-8.66,-3.75H8.66L0,7.5Z" style="opacity: 0.5; stroke-width: 1px; fill: rgb(128, 128, 128); fill-opacity: 1; stroke: rgb(169, 169, 169); stroke-opacity: 1;"></path>
                                 <path class="point" transform="translate(718.07,202.5)" d="M-8.66,-3.75H8.66L0,7.5Z" style="opacity: 0.5; stroke-width: 1px; fill: rgb(128, 128, 128); fill-opacity: 1; stroke: rgb(169, 169, 169); stroke-opacity: 1;"></path>
                                 <path class="point" transform="translate(759.03,202.5)" d="M-8.66,-3.75H8.66L0,7.5Z" style="opacity: 0.5; stroke-width: 1px; fill: rgb(128, 128, 128); fill-opacity: 1; stroke: rgb(169, 169, 169); stroke-opacity: 1;"></path>
                              </g>
                              <g class="text">
                                 <g class="textpoint" transform="translate(10.375,19.375)">
                                    <text x="129.25" y="202.5" data-unformatted="<i class='fa fa-home'>test</i>" data-math="N" text-anchor="start" style="font-family: &quot;Open Sans&quot;, verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre;">
                                       <tspan style="font-style:italic">test</tspan>
                                    </text>
                                 </g>
                                 <g class="textpoint" transform="translate(10.375,19.375)">
                                    <text x="339.82" y="202.5" data-unformatted="<i class='fa fa-home'>test</i>" data-math="N" text-anchor="start" style="font-family: &quot;Open Sans&quot;, verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre;">
                                       <tspan style="font-style:italic">test</tspan>
                                    </text>
                                 </g>
                                 <g class="textpoint" transform="translate(10.375,19.375)">
                                    <text x="538.87" y="202.5" data-unformatted="<i class='fa fa-home'>test</i>" data-math="N" text-anchor="start" style="font-family: &quot;Open Sans&quot;, verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre;">
                                       <tspan style="font-style:italic">test</tspan>
                                    </text>
                                 </g>
                                 <g class="textpoint" transform="translate(10.375,19.375)">
                                    <text x="588.15" y="202.5" data-unformatted="<i class='fa fa-home'>test</i>" data-math="N" text-anchor="start" style="font-family: &quot;Open Sans&quot;, verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre;">
                                       <tspan style="font-style:italic">test</tspan>
                                    </text>
                                 </g>
                                 <g class="textpoint" transform="translate(10.375,19.375)">
                                    <text x="648.95" y="202.5" data-unformatted="<i class='fa fa-home'>test</i>" data-math="N" text-anchor="start" style="font-family: &quot;Open Sans&quot;, verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre;">
                                       <tspan style="font-style:italic">test</tspan>
                                    </text>
                                 </g>
                                 <g class="textpoint" transform="translate(10.375,19.375)">
                                    <text x="718.07" y="202.5" data-unformatted="<i class='fa fa-home'>test</i>" data-math="N" text-anchor="start" style="font-family: &quot;Open Sans&quot;, verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre;">
                                       <tspan style="font-style:italic">test</tspan>
                                    </text>
                                 </g>
                                 <g class="textpoint" transform="translate(10.375,19.375)">
                                    <text x="759.03" y="202.5" data-unformatted="<i class='fa fa-home'>test</i>" data-math="N" text-anchor="start" style="font-family: &quot;Open Sans&quot;, verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre;">
                                       <tspan style="font-style:italic">test</tspan>
                                    </text>
                                 </g>
                              </g>
                           </g>
                        </g>
                     </g>
                     <g class="overplot"></g>
                     <path class="xlines-above crisp" d="M0,0" style="fill: none;"></path>
                     <path class="ylines-above crisp" d="M0,0" style="fill: none;"></path>
                     <g class="overlines-above"></g>
                     <g class="xaxislayer-above">

allsyntax · November 10, 2022, 3:55pm

HTML part 2:

                        <g class="xtick">
                           <text text-anchor="middle" x="0" y="443" data-unformatted="Jan 2020" data-math="N" transform="translate(125.57,0)" style="font-family: &quot;Open Sans&quot;, verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre;">Jan 2020</text>
                        </g>
                        <g class="xtick">
                           <text text-anchor="middle" x="0" y="443" data-unformatted="Jul 2020" data-math="N" transform="translate(242.05,0)" style="font-family: &quot;Open Sans&quot;, verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre;">Jul 2020</text>
                        </g>
                        <g class="xtick">
                           <text text-anchor="middle" x="0" y="443" data-unformatted="Jan 2021" data-math="N" transform="translate(359.82,0)" style="font-family: &quot;Open Sans&quot;, verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre;">Jan 2021</text>
                        </g>
                        <g class="xtick">
                           <text text-anchor="middle" x="0" y="443" data-unformatted="Jul 2021" data-math="N" transform="translate(475.66,0)" style="font-family: &quot;Open Sans&quot;, verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre;">Jul 2021</text>
                        </g>
                        <g class="xtick">
                           <text text-anchor="middle" x="0" y="443" data-unformatted="Jan 2022" data-math="N" transform="translate(593.43,0)" style="font-family: &quot;Open Sans&quot;, verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre;">Jan 2022</text>
                        </g>
                        <g class="xtick">
                           <text text-anchor="middle" x="0" y="443" data-unformatted="Jul 2022" data-math="N" transform="translate(709.27,0)" style="font-family: &quot;Open Sans&quot;, verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre;">Jul 2022</text>
                        </g>
                        <g class="xtick">
                           <text text-anchor="middle" x="0" y="443" data-unformatted="Jan 2023" data-math="N" transform="translate(827.04,0)" style="font-family: &quot;Open Sans&quot;, verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre;">Jan 2023</text>
                        </g>
                     </g>
                     <g class="yaxislayer-above">
                        <g class="ytick">
                           <text text-anchor="end" x="19" y="4.199999999999999" data-unformatted="0" data-math="N" transform="translate(0,430)" style="font-family: &quot;Open Sans&quot;, verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre;">0</text>
                        </g>
                        <g class="ytick">
                           <text text-anchor="end" x="19" y="4.199999999999999" data-unformatted="0.5" data-math="N" transform="translate(0,328.75)" style="font-family: &quot;Open Sans&quot;, verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre;">0.5</text>
                        </g>
                        <g class="ytick">
                           <text text-anchor="end" x="19" y="4.199999999999999" data-unformatted="1" data-math="N" transform="translate(0,227.5)" style="font-family: &quot;Open Sans&quot;, verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre;">1</text>
                        </g>
                        <g class="ytick">
                           <text text-anchor="end" x="19" y="4.199999999999999" data-unformatted="1.5" data-math="N" transform="translate(0,126.25)" style="font-family: &quot;Open Sans&quot;, verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre;">1.5</text>
                        </g>
                        <g class="ytick">
                           <text text-anchor="end" x="19" y="4.199999999999999" data-unformatted="2" data-math="N" transform="translate(0,25)" style="font-family: &quot;Open Sans&quot;, verdana, arial, sans-serif; font-size: 12px; fill: rgb(42, 63, 95); fill-opacity: 1; white-space: pre;">2</text>
                        </g>
                     </g>
                     <g class="overaxes-above"></g>
                  </g>
               </g>
               <g class="polarlayer"></g>
               <g class="ternarylayer"></g>
               <g class="geolayer"></g>
               <g class="funnelarealayer"></g>
               <g class="pielayer"></g>
               <g class="treemaplayer"></g>
               <g class="sunburstlayer"></g>
               <g class="glimages"></g>
            </svg>
            <div class="gl-container"></div>
            <svg class="main-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="852.656" height="450">
               <defs id="topdefs-5f04dd">
                  <g class="clips"></g>
               </defs>
               <g class="indicatorlayer"></g>
               <g class="layer-above">
                  <g class="imagelayer"></g>
                  <g class="shapelayer"></g>
               </g>
               <g class="infolayer">
                  <g class="g-gtitle"></g>
                  <g class="g-xtitle"></g>
                  <g class="g-ytitle"></g>
               </g>
               <g class="menulayer"></g>
               <g class="zoomlayer"></g>
            </svg>
            <div class="modebar-container" style="position: absolute; top: 0px; right: 0px; width: 100%;">
               <div id="modebar-5f04dd" class="modebar modebar--hover ease-bg">
                  <div class="modebar-group">
                     <a rel="tooltip" class="modebar-btn" data-title="Download plot as a png" data-toggle="false" data-gravity="n">
                        <svg viewBox="0 0 1000 1000" class="icon" height="1em" width="1em">
                           <path d="m500 450c-83 0-150-67-150-150 0-83 67-150 150-150 83 0 150 67 150 150 0 83-67 150-150 150z m400 150h-120c-16 0-34 13-39 29l-31 93c-6 15-23 28-40 28h-340c-16 0-34-13-39-28l-31-94c-6-15-23-28-40-28h-120c-55 0-100-45-100-100v-450c0-55 45-100 100-100h800c55 0 100 45 100 100v450c0 55-45 100-100 100z m-400-550c-138 0-250 112-250 250 0 138 112 250 250 250 138 0 250-112 250-250 0-138-112-250-250-250z m365 380c-19 0-35 16-35 35 0 19 16 35 35 35 19 0 35-16 35-35 0-19-16-35-35-35z" transform="matrix(1 0 0 -1 0 850)"></path>
                        </svg>
                     </a>
                  </div>
                  <div class="modebar-group">
                     <a rel="tooltip" class="modebar-btn active" data-title="Zoom" data-attr="dragmode" data-val="zoom" data-toggle="false" data-gravity="n">
                        <svg viewBox="0 0 1000 1000" class="icon" height="1em" width="1em">
                           <path d="m1000-25l-250 251c40 63 63 138 63 218 0 224-182 406-407 406-224 0-406-182-406-406s183-406 407-406c80 0 155 22 218 62l250-250 125 125z m-812 250l0 438 437 0 0-438-437 0z m62 375l313 0 0-312-313 0 0 312z" transform="matrix(1 0 0 -1 0 850)"></path>
                        </svg>
                     </a>
                     <a rel="tooltip" class="modebar-btn" data-title="Pan" data-attr="dragmode" data-val="pan" data-toggle="false" data-gravity="n">
                        <svg viewBox="0 0 1000 1000" class="icon" height="1em" width="1em">
                           <path d="m1000 350l-187 188 0-125-250 0 0 250 125 0-188 187-187-187 125 0 0-250-250 0 0 125-188-188 186-187 0 125 252 0 0-250-125 0 187-188 188 188-125 0 0 250 250 0 0-126 187 188z" transform="matrix(1 0 0 -1 0 850)"></path>
                        </svg>
                     </a>
                     <a rel="tooltip" class="modebar-btn" data-title="Box Select" data-attr="dragmode" data-val="select" data-toggle="false" data-gravity="n">
                        <svg viewBox="0 0 1000 1000" class="icon" height="1em" width="1em">
                           <path d="m0 850l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z m285 0l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z m-857-286l0-143 143 0 0 143-143 0z m857 0l0-143 143 0 0 143-143 0z m-857-285l0-143 143 0 0 143-143 0z m857 0l0-143 143 0 0 143-143 0z m-857-286l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z m285 0l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z" transform="matrix(1 0 0 -1 0 850)"></path>
                        </svg>
                     </a>
                     <a rel="tooltip" class="modebar-btn" data-title="Lasso Select" data-attr="dragmode" data-val="lasso" data-toggle="false" data-gravity="n">
                        <svg viewBox="0 0 1031 1000" class="icon" height="1em" width="1em">
                           <path d="m1018 538c-36 207-290 336-568 286-277-48-473-256-436-463 10-57 36-108 76-151-13-66 11-137 68-183 34-28 75-41 114-42l-55-70 0 0c-2-1-3-2-4-3-10-14-8-34 5-45 14-11 34-8 45 4 1 1 2 3 2 5l0 0 113 140c16 11 31 24 45 40 4 3 6 7 8 11 48-3 100 0 151 9 278 48 473 255 436 462z m-624-379c-80 14-149 48-197 96 42 42 109 47 156 9 33-26 47-66 41-105z m-187-74c-19 16-33 37-39 60 50-32 109-55 174-68-42-25-95-24-135 8z m360 75c-34-7-69-9-102-8 8 62-16 128-68 170-73 59-175 54-244-5-9 20-16 40-20 61-28 159 121 317 333 354s407-60 434-217c28-159-121-318-333-355z" transform="matrix(1 0 0 -1 0 850)"></path>
                        </svg>
                     </a>
                  </div>
                  <div class="modebar-group">
                     <a rel="tooltip" class="modebar-btn" data-title="Zoom in" data-attr="zoom" data-val="in" data-toggle="false" data-gravity="n">
                        <svg viewBox="0 0 875 1000" class="icon" height="1em" width="1em">
                           <path d="m1 787l0-875 875 0 0 875-875 0z m687-500l-187 0 0-187-125 0 0 187-188 0 0 125 188 0 0 187 125 0 0-187 187 0 0-125z" transform="matrix(1 0 0 -1 0 850)"></path>
                        </svg>
                     </a>
                     <a rel="tooltip" class="modebar-btn" data-title="Zoom out" data-attr="zoom" data-val="out" data-toggle="false" data-gravity="n">
                        <svg viewBox="0 0 875 1000" class="icon" height="1em" width="1em">
                           <path d="m0 788l0-876 875 0 0 876-875 0z m688-500l-500 0 0 125 500 0 0-125z" transform="matrix(1 0 0 -1 0 850)"></path>
                        </svg>
                     </a>
                     <a rel="tooltip" class="modebar-btn" data-title="Autoscale" data-attr="zoom" data-val="auto" data-toggle="false" data-gravity="n">
                        <svg viewBox="0 0 1000 1000" class="icon" height="1em" width="1em">
                           <path d="m250 850l-187 0-63 0 0-62 0-188 63 0 0 188 187 0 0 62z m688 0l-188 0 0-62 188 0 0-188 62 0 0 188 0 62-62 0z m-875-938l0 188-63 0 0-188 0-62 63 0 187 0 0 62-187 0z m875 188l0-188-188 0 0-62 188 0 62 0 0 62 0 188-62 0z m-125 188l-1 0-93-94-156 156 156 156 92-93 2 0 0 250-250 0 0-2 93-92-156-156-156 156 94 92 0 2-250 0 0-250 0 0 93 93 157-156-157-156-93 94 0 0 0-250 250 0 0 0-94 93 156 157 156-157-93-93 0 0 250 0 0 250z" transform="matrix(1 0 0 -1 0 850)"></path>
                        </svg>
                     </a>
                     <a rel="tooltip" class="modebar-btn" data-title="Reset axes" data-attr="zoom" data-val="reset" data-toggle="false" data-gravity="n">
                        <svg viewBox="0 0 928.6 1000" class="icon" height="1em" width="1em">
                           <path d="m786 296v-267q0-15-11-26t-25-10h-214v214h-143v-214h-214q-15 0-25 10t-11 26v267q0 1 0 2t0 2l321 264 321-264q1-1 1-4z m124 39l-34-41q-5-5-12-6h-2q-7 0-12 3l-386 322-386-322q-7-4-13-4-7 2-12 7l-35 41q-4 5-3 13t6 12l401 334q18 15 42 15t43-15l136-114v109q0 8 5 13t13 5h107q8 0 13-5t5-13v-227l122-102q5-5 6-12t-4-13z" transform="matrix(1 0 0 -1 0 850)"></path>
                        </svg>
                     </a>
                  </div>
                  <div class="modebar-group">
                     <a rel="tooltip" class="modebar-btn" data-title="Toggle Spike Lines" data-attr="_cartesianSpikesEnabled" data-val="on" data-toggle="false" data-gravity="n">
                        <svg viewBox="0 0 1000 1000" class="icon" height="1em" width="1em">
                           <path d="M512 409c0-57-46-104-103-104-57 0-104 47-104 104 0 57 47 103 104 103 57 0 103-46 103-103z m-327-39l92 0 0 92-92 0z m-185 0l92 0 0 92-92 0z m370-186l92 0 0 93-92 0z m0-184l92 0 0 92-92 0z" transform="matrix(1.5 0 0 -1.5 0 850)"></path>
                        </svg>
                     </a>
                     <a rel="tooltip" class="modebar-btn active" data-title="Show closest data on hover" data-attr="hovermode" data-val="closest" data-toggle="false" data-gravity="ne">
                        <svg viewBox="0 0 1500 1000" class="icon" height="1em" width="1em">
                           <path d="m375 725l0 0-375-375 375-374 0-1 1125 0 0 750-1125 0z" transform="matrix(1 0 0 -1 0 850)"></path>
                        </svg>
                     </a>
                     <a rel="tooltip" class="modebar-btn" data-title="Compare data on hover" data-attr="hovermode" data-val="x" data-toggle="false" data-gravity="ne">
                        <svg viewBox="0 0 1125 1000" class="icon" height="1em" width="1em">
                           <path d="m187 786l0 2-187-188 188-187 0 0 937 0 0 373-938 0z m0-499l0 1-187-188 188-188 0 0 937 0 0 376-938-1z" transform="matrix(1 0 0 -1 0 850)"></path>
                        </svg>
                     </a>
                  </div>

allsyntax · November 10, 2022, 3:59pm

HTML part 3. Hope this is helpful:

                  <div class="modebar-group">
                     <a href="https://plotly.com/" target="_blank" data-title="Produced with Plotly" class="modebar-btn plotlyjsicon modebar-btn--logo">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 132" height="1em" width="1em">
                           <defs>
                              <style>.cls-1 {fill: #3f4f75;} .cls-2 {fill: #80cfbe;} .cls-3 {fill: #fff;}</style>
                           </defs>
                           <title>plotly-logomark</title>
                           <g id="symbol">
                              <rect class="cls-1" width="132" height="132" rx="6" ry="6"></rect>
                              <circle class="cls-2" cx="78" cy="54" r="6"></circle>
                              <circle class="cls-2" cx="102" cy="30" r="6"></circle>
                              <circle class="cls-2" cx="78" cy="30" r="6"></circle>
                              <circle class="cls-2" cx="54" cy="30" r="6"></circle>
                              <circle class="cls-2" cx="30" cy="30" r="6"></circle>
                              <circle class="cls-2" cx="30" cy="54" r="6"></circle>
                              <path class="cls-3" d="M30,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,30,72Z"></path>
                              <path class="cls-3" d="M78,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,78,72Z"></path>
                              <path class="cls-3" d="M54,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,54,48Z"></path>
                              <path class="cls-3" d="M102,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,102,48Z"></path>
                           </g>
                        </svg>
                     </a>
                  </div>
               </div>
            </div>
            <svg class="main-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="852.656" height="450">
               <g class="hoverlayer"></g>
            </svg>
         </div>
      </div>
   </div>
</div>
</div>
</body>
</html>

allsyntax · November 10, 2022, 4:02pm

Lastly, there is this big script at the end (1 of 2):

<script type = "text/javascript" > window.PLOTLYENV = window.PLOTLYENV || {};
if (document.getElementById("9cf9609f-1b3f-4a82-aa8c-d7d7dc328480")) {
    Plotly.newPlot("9cf9609f-1b3f-4a82-aa8c-d7d7dc328480", [{
        "marker": {
            "color": "Grey",
            "line": {
                "color": "DarkGrey",
                "width": 1
            },
            "opacity": 0.5,
            "size": 15,
            "symbol": "triangle-down"
        },
        "mode": "markers+text",
        "name": "Notes",
        "text": "<i class='fa fa-home'>test</i>",
        "textposition": "bottom right",
        "x": ["2019-10-07T00:00:00", "2019-10-08T00:00:00", "2019-10-09T00:00:00", "2019-10-10T00:00:00", "2019-10-11T00:00:00", "2019-10-12T00:00:00", "2019-10-13T00:00:00", "2019-10-14T00:00:00", "2019-10-15T00:00:00", "2019-10-16T00:00:00", "2019-10-17T00:00:00", "2019-10-18T00:00:00", "2019-10-19T00:00:00", "2019-10-20T00:00:00", "2019-10-21T00:00:00", "2019-10-22T00:00:00", "2019-10-23T00:00:00", "2019-10-24T00:00:00", "2019-10-25T00:00:00", "2019-10-26T00:00:00", "2019-10-27T00:00:00", "2019-10-28T00:00:00", "2019-10-29T00:00:00", "2019-10-30T00:00:00", "2019-10-31T00:00:00", "2019-11-01T00:00:00", "2019-11-02T00:00:00", "2019-11-03T00:00:00", "2019-11-04T00:00:00", "2019-11-05T00:00:00", "2019-11-06T00:00:00", "2019-11-07T00:00:00", "2019-11-08T00:00:00", "2019-11-09T00:00:00", "2019-11-10T00:00:00", "2019-11-11T00:00:00", "2019-11-12T00:00:00", "2019-11-13T00:00:00", "2019-11-14T00:00:00", "2019-11-15T00:00:00", "2019-11-16T00:00:00", "2019-11-17T00:00:00", "2019-11-18T00:00:00", "2019-11-19T00:00:00", "2019-11-20T00:00:00", "2019-11-21T00:00:00", "2019-11-22T00:00:00", "2019-11-23T00:00:00", "2019-11-24T00:00:00", "2019-11-25T00:00:00", "2019-11-26T00:00:00", "2019-11-27T00:00:00", "2019-11-28T00:00:00", "2019-11-29T00:00:00", "2019-11-30T00:00:00", "2019-12-01T00:00:00", "2019-12-02T00:00:00", "2019-12-03T00:00:00", "2019-12-04T00:00:00", "2019-12-05T00:00:00", "2019-12-06T00:00:00", "2019-12-07T00:00:00", "2019-12-08T00:00:00", "2019-12-09T00:00:00", "2019-12-10T00:00:00", "2019-12-11T00:00:00", "2019-12-12T00:00:00", "2019-12-13T00:00:00", "2019-12-14T00:00:00", "2019-12-15T00:00:00", "2019-12-16T00:00:00", "2019-12-17T00:00:00", "2019-12-18T00:00:00", "2019-12-19T00:00:00", "2019-12-20T00:00:00", "2019-12-21T00:00:00", "2019-12-22T00:00:00", "2019-12-23T00:00:00", "2019-12-24T00:00:00", "2019-12-25T00:00:00", "2019-12-26T00:00:00", "2019-12-27T00:00:00", "2019-12-28T00:00:00", "2019-12-29T00:00:00", "2019-12-30T00:00:00", "2019-12-31T00:00:00", "2020-01-01T00:00:00", "2020-01-02T00:00:00", "2020-01-03T00:00:00", "2020-01-04T00:00:00", "2020-01-05T00:00:00", "2020-01-06T00:00:00", "2020-01-07T00:00:00", "2020-01-08T00:00:00", "2020-01-09T00:00:00", "2020-01-10T00:00:00", "2020-01-11T00:00:00", "2020-01-12T00:00:00", "2020-01-13T00:00:00", "2020-01-14T00:00:00", "2020-01-15T00:00:00", "2020-01-16T00:00:00", "2020-01-17T00:00:00", "2020-01-18T00:00:00", "2020-01-19T00:00:00", "2020-01-20T00:00:00", "2020-01-21T00:00:00", "2020-01-22T00:00:00", "2020-01-23T00:00:00", "2020-01-24T00:00:00", "2020-01-25T00:00:00", "2020-01-26T00:00:00", "2020-01-27T00:00:00", "2020-01-28T00:00:00", "2020-01-29T00:00:00", "2020-01-30T00:00:00", "2020-01-31T00:00:00", "2020-02-01T00:00:00", "2020-02-02T00:00:00", "2020-02-03T00:00:00", "2020-02-04T00:00:00", "2020-02-05T00:00:00", "2020-02-06T00:00:00", "2020-02-07T00:00:00", "2020-02-08T00:00:00", "2020-02-09T00:00:00", "2020-02-10T00:00:00", "2020-02-11T00:00:00", "2020-02-12T00:00:00", "2020-02-13T00:00:00", "2020-02-14T00:00:00", "2020-02-15T00:00:00", "2020-02-16T00:00:00", "2020-02-17T00:00:00", "2020-02-18T00:00:00", "2020-02-19T00:00:00", "2020-02-20T00:00:00", "2020-02-21T00:00:00", "2020-02-22T00:00:00", "2020-02-23T00:00:00", "2020-02-24T00:00:00", "2020-02-25T00:00:00", "2020-02-26T00:00:00", "2020-02-27T00:00:00", "2020-02-28T00:00:00", "2020-02-29T00:00:00", "2020-03-01T00:00:00", "2020-03-02T00:00:00", "2020-03-03T00:00:00", "2020-03-04T00:00:00", "2020-03-05T00:00:00", "2020-03-06T00:00:00", "2020-03-07T00:00:00", "2020-03-08T00:00:00", "2020-03-09T00:00:00", "2020-03-10T00:00:00", "2020-03-11T00:00:00", "2020-03-12T00:00:00", "2020-03-13T00:00:00", "2020-03-14T00:00:00", "2020-03-15T00:00:00", "2020-03-16T00:00:00", "2020-03-17T00:00:00", "2020-03-18T00:00:00", "2020-03-19T00:00:00", "2020-03-20T00:00:00", "2020-03-21T00:00:00", "2020-03-22T00:00:00", "2020-03-23T00:00:00", "2020-03-24T00:00:00", "2020-03-25T00:00:00", "2020-03-26T00:00:00", "2020-03-27T00:00:00", "2020-03-28T00:00:00", "2020-03-29T00:00:00", "2020-03-30T00:00:00", "2020-03-31T00:00:00", "2020-04-01T00:00:00", "2020-04-02T00:00:00", "2020-04-03T00:00:00", "2020-04-04T00:00:00", "2020-04-05T00:00:00", "2020-04-06T00:00:00", "2020-04-07T00:00:00", "2020-04-08T00:00:00", "2020-04-09T00:00:00", "2020-04-10T00:00:00", "2020-04-11T00:00:00", "2020-04-12T00:00:00", "2020-04-13T00:00:00", "2020-04-14T00:00:00", "2020-04-15T00:00:00", "2020-04-16T00:00:00", "2020-04-17T00:00:00", "2020-04-18T00:00:00", "2020-04-19T00:00:00", "2020-04-20T00:00:00", "2020-04-21T00:00:00", "2020-04-22T00:00:00", "2020-04-23T00:00:00", "2020-04-24T00:00:00", "2020-04-25T00:00:00", "2020-04-26T00:00:00", "2020-04-27T00:00:00", "2020-04-28T00:00:00", "2020-04-29T00:00:00", "2020-04-30T00:00:00", "2020-05-01T00:00:00", "2020-05-02T00:00:00", "2020-05-03T00:00:00", "2020-05-04T00:00:00", "2020-05-05T00:00:00", "2020-05-06T00:00:00", "2020-05-07T00:00:00", "2020-05-08T00:00:00", "2020-05-09T00:00:00", "2020-05-10T00:00:00", "2020-05-11T00:00:00", "2020-05-12T00:00:00", "2020-05-13T00:00:00", "2020-05-14T00:00:00", "2020-05-15T00:00:00", "2020-05-16T00:00:00", "2020-05-17T00:00:00", "2020-05-18T00:00:00", "2020-05-19T00:00:00", "2020-05-20T00:00:00", "2020-05-21T00:00:00", "2020-05-22T00:00:00", "2020-05-23T00:00:00", "2020-05-24T00:00:00", "2020-05-25T00:00:00", "2020-05-26T00:00:00", "2020-05-27T00:00:00", "2020-05-28T00:00:00", "2020-05-29T00:00:00", "2020-05-30T00:00:00", "2020-05-31T00:00:00", "2020-06-01T00:00:00", "2020-06-02T00:00:00", "2020-06-03T00:00:00", "2020-06-04T00:00:00", "2020-06-05T00:00:00", "2020-06-06T00:00:00", "2020-06-07T00:00:00", "2020-06-08T00:00:00", "2020-06-09T00:00:00", "2020-06-10T00:00:00", "2020-06-11T00:00:00", "2020-06-12T00:00:00", "2020-06-13T00:00:00", "2020-06-14T00:00:00", "2020-06-15T00:00:00", "2020-06-16T00:00:00", "2020-06-17T00:00:00", "2020-06-18T00:00:00", "2020-06-19T00:00:00", "2020-06-20T00:00:00", "2020-06-21T00:00:00", "2020-06-22T00:00:00", "2020-06-23T00:00:00", "2020-06-24T00:00:00", "2020-06-25T00:00:00", "2020-06-26T00:00:00", "2020-06-27T00:00:00", "2020-06-28T00:00:00", "2020-06-29T00:00:00", "2020-06-30T00:00:00", "2020-07-01T00:00:00", "2020-07-02T00:00:00", "2020-07-03T00:00:00", "2020-07-04T00:00:00", "2020-07-05T00:00:00", "2020-07-06T00:00:00", "2020-07-07T00:00:00", "2020-07-08T00:00:00", "2020-07-09T00:00:00", "2020-07-10T00:00:00", "2020-07-11T00:00:00", "2020-07-12T00:00:00", "2020-07-13T00:00:00", "2020-07-14T00:00:00", "2020-07-15T00:00:00", "2020-07-16T00:00:00", "2020-07-17T00:00:00", "2020-07-18T00:00:00", "2020-07-19T00:00:00", "2020-07-20T00:00:00", "2020-07-21T00:00:00", "2020-07-22T00:00:00", "2020-07-23T00:00:00", "2020-07-24T00:00:00", "2020-07-25T00:00:00", "2020-07-26T00:00:00", "2020-07-27T00:00:00", "2020-07-28T00:00:00", "2020-07-29T00:00:00", "2020-07-30T00:00:00", "2020-07-31T00:00:00", "2020-08-01T00:00:00", "2020-08-02T00:00:00", "2020-08-03T00:00:00", "2020-08-04T00:00:00", "2020-08-05T00:00:00", "2020-08-06T00:00:00", "2020-08-07T00:00:00", "2020-08-08T00:00:00", "2020-08-09T00:00:00", "2020-08-10T00:00:00", "2020-08-11T00:00:00", "2020-08-12T00:00:00", "2020-08-13T00:00:00", "2020-08-14T00:00:00", "2020-08-15T00:00:00", "2020-08-16T00:00:00", "2020-08-17T00:00:00", "2020-08-18T00:00:00", "2020-08-19T00:00:00", "2020-08-20T00:00:00", "2020-08-21T00:00:00", "2020-08-22T00:00:00", "2020-08-23T00:00:00", "2020-08-24T00:00:00", "2020-08-25T00:00:00", "2020-08-26T00:00:00", "2020-08-27T00:00:00", "2020-08-28T00:00:00", "2020-08-29T00:00:00", "2020-08-30T00:00:00", "2020-08-31T00:00:00", "2020-09-01T00:00:00", "2020-09-02T00:00:00", "2020-09-03T00:00:00", "2020-09-04T00:00:00", "2020-09-05T00:00:00", "2020-09-06T00:00:00", "2020-09-07T00:00:00", "2020-09-08T00:00:00", "2020-09-09T00:00:00", "2020-09-10T00:00:00", "2020-09-11T00:00:00", "2020-09-12T00:00:00", "2020-09-13T00:00:00", "2020-09-14T00:00:00", "2020-09-15T00:00:00", "2020-09-16T00:00:00", "2020-09-17T00:00:00", "2020-09-18T00:00:00", "2020-09-19T00:00:00", "2020-09-20T00:00:00", "2020-09-21T00:00:00", "2020-09-22T00:00:00", "2020-09-23T00:00:00", "2020-09-24T00:00:00", "2020-09-25T00:00:00", "2020-09-26T00:00:00", "2020-09-27T00:00:00", "2020-09-28T00:00:00", "2020-09-29T00:00:00", "2020-09-30T00:00:00", "2020-10-01T00:00:00", "2020-10-02T00:00:00", "2020-10-03T00:00:00", "2020-10-04T00:00:00", "2020-10-05T00:00:00", "2020-10-06T00:00:00", "2020-10-07T00:00:00", "2020-10-08T00:00:00", "2020-10-09T00:00:00", "2020-10-10T00:00:00", "2020-10-11T00:00:00", "2020-10-12T00:00:00", "2020-10-13T00:00:00", "2020-10-14T00:00:00", "2020-10-15T00:00:00", "2020-10-16T00:00:00", "2020-10-17T00:00:00", "2020-10-18T00:00:00", "2020-10-19T00:00:00", "2020-10-20T00:00:00", "2020-10-21T00:00:00", "2020-10-22T00:00:00", "2020-10-23T00:00:00", "2020-10-24T00:00:00", "2020-10-25T00:00:00", "2020-10-26T00:00:00", "2020-10-27T00:00:00", "2020-10-28T00:00:00", "2020-10-29T00:00:00", "2020-10-30T00:00:00", "2020-10-31T00:00:00", "2020-11-01T00:00:00", "2020-11-02T00:00:00", "2020-11-03T00:00:00", "2020-11-04T00:00:00", "2020-11-05T00:00:00", "2020-11-06T00:00:00", "2020-11-07T00:00:00", "2020-11-08T00:00:00", "2020-11-09T00:00:00", "2020-11-10T00:00:00", "2020-11-11T00:00:00", "2020-11-12T00:00:00", "2020-11-13T00:00:00", "2020-11-14T00:00:00", "2020-11-15T00:00:00", "2020-11-16T00:00:00", "2020-11-17T00:00:00", "2020-11-18T00:00:00", "2020-11-19T00:00:00", "2020-11-20T00:00:00", "2020-11-21T00:00:00", "2020-11-22T00:00:00", "2020-11-23T00:00:00", "2020-11-24T00:00:00", "2020-11-25T00:00:00", "2020-11-26T00:00:00", "2020-11-27T00:00:00", "2020-11-28T00:00:00", "2020-11-29T00:00:00", "2020-11-30T00:00:00", "2020-12-01T00:00:00", "2020-12-02T00:00:00", "2020-12-03T00:00:00", "2020-12-04T00:00:00", "2020-12-05T00:00:00", "2020-12-06T00:00:00", "2020-12-07T00:00:00", "2020-12-08T00:00:00", "2020-12-09T00:00:00", "2020-12-10T00:00:00", "2020-12-11T00:00:00", "2020-12-12T00:00:00", "2020-12-13T00:00:00", "2020-12-14T00:00:00", "2020-12-15T00:00:00", "2020-12-16T00:00:00", "2020-12-17T00:00:00", "2020-12-18T00:00:00", "2020-12-19T00:00:00", "2020-12-20T00:00:00", "2020-12-21T00:00:00", "2020-12-22T00:00:00", "2020-12-23T00:00:00", "2020-12-24T00:00:00", "2020-12-25T00:00:00", "2020-12-26T00:00:00", "2020-12-27T00:00:00", "2020-12-28T00:00:00", "2020-12-29T00:00:00", "2020-12-30T00:00:00", "2020-12-31T00:00:00", "2021-01-01T00:00:00", "2021-01-02T00:00:00", "2021-01-03T00:00:00", "2021-01-04T00:00:00", "2021-01-05T00:00:00", "2021-01-06T00:00:00", "2021-01-07T00:00:00", "2021-01-08T00:00:00", "2021-01-09T00:00:00", "2021-01-10T00:00:00", "2021-01-11T00:00:00", "2021-01-12T00:00:00", "2021-01-13T00:00:00", "2021-01-14T00:00:00", "2021-01-15T00:00:00", "2021-01-16T00:00:00", "2021-01-17T00:00:00", "2021-01-18T00:00:00", "2021-01-19T00:00:00", "2021-01-20T00:00:00", "2021-01-21T00:00:00", "2021-01-22T00:00:00", "2021-01-23T00:00:00", "2021-01-24T00:00:00", "2021-01-25T00:00:00", "2021-01-26T00:00:00", "2021-01-27T00:00:00", "2021-01-28T00:00:00", "2021-01-29T00:00:00", "2021-01-30T00:00:00", "2021-01-31T00:00:00", "2021-02-01T00:00:00", "2021-02-02T00:00:00", "2021-02-03T00:00:00", "2021-02-04T00:00:00", "2021-02-05T00:00:00", "2021-02-06T00:00:00", "2021-02-07T00:00:00", "2021-02-08T00:00:00", "2021-02-09T00:00:00", "2021-02-10T00:00:00", "2021-02-11T00:00:00", "2021-02-12T00:00:00", "2021-02-13T00:00:00", "2021-02-14T00:00:00", "2021-02-15T00:00:00", "2021-02-16T00:00:00", "2021-02-17T00:00:00", "2021-02-18T00:00:00", "2021-02-19T00:00:00", "2021-02-20T00:00:00", "2021-02-21T00:00:00", "2021-02-22T00:00:00", "2021-02-23T00:00:00", "2021-02-24T00:00:00", "2021-02-25T00:00:00", "2021-02-26T00:00:00", "2021-02-27T00:00:00", "2021-02-28T00:00:00", "2021-03-01T00:00:00", "2021-03-02T00:00:00", "2021-03-03T00:00:00", "2021-03-04T00:00:00", "2021-03-05T00:00:00", "2021-03-06T00:00:00", "2021-03-07T00:00:00", "2021-03-08T00:00:00", "2021-03-09T00:00:00", "2021-03-10T00:00:00", "2021-03-11T00:00:00", "2021-03-12T00:00:00", "2021-03-13T00:00:00", "2021-03-14T00:00:00", "2021-03-15T00:00:00", "2021-03-16T00:00:00", "2021-03-17T00:00:00", "2021-03-18T00:00:00", "2021-03-19T00:00:00", "2021-03-20T00:00:00", "2021-03-21T00:00:00", "2021-03-22T00:00:00", "2021-03-23T00:00:00", "2021-03-24T00:00:00", "2021-03-25T00:00:00", "2021-03-26T00:00:00", "2021-03-27T00:00:00", "2021-03-28T00:00:00", "2021-03-29T00:00:00", "2021-03-30T00:00:00", "2021-03-31T00:00:00", "2021-04-01T00:00:00", "2021-04-02T00:00:00", "2021-04-03T00:00:00", "2021-04-04T00:00:00", "2021-04-05T00:00:00", "2021-04-06T00:00:00", "2021-04-07T00:00:00", "2021-04-08T00:00:00", "2021-04-09T00:00:00", "2021-04-10T00:00:00", "2021-04-11T00:00:00", "2021-04-12T00:00:00", "2021-04-13T00:00:00", "2021-04-14T00:00:00", "2021-04-15T00:00:00", "2021-04-16T00:00:00", "2021-04-17T00:00:00", "2021-04-18T00:00:00", "2021-04-19T00:00:00", "2021-04-20T00:00:00", "2021-04-21T00:00:00", "2021-04-22T00:00:00", "2021-04-23T00:00:00", "2021-04-24T00:00:00", "2021-04-25T00:00:00", "2021-04-26T00:00:00", "2021-04-27T00:00:00", "2021-04-28T00:00:00", "2021-04-29T00:00:00", "2021-04-30T00:00:00", "2021-05-01T00:00:00", "2021-05-02T00:00:00", "2021-05-03T00:00:00", "2021-05-04T00:00:00", "2021-05-05T00:00:00", "2021-05-06T00:00:00", "2021-05-07T00:00:00", "2021-05-08T00:00:00", "2021-05-09T00:00:00", "2021-05-10T00:00:00", "2021-05-11T00:00:00", "2021-05-12T00:00:00", "2021-05-13T00:00:00", "2021-05-14T00:00:00", "2021-05-15T00:00:00", "2021-05-16T00:00:00", "2021-05-17T00:00:00", "2021-05-18T00:00:00", "2021-05-19T00:00:00", "2021-05-20T00:00:00", "2021-05-21T00:00:00", "2021-05-22T00:00:00", "2021-05-23T00:00:00", "2021-05-24T00:00:00", "2021-05-25T00:00:00", "2021-05-26T00:00:00", "2021-05-27T00:00:00", "2021-05-28T00:00:00", "2021-05-29T00:00:00", "2021-05-30T00:00:00", "2021-05-31T00:00:00", "2021-06-01T00:00:00", "2021-06-02T00:00:00", "2021-06-03T00:00:00", "2021-06-04T00:00:00", "2021-06-05T00:00:00", "2021-06-06T00:00:00", "2021-06-07T00:00:00", "2021-06-08T00:00:00", "2021-06-09T00:00:00", "2021-06-10T00:00:00", "2021-06-11T00:00:00", "2021-06-12T00:00:00", "2021-06-13T00:00:00", "2021-06-14T00:00:00", "2021-06-15T00:00:00", "2021-06-16T00:00:00", "2021-06-17T00:00:00", "2021-06-18T00:00:00", "2021-06-19T00:00:00", "2021-06-20T00:00:00", "2021-06-21T00:00:00", "2021-06-22T00:00:00", "2021-06-23T00:00:00", "2021-06-24T00:00:00", "2021-06-25T00:00:00", "2021-06-26T00:00:00", "2021-06-27T00:00:00", "2021-06-28T00:00:00", "2021-06-29T00:00:00", "2021-06-30T00:00:00", "2021-07-01T00:00:00", "2021-07-02T00:00:00", "2021-07-03T00:00:00", "2021-07-04T00:00:00", "2021-07-05T00:00:00", "2021-07-06T00:00:00", "2021-07-07T00:00:00", "2021-07-08T00:00:00", "2021-07-09T00:00:00", "2021-07-10T00:00:00", "2021-07-11T00:00:00", "2021-07-12T00:00:00", "2021-07-13T00:00:00", "2021-07-14T00:00:00", "2021-07-15T00:00:00", "2021-07-16T00:00:00", "2021-07-17T00:00:00", "2021-07-18T00:00:00", "2021-07-19T00:00:00", "2021-07-20T00:00:00", "2021-07-21T00:00:00", "2021-07-22T00:00:00", "2021-07-23T00:00:00", "2021-07-24T00:00:00", "2021-07-25T00:00:00", "2021-07-26T00:00:00", "2021-07-27T00:00:00", "2021-07-28T00:00:00", "2021-07-29T00:00:00", "2021-07-30T00:00:00", "2021-07-31T00:00:00", "2021-08-01T00:00:00", "2021-08-02T00:00:00", "2021-08-03T00:00:00", "2021-08-04T00:00:00", "2021-08-05T00:00:00", "2021-08-06T00:00:00", "2021-08-07T00:00:00", "2021-08-08T00:00:00", "2021-08-09T00:00:00", "2021-08-10T00:00:00", "2021-08-11T00:00:00", "2021-08-12T00:00:00", "2021-08-13T00:00:00", "2021-08-14T00:00:00", "2021-08-15T00:00:00", "2021-08-16T00:00:00", "2021-08-17T00:00:00", "2021-08-18T00:00:00", "2021-08-19T00:00:00", "2021-08-20T00:00:00", "2021-08-21T00:00:00", "2021-08-22T00:00:00", "2021-08-23T00:00:00", "2021-08-24T00:00:00", "2021-08-25T00:00:00", "2021-08-26T00:00:00", "2021-08-27T00:00:00", "2021-08-28T00:00:00", "2021-08-29T00:00:00", "2021-08-30T00:00:00", "2021-08-31T00:00:00", "2021-09-01T00:00:00", "2021-09-02T00:00:00", "2021-09-03T00:00:00", "2021-09-04T00:00:00", "2021-09-05T00:00:00", "2021-09-06T00:00:00", "2021-09-07T00:00:00", "2021-09-08T00:00:00", "2021-09-09T00:00:00", "2021-09-10T00:00:00", "2021-09-11T00:00:00", "2021-09-12T00:00:00", "2021-09-13T00:00:00", "2021-09-14T00:00:00", "2021-09-15T00:00:00", "2021-09-16T00:00:00", "2021-09-17T00:00:00", "2021-09-18T00:00:00", "2021-09-19T00:00:00", "2021-09-20T00:00:00", "2021-09-21T00:00:00", "2021-09-22T00:00:00", "2021-09-23T00:00:00", "2021-09-24T00:00:00", "2021-09-25T00:00:00", "2021-09-26T00:00:00", "2021-09-27T00:00:00", "2021-09-28T00:00:00", "2021-09-29T00:00:00", "2021-09-30T00:00:00", "2021-10-01T00:00:00", "2021-10-02T00:00:00", "2021-10-03T00:00:00", "2021-10-04T00:00:00", "2021-10-05T00:00:00", "2021-10-06T00:00:00", "2021-10-07T00:00:00", "2021-10-08T00:00:00", "2021-10-09T00:00:00", "2021-10-10T00:00:00", "2021-10-11T00:00:00", "2021-10-12T00:00:00", "2021-10-13T00:00:00", "2021-10-14T00:00:00", "2021-10-15T00:00:00", "2021-10-16T00:00:00", "2021-10-17T00:00:00", "2021-10-18T00:00:00", "2021-10-19T00:00:00", "2021-10-20T00:00:00", "2021-10-21T00:00:00", "2021-10-22T00:00:00", "2021-10-23T00:00:00", "2021-10-24T00:00:00", "2021-10-25T00:00:00", "2021-10-26T00:00:00", "2021-10-27T00:00:00", "2021-10-28T00:00:00", "2021-10-29T00:00:00", "2021-10-30T00:00:00", "2021-10-31T00:00:00", "2021-11-01T00:00:00", "2021-11-02T00:00:00", "2021-11-03T00:00:00", "2021-11-04T00:00:00", "2021-11-05T00:00:00", "2021-11-06T00:00:00", "2021-11-07T00:00:00", "2021-11-08T00:00:00", "2021-11-09T00:00:00", "2021-11-10T00:00:00", "2021-11-11T00:00:00", "2021-11-12T00:00:00", "2021-11-13T00:00:00", "2021-11-14T00:00:00", "2021-11-15T00:00:00", "2021-11-16T00:00:00", "2021-11-17T00:00:00", "2021-11-18T00:00:00", "2021-11-19T00:00:00", "2021-11-20T00:00:00", "2021-11-21T00:00:00", "2021-11-22T00:00:00", "2021-11-23T00:00:00", "2021-11-24T00:00:00", "2021-11-25T00:00:00", "2021-11-26T00:00:00", "2021-11-27T00:00:00", "2021-11-28T00:00:00", "2021-11-29T00:00:00", "2021-11-30T00:00:00", "2021-12-01T00:00:00", "2021-12-02T00:00:00", "2021-12-03T00:00:00", "2021-12-04T00:00:00", "2021-12-05T00:00:00", "2021-12-06T00:00:00", "2021-12-07T00:00:00", "2021-12-08T00:00:00", "2021-12-09T00:00:00", "2021-12-10T00:00:00", "2021-12-11T00:00:00", "2021-12-12T00:00:00", "2021-12-13T00:00:00", "2021-12-14T00:00:00", "2021-12-15T00:00:00", "2021-12-16T00:00:00", "2021-12-17T00:00:00", "2021-12-18T00:00:00", "2021-12-19T00:00:00", "2021-12-20T00:00:00", "2021-12-21T00:00:00", "2021-12-22T00:00:00", "2021-12-23T00:00:00", "2021-12-24T00:00:00", "2021-12-25T00:00:00", "2021-12-26T00:00:00", "2021-12-27T00:00:00", "2021-12-28T00:00:00", "2021-12-29T00:00:00", "2021-12-30T00:00:00", "2021-12-31T00:00:00", "2022-01-01T00:00:00", "2022-01-02T00:00:00", "2022-01-03T00:00:00", "2022-01-04T00:00:00", "2022-01-05T00:00:00", "2022-01-06T00:00:00", "2022-01-07T00:00:00", "2022-01-08T00:00:00", "2022-01-09T00:00:00", "2022-01-10T00:00:00", "2022-01-11T00:00:00", "2022-01-12T00:00:00", "2022-01-13T00:00:00", "2022-01-14T00:00:00", "2022-01-15T00:00:00", "2022-01-16T00:00:00", "2022-01-17T00:00:00", "2022-01-18T00:00:00", "2022-01-19T00:00:00", "2022-01-20T00:00:00", "2022-01-21T00:00:00", "2022-01-22T00:00:00", "2022-01-23T00:00:00", "2022-01-24T00:00:00", "2022-01-25T00:00:00", "2022-01-26T00:00:00", "2022-01-27T00:00:00", "2022-01-28T00:00:00", "2022-01-29T00:00:00", "2022-01-30T00:00:00", "2022-01-31T00:00:00", "2022-02-01T00:00:00", "2022-02-02T00:00:00", "2022-02-03T00:00:00", "2022-02-04T00:00:00", "2022-02-05T00:00:00", "2022-02-06T00:00:00", "2022-02-07T00:00:00", "2022-02-08T00:00:00", "2022-02-09T00:00:00", "2022-02-10T00:00:00", "2022-02-11T00:00:00", "2022-02-12T00:00:00", "2022-02-13T00:00:00", "2022-02-14T00:00:00", "2022-02-15T00:00:00", "2022-02-16T00:00:00", "2022-02-17T00:00:00", "2022-02-18T00:00:00", "2022-02-19T00:00:00", "2022-02-20T00:00:00", "2022-02-21T00:00:00", "2022-02-22T00:00:00", "2022-02-23T00:00:00", "2022-02-24T00:00:00", "2022-02-25T00:00:00", "2022-02-26T00:00:00", "2022-02-27T00:00:00", "2022-02-28T00:00:00", "2022-03-01T00:00:00", "2022-03-02T00:00:00", "2022-03-03T00:00:00", "2022-03-04T00:00:00", "2022-03-05T00:00:00", "2022-03-06T00:00:00", "2022-03-07T00:00:00", "2022-03-08T00:00:00", "2022-03-09T00:00:00", "2022-03-10T00:00:00", "2022-03-11T00:00:00", "2022-03-12T00:00:00", "2022-03-13T00:00:00", "2022-03-14T00:00:00", "2022-03-15T00:00:00", "2022-03-16T00:00:00", "2022-03-17T00:00:00", "2022-03-18T00:00:00", "2022-03-19T00:00:00", "2022-03-20T00:00:00", "2022-03-21T00:00:00", "2022-03-22T00:00:00", "2022-03-23T00:00:00", "2022-03-24T00:00:00", "2022-03-25T00:00:00", "2022-03-26T00:00:00", "2022-03-27T00:00:00", "2022-03-28T00:00:00", "2022-03-29T00:00:00", "2022-03-30T00:00:00", "2022-03-31T00:00:00", "2022-04-01T00:00:00", "2022-04-02T00:00:00", "2022-04-03T00:00:00", "2022-04-04T00:00:00", "2022-04-05T00:00:00", "2022-04-06T00:00:00", "2022-04-07T00:00:00", "2022-04-08T00:00:00", "2022-04-09T00:00:00", "2022-04-10T00:00:00", "2022-04-11T00:00:00", "2022-04-12T00:00:00", "2022-04-13T00:00:00", "2022-04-14T00:00:00", "2022-04-15T00:00:00", "2022-04-16T00:00:00", "2022-04-17T00:00:00", "2022-04-18T00:00:00", "2022-04-19T00:00:00", "2022-04-20T00:00:00", "2022-04-21T00:00:00", "2022-04-22T00:00:00", "2022-04-23T00:00:00", "2022-04-24T00:00:00", "2022-04-25T00:00:00", "2022-04-26T00:00:00", "2022-04-27T00:00:00", "2022-04-28T00:00:00", "2022-04-29T00:00:00", "2022-04-30T00:00:00", "2022-05-01T00:00:00", "2022-05-02T00:00:00", "2022-05-03T00:00:00", "2022-05-04T00:00:00", "2022-05-05T00:00:00", "2022-05-06T00:00:00", "2022-05-07T00:00:00", "2022-05-08T00:00:00", "2022-05-09T00:00:00", "2022-05-10T00:00:00", "2022-05-11T00:00:00", "2022-05-12T00:00:00", "2022-05-13T00:00:00", "2022-05-14T00:00:00", "2022-05-15T00:00:00", "2022-05-16T00:00:00", "2022-05-17T00:00:00", "2022-05-18T00:00:00", "2022-05-19T00:00:00", "2022-05-20T00:00:00", "2022-05-21T00:00:00", "2022-05-22T00:00:00", "2022-05-23T00:00:00", "2022-05-24T00:00:00", "2022-05-25T00:00:00", "2022-05-26T00:00:00", "2022-05-27T00:00:00", "2022-05-28T00:00:00", "2022-05-29T00:00:00", "2022-05-30T00:00:00", "2022-05-31T00:00:00", "2022-06-01T00:00:00", "2022-06-02T00:00:00", "2022-06-03T00:00:00", "2022-06-04T00:00:00", "2022-06-05T00:00:00", "2022-06-06T00:00:00", "2022-06-07T00:00:00", "2022-06-08T00:00:00", "2022-06-09T00:00:00", "2022-06-10T00:00:00", "2022-06-11T00:00:00", "2022-06-12T00:00:00", "2022-06-13T00:00:00", "2022-06-14T00:00:00", "2022-06-15T00:00:00", "2022-06-16T00:00:00", "2022-06-17T00:00:00", "2022-06-18T00:00:00", "2022-06-19T00:00:00", "2022-06-20T00:00:00", "2022-06-21T00:00:00", "2022-06-22T00:00:00", "2022-06-23T00:00:00", "2022-06-24T00:00:00", "2022-06-25T00:00:00", "2022-06-26T00:00:00", "2022-06-27T00:00:00", "2022-06-28T00:00:00", "2022-06-29T00:00:00", "2022-06-30T00:00:00", "2022-07-01T00:00:00", "2022-07-02T00:00:00", "2022-07-03T00:00:00", "2022-07-04T00:00:00", "2022-07-05T00:00:00", "2022-07-06T00:00:00", "2022-07-07T00:00:00", "2022-07-08T00:00:00", "2022-07-09T00:00:00", "2022-07-10T00:00:00", "2022-07-11T00:00:00", "2022-07-12T00:00:00", "2022-07-13T00:00:00", "2022-07-14T00:00:00", "2022-07-15T00:00:00", "2022-07-16T00:00:00", "2022-07-17T00:00:00", "2022-07-18T00:00:00", "2022-07-19T00:00:00", "2022-07-20T00:00:00", "2022-07-21T00:00:00", "2022-07-22T00:00:00", "2022-07-23T00:00:00", "2022-07-24T00:00:00", "2022-07-25T00:00:00", "2022-07-26T00:00:00", "2022-07-27T00:00:00", "2022-07-28T00:00:00", "2022-07-29T00:00:00", "2022-07-30T00:00:00", "2022-07-31T00:00:00", "2022-08-01T00:00:00", "2022-08-02T00:00:00", "2022-08-03T00:00:00", "2022-08-04T00:00:00", "2022-08-05T00:00:00", "2022-08-06T00:00:00", "2022-08-07T00:00:00", "2022-08-08T00:00:00", "2022-08-09T00:00:00", "2022-08-10T00:00:00", "2022-08-11T00:00:00", "2022-08-12T00:00:00", "2022-08-13T00:00:00", "2022-08-14T00:00:00", "2022-08-15T00:00:00", "2022-08-16T00:00:00", "2022-08-17T00:00:00", "2022-08-18T00:00:00", "2022-08-19T00:00:00", "2022-08-20T00:00:00", "2022-08-21T00:00:00", "2022-08-22T00:00:00", "2022-08-23T00:00:00", "2022-08-24T00:00:00", "2022-08-25T00:00:00", "2022-08-26T00:00:00", "2022-08-27T00:00:00", "2022-08-28T00:00:00", "2022-08-29T00:00:00", "2022-08-30T00:00:00", "2022-08-31T00:00:00", "2022-09-01T00:00:00", "2022-09-02T00:00:00", "2022-09-03T00:00:00", "2022-09-04T00:00:00", "2022-09-05T00:00:00", "2022-09-06T00:00:00", "2022-09-07T00:00:00", "2022-09-08T00:00:00", "2022-09-09T00:00:00", "2022-09-10T00:00:00", "2022-09-11T00:00:00", "2022-09-12T00:00:00", "2022-09-13T00:00:00", "2022-09-14T00:00:00", "2022-09-15T00:00:00", "2022-09-16T00:00:00", "2022-09-17T00:00:00", "2022-09-18T00:00:00", "2022-09-19T00:00:00", "2022-09-20T00:00:00", "2022-09-21T00:00:00", "2022-09-22T00:00:00", "2022-09-23T00:00:00", "2022-09-24T00:00:00", "2022-09-25T00:00:00", "2022-09-26T00:00:00", "2022-09-27T00:00:00", "2022-09-28T00:00:00", "2022-09-29T00:00:00", "2022-09-30T00:00:00", "2022-10-01T00:00:00", "2022-10-02T00:00:00", "2022-10-03T00:00:00", "2022-10-04T00:00:00", "2022-10-05T00:00:00", "2022-10-06T00:00:00", "2022-10-07T00:00:00", "2022-10-08T00:00:00", "2022-10-09T00:00:00", "2022-10-10T00:00:00", "2022-10-11T00:00:00", "2022-10-12T00:00:00", "2022-10-13T00:00:00", "2022-10-14T00:00:00", "2022-10-15T00:00:00", "2022-10-16T00:00:00", "2022-10-17T00:00:00", "2022-10-18T00:00:00", "2022-10-19T00:00:00", "2022-10-20T00:00:00", "2022-10-21T00:00:00", "2022-10-22T00:00:00", "2022-10-23T00:00:00", "2022-10-24T00:00:00", "2022-10-25T00:00:00", "2022-10-26T00:00:00", "2022-10-27T00:00:00", "2022-10-28T00:00:00", "2022-10-29T00:00:00", "2022-10-30T00:00:00", "2022-10-31T00:00:00", "2022-11-01T00:00:00", "2022-11-02T00:00:00", "2022-11-03T00:00:00", "2022-11-04T00:00:00", "2022-11-05T00:00:00", "2022-11-06T00:00:00", "2022-11-07T00:00:00", "2022-11-08T00:00:00"],
        "y": [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 1.0, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 1.0, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 1.0, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 1.0, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 1.0, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 1.0, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 1.0, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
        "type": "scatter"
    }], {

allsyntax · November 10, 2022, 4:03pm

script part 2 of 2:

        "template": {
            "data": {
                "histogram2dcontour": [{
                    "type": "histogram2dcontour",
                    "colorbar": {
                        "outlinewidth": 0,
                        "ticks": ""
                    },
                    "colorscale": [
                        [0.0, "#0d0887"],
                        [0.1111111111111111, "#46039f"],
                        [0.2222222222222222, "#7201a8"],
                        [0.3333333333333333, "#9c179e"],
                        [0.4444444444444444, "#bd3786"],
                        [0.5555555555555556, "#d8576b"],
                        [0.6666666666666666, "#ed7953"],
                        [0.7777777777777778, "#fb9f3a"],
                        [0.8888888888888888, "#fdca26"],
                        [1.0, "#f0f921"]
                    ]
                }],
                "choropleth": [{
                    "type": "choropleth",
                    "colorbar": {
                        "outlinewidth": 0,
                        "ticks": ""
                    }
                }],
                "histogram2d": [{
                    "type": "histogram2d",
                    "colorbar": {
                        "outlinewidth": 0,
                        "ticks": ""
                    },
                    "colorscale": [
                        [0.0, "#0d0887"],
                        [0.1111111111111111, "#46039f"],
                        [0.2222222222222222, "#7201a8"],
                        [0.3333333333333333, "#9c179e"],
                        [0.4444444444444444, "#bd3786"],
                        [0.5555555555555556, "#d8576b"],
                        [0.6666666666666666, "#ed7953"],
                        [0.7777777777777778, "#fb9f3a"],
                        [0.8888888888888888, "#fdca26"],
                        [1.0, "#f0f921"]
                    ]
                }],
                "heatmap": [{
                    "type": "heatmap",
                    "colorbar": {
                        "outlinewidth": 0,
                        "ticks": ""
                    },
                    "colorscale": [
                        [0.0, "#0d0887"],
                        [0.1111111111111111, "#46039f"],
                        [0.2222222222222222, "#7201a8"],
                        [0.3333333333333333, "#9c179e"],
                        [0.4444444444444444, "#bd3786"],
                        [0.5555555555555556, "#d8576b"],
                        [0.6666666666666666, "#ed7953"],
                        [0.7777777777777778, "#fb9f3a"],
                        [0.8888888888888888, "#fdca26"],
                        [1.0, "#f0f921"]
                    ]
                }],
                "heatmapgl": [{
                    "type": "heatmapgl",
                    "colorbar": {
                        "outlinewidth": 0,
                        "ticks": ""
                    },
                    "colorscale": [
                        [0.0, "#0d0887"],
                        [0.1111111111111111, "#46039f"],
                        [0.2222222222222222, "#7201a8"],
                        [0.3333333333333333, "#9c179e"],
                        [0.4444444444444444, "#bd3786"],
                        [0.5555555555555556, "#d8576b"],
                        [0.6666666666666666, "#ed7953"],
                        [0.7777777777777778, "#fb9f3a"],
                        [0.8888888888888888, "#fdca26"],
                        [1.0, "#f0f921"]
                    ]
                }],
                "contourcarpet": [{
                    "type": "contourcarpet",
                    "colorbar": {
                        "outlinewidth": 0,
                        "ticks": ""
                    }
                }],
                "contour": [{
                    "type": "contour",
                    "colorbar": {
                        "outlinewidth": 0,
                        "ticks": ""
                    },
                    "colorscale": [
                        [0.0, "#0d0887"],
                        [0.1111111111111111, "#46039f"],
                        [0.2222222222222222, "#7201a8"],
                        [0.3333333333333333, "#9c179e"],
                        [0.4444444444444444, "#bd3786"],
                        [0.5555555555555556, "#d8576b"],
                        [0.6666666666666666, "#ed7953"],
                        [0.7777777777777778, "#fb9f3a"],
                        [0.8888888888888888, "#fdca26"],
                        [1.0, "#f0f921"]
                    ]
                }],
                "surface": [{
                    "type": "surface",
                    "colorbar": {
                        "outlinewidth": 0,
                        "ticks": ""
                    },
                    "colorscale": [
                        [0.0, "#0d0887"],
                        [0.1111111111111111, "#46039f"],
                        [0.2222222222222222, "#7201a8"],
                        [0.3333333333333333, "#9c179e"],
                        [0.4444444444444444, "#bd3786"],
                        [0.5555555555555556, "#d8576b"],
                        [0.6666666666666666, "#ed7953"],
                        [0.7777777777777778, "#fb9f3a"],
                        [0.8888888888888888, "#fdca26"],
                        [1.0, "#f0f921"]
                    ]
                }],
                "mesh3d": [{
                    "type": "mesh3d",
                    "colorbar": {
                        "outlinewidth": 0,
                        "ticks": ""
                    }
                }],
                "scatter": [{
                    "fillpattern": {
                        "fillmode": "overlay",
                        "size": 10,
                        "solidity": 0.2
                    },
                    "type": "scatter"
                }],
                "parcoords": [{
                    "type": "parcoords",
                    "line": {
                        "colorbar": {
                            "outlinewidth": 0,
                            "ticks": ""
                        }
                    }
                }],
                "scatterpolargl": [{
                    "type": "scatterpolargl",
                    "marker": {
                        "colorbar": {
                            "outlinewidth": 0,
                            "ticks": ""
                        }
                    }
                }],
                "bar": [{
                    "error_x": {
                        "color": "#2a3f5f"
                    },
                    "error_y": {
                        "color": "#2a3f5f"
                    },
                    "marker": {
                        "line": {
                            "color": "#E5ECF6",
                            "width": 0.5
                        },
                        "pattern": {
                            "fillmode": "overlay",
                            "size": 10,
                            "solidity": 0.2
                        }
                    },
                    "type": "bar"
                }],
                "scattergeo": [{
                    "type": "scattergeo",
                    "marker": {
                        "colorbar": {
                            "outlinewidth": 0,
                            "ticks": ""
                        }
                    }
                }],
                "scatterpolar": [{
                    "type": "scatterpolar",
                    "marker": {
                        "colorbar": {
                            "outlinewidth": 0,
                            "ticks": ""
                        }
                    }
                }],
                "histogram": [{
                    "marker": {
                        "pattern": {
                            "fillmode": "overlay",
                            "size": 10,
                            "solidity": 0.2
                        }
                    },
                    "type": "histogram"
                }],
                "scattergl": [{
                    "type": "scattergl",
                    "marker": {
                        "colorbar": {
                            "outlinewidth": 0,
                            "ticks": ""
                        }
                    }
                }],
                "scatter3d": [{
                    "type": "scatter3d",
                    "line": {
                        "colorbar": {
                            "outlinewidth": 0,
                            "ticks": ""
                        }
                    },
                    "marker": {
                        "colorbar": {
                            "outlinewidth": 0,
                            "ticks": ""
                        }
                    }
                }],
                "scattermapbox": [{
                    "type": "scattermapbox",
                    "marker": {
                        "colorbar": {
                            "outlinewidth": 0,
                            "ticks": ""
                        }
                    }
                }],
                "scatterternary": [{
                    "type": "scatterternary",
                    "marker": {
                        "colorbar": {
                            "outlinewidth": 0,
                            "ticks": ""
                        }
                    }
                }],
                "scattercarpet": [{
                    "type": "scattercarpet",
                    "marker": {
                        "colorbar": {
                            "outlinewidth": 0,
                            "ticks": ""
                        }
                    }
                }],
                "carpet": [{
                    "aaxis": {
                        "endlinecolor": "#2a3f5f",
                        "gridcolor": "white",
                        "linecolor": "white",
                        "minorgridcolor": "white",
                        "startlinecolor": "#2a3f5f"
                    },
                    "baxis": {
                        "endlinecolor": "#2a3f5f",
                        "gridcolor": "white",
                        "linecolor": "white",
                        "minorgridcolor": "white",
                        "startlinecolor": "#2a3f5f"
                    },
                    "type": "carpet"
                }],
                "table": [{
                    "cells": {
                        "fill": {
                            "color": "#EBF0F8"
                        },
                        "line": {
                            "color": "white"
                        }
                    },
                    "header": {
                        "fill": {
                            "color": "#C8D4E3"
                        },
                        "line": {
                            "color": "white"
                        }
                    },
                    "type": "table"
                }],
                "barpolar": [{
                    "marker": {
                        "line": {
                            "color": "#E5ECF6",
                            "width": 0.5
                        },
                        "pattern": {
                            "fillmode": "overlay",
                            "size": 10,
                            "solidity": 0.2
                        }
                    },
                    "type": "barpolar"
                }],
                "pie": [{
                    "automargin": true,
                    "type": "pie"
                }]
            },
            "layout": {
                "autotypenumbers": "strict",
                "colorway": ["#636efa", "#EF553B", "#00cc96", "#ab63fa", "#FFA15A", "#19d3f3", "#FF6692", "#B6E880", "#FF97FF", "#FECB52"],
                "font": {
                    "color": "#2a3f5f"
                },
                "hovermode": "closest",
                "hoverlabel": {
                    "align": "left"
                },
                "paper_bgcolor": "white",
                "plot_bgcolor": "#E5ECF6",
                "polar": {
                    "bgcolor": "#E5ECF6",
                    "angularaxis": {
                        "gridcolor": "white",
                        "linecolor": "white",
                        "ticks": ""
                    },
                    "radialaxis": {
                        "gridcolor": "white",
                        "linecolor": "white",
                        "ticks": ""
                    }
                },
                "ternary": {
                    "bgcolor": "#E5ECF6",
                    "aaxis": {
                        "gridcolor": "white",
                        "linecolor": "white",
                        "ticks": ""
                    },
                    "baxis": {
                        "gridcolor": "white",
                        "linecolor": "white",
                        "ticks": ""
                    },
                    "caxis": {
                        "gridcolor": "white",
                        "linecolor": "white",
                        "ticks": ""
                    }
                },
                "coloraxis": {
                    "colorbar": {
                        "outlinewidth": 0,
                        "ticks": ""
                    }
                },
                "colorscale": {
                    "sequential": [
                        [0.0, "#0d0887"],
                        [0.1111111111111111, "#46039f"],
                        [0.2222222222222222, "#7201a8"],
                        [0.3333333333333333, "#9c179e"],
                        [0.4444444444444444, "#bd3786"],
                        [0.5555555555555556, "#d8576b"],
                        [0.6666666666666666, "#ed7953"],
                        [0.7777777777777778, "#fb9f3a"],
                        [0.8888888888888888, "#fdca26"],
                        [1.0, "#f0f921"]
                    ],
                    "sequentialminus": [
                        [0.0, "#0d0887"],
                        [0.1111111111111111, "#46039f"],
                        [0.2222222222222222, "#7201a8"],
                        [0.3333333333333333, "#9c179e"],
                        [0.4444444444444444, "#bd3786"],
                        [0.5555555555555556, "#d8576b"],
                        [0.6666666666666666, "#ed7953"],
                        [0.7777777777777778, "#fb9f3a"],
                        [0.8888888888888888, "#fdca26"],
                        [1.0, "#f0f921"]
                    ],
                    "diverging": [
                        [0, "#8e0152"],
                        [0.1, "#c51b7d"],
                        [0.2, "#de77ae"],
                        [0.3, "#f1b6da"],
                        [0.4, "#fde0ef"],
                        [0.5, "#f7f7f7"],
                        [0.6, "#e6f5d0"],
                        [0.7, "#b8e186"],
                        [0.8, "#7fbc41"],
                        [0.9, "#4d9221"],
                        [1, "#276419"]
                    ]
                },
                "xaxis": {
                    "gridcolor": "white",
                    "linecolor": "white",
                    "ticks": "",
                    "title": {
                        "standoff": 15
                    },
                    "zerolinecolor": "white",
                    "automargin": true,
                    "zerolinewidth": 2
                },
                "yaxis": {
                    "gridcolor": "white",
                    "linecolor": "white",
                    "ticks": "",
                    "title": {
                        "standoff": 15
                    },
                    "zerolinecolor": "white",
                    "automargin": true,
                    "zerolinewidth": 2
                },
                "scene": {
                    "xaxis": {
                        "backgroundcolor": "#E5ECF6",
                        "gridcolor": "white",
                        "linecolor": "white",
                        "showbackground": true,
                        "ticks": "",
                        "zerolinecolor": "white",
                        "gridwidth": 2
                    },
                    "yaxis": {
                        "backgroundcolor": "#E5ECF6",
                        "gridcolor": "white",
                        "linecolor": "white",
                        "showbackground": true,
                        "ticks": "",
                        "zerolinecolor": "white",
                        "gridwidth": 2
                    },
                    "zaxis": {
                        "backgroundcolor": "#E5ECF6",
                        "gridcolor": "white",
                        "linecolor": "white",
                        "showbackground": true,
                        "ticks": "",
                        "zerolinecolor": "white",
                        "gridwidth": 2
                    }
                },
                "shapedefaults": {
                    "line": {
                        "color": "#2a3f5f"
                    }
                },
                "annotationdefaults": {
                    "arrowcolor": "#2a3f5f",
                    "arrowhead": 0,
                    "arrowwidth": 1
                },
                "geo": {
                    "bgcolor": "white",
                    "landcolor": "#E5ECF6",
                    "subunitcolor": "white",
                    "showland": true,
                    "showlakes": true,
                    "lakecolor": "white"
                },
                "title": {
                    "x": 0.05
                },
                "mapbox": {
                    "style": "light"
                }
            }
        },
        "legend": {
            "orientation": "h",
            "yanchor": "bottom",
            "y": -0.2,
            "xanchor": "center",
            "x": 0.5
        },
        "margin": {
            "l": 2,
            "r": 5,
            "b": 20,
            "t": 25
        }
    }, {
        "responsive": true
    })
}; < /script>

jinnyzor · November 11, 2022, 4:50pm

Hello @allsyntax,

I tried several ways, altering the class, adding items in the tspan, changing it from a tspan, placing the svg in the content.

The issue is that the svg is rendered all together and the before just never shows up for some reason. HTML registers that it should be there… Sorry mate. I think you can use the custom icons in the hoverData though.

allsyntax · November 11, 2022, 5:09pm

Thanks for trying. Not sure if I should post as a separate topic, but I’m finding that plotting an image instead for each data point only seems to work if X axis is a number, like 0, 1, 2, 3, 4, 5. If i use DATE from my DF, the images will not appear. Any thoughts on this? I confirmed by just using a counter in the for loop, and assigning to x.

works – but not date x-axis:

        for x, y in enumerate(df3['D_DATE']):
           fig.add_layout_image(
              dict(
                source=myIcon,
                xref="x",
                yref="y",
                x=mycount, #if i use: x=df3['D_DATE'].iloc[x] here, it will not show image.
                y=1,
                sizex=0.5,
                sizey=0.5,
                xanchor="center",
                yanchor="middle",
                #sizing="contain",
                #opacity=0.8,
                layer="above"
              )
           )
           mycount = mycount + 1

jinnyzor · November 11, 2022, 5:16pm

I think you should try changing the date from date to timestamp.

allsyntax · November 11, 2022, 7:08pm

No dice. My try:

     fig = go.Figure()
        df['D_DATE'] = pd.to_numeric(df['D_DATE'].values) / 10 ** 9

        fig.add_trace(
             go.Scatter(mode='markers', x=df['D_DATE'], y=df['Note'])
             )

        df3 = df.dropna(subset=['Note'])

        for x, y in enumerate(df3['D_DATE']):
           print(df3['D_DATE'].iloc[x])
           fig.add_layout_image(
              dict(
                source=myIcon,
                xref="x",
                yref="y",
                x=df3['D_DATE'].iloc[x],
                y=1,
                sizex=0.5,
                sizey=0.5,
                xanchor="center",
                yanchor="middle",
                #sizing="contain",
                #opacity=0.8,
                layer="above"
              )
           )

jinnyzor · November 11, 2022, 7:23pm

I know there was a topic about an issue plotting a vertical line with datetime and it had to be converted to a timestamp… and then divided by 100 I think.

@AIMPED, do you remember, or help out?

AIMPED · November 14, 2022, 7:43am

Hi @jinnyzor , I can’t remember the topic you are talking about. I will look into this when I find the time.

jinnyzor · November 14, 2022, 1:59pm

Here, check out this article:

Topic		Replies	Views
Using custom font icons in plotly scatter plot 📊 Plotly Python	1	1123	November 7, 2022
Plotly Scatter Text Special Character 📊 Plotly Python	3	359	September 18, 2022
FontAwesome Unicode in Plotly JS Scatterplot plotly.js	1	530	May 23, 2023
Plotly html rendering issues 📊 Plotly Python	0	598	April 28, 2020
How to do a chart like this one 📊 Plotly Python	1	1428	September 22, 2019

Plotly Scatter Plot Text as HTML/CSS

Related Topics