Try replacing this:
<tspan style="font-style:italic">test</tspan>
With this:
<tspan class="fa fa-home">test</tspan>
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: "Open Sans", 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: "Open Sans", 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: "Open Sans", 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: "Open Sans", 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: "Open Sans", 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: "Open Sans", 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: "Open Sans", 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">
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: "Open Sans", 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: "Open Sans", 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: "Open Sans", 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: "Open Sans", 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: "Open Sans", 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: "Open Sans", 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: "Open Sans", 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: "Open Sans", 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: "Open Sans", 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: "Open Sans", 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: "Open Sans", 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: "Open Sans", 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>
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>
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"
}], {
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>
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.
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
I think you should try changing the date from date to timestamp.
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"
)
)
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?
Hi @jinnyzor , I canāt remember the topic you are talking about. I will look into this when I find the time.
Here, check out this article:
1 Like
I used the same function in my loop, x=pd.to_datetime(df3['D_DATE'].iloc[x]) - it doesnāt show the image(s).
But when check the dtype (print(df.D_DATE.dtype)), it says itās already in a timestamp format: datetime64[ns]
I tried converting to other formats, and plotting the image on the chart to no avail:
df3['new_date'] = df3.D_DATE.values.astype(np.int64) // 10 ** 9 dtype = int64
df3['new_date'] = pd.to_numeric(df3['D_DATE'].values) // 10 ** 9 dtype= float64
Try this workaround:
In that solution, it appears theyāre plotting x-axis in milliseconds since epoch by:
datetime.strptime("2018-09-24", "%Y-%m-%d").timestamp() * 1000
if string, otherwise:
datetime(2021,5,27).timestamp() * 1000
Here is my chart with x-axis as ms since epoch:
fig = go.Figure()
df["mod_date"] = pd.to_datetime(df["D_DATE"], format="%Y-%m-%d %H:%M:%S").apply(toTimestamp)
fig.add_trace(
go.Scatter(x=df['mod_date'], y=df['Note'])
)
df3 = df.dropna(subset=['Note']) #limit loop to only records with a note
for x, y in enumerate(df3['mod_date']):
fig.add_layout_image(
dict(
source=myIcon,
xref="x",
yref="y",
x=df3['mod_date'].iloc[x],
y=1,
sizex=0.5,
sizey=0.5,
xanchor="center",
yanchor="middle",
layer="above"
)
)
def toTimestamp(data):
return data.timestamp() * 1000
This does not result in seeing the desired images along x-axis. The x-axis is now in timestamp, seeing labels that are no longer date, instead ā1.5b 1.6b 1.7bā. and there are hover traces that notes are plotted; just no images. Pretty frustrating.
Donāt convert your data, just where you want to plot the text annotations.
Or maybe you could place them with annotations instead of trying to do it at one go.
The problem isnt that they arent showing up, the problem is that they are too small due to the massive scale of the x axis!
import plotly.express as px
import datetime
df = px.data.stocks()
from pprint import pprint
fig = px.scatter(df, y='GOOG', x='date', title='Population of European continent')
for i, r in df.iterrows():
fig.add_layout_image(
dict(
source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Iris_setosa_var._setosa_%282595031014%29.jpg/360px-Iris_setosa_var._setosa_%282595031014%29.jpg",
xref="x",
yref="y",
x=r['date'],
y=r['GOOG'],
sizex=604800*3000,
sizey=0.1,
xanchor="center",
yanchor="middle",
opacity=0.8,
layer="above"
)
)
fig.show()
resulted in this:
Wow. 
unbelievable. I didnāt think this was the case, as I would mouseover the expected points, and even try to zoom. But it didnāt matter. However, this is correct. I set the size like you did sizex=604800*3000 and I DO see the images now. Crazy. I sure beat this up from every angle trying to get it to work when it was seemingly there the whole time.
Can you explain your sizing efforts? Iāll need to read up on the auto resizing that happens.
I was about to try another way with the image on a secondary x-axis (index of D_DATE), with no data labels- which might have also worked. But no need.
1 Like
Well.
I was wondering why we werenāt getting errors on it. So, I inspected and saw the width was 0. When I can fed it manually to 200px, it was there.
Then I knew it was a master of scale. I knew date time was treated as timestamp, which led to the first number, then 30 days for a month ish to get it big enough to see.