JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.plot.ly/plotly-2.26.2.min.js" charset="utf-8"></script>
JavaScript
const data = [{
"alignmentgroup": "True",
"base": [
"2023-10-01",
"2023-10-04"
],
"customdata": [
[
"A"
],
[
"A"
]
],
"hovertemplate": "label=%{customdata[0]}<br>start=%{base}<br>end=%{x}<br>y=%{y}<extra></extra>",
"legendgroup": "A",
"marker": {
"color": "#239E1A",
"pattern": {
"shape": ""
}
},
"name": "A",
"offsetgroup": "A",
"orientation": "h",
"showlegend": true,
"textposition": "auto",
"x": [
172800000,
172800000
],
"xaxis": "x",
"y": [
"",
""
],
"yaxis": "y",
"type": "bar"
},
{
"alignmentgroup": "True",
"base": [
"2023-10-03"
],
"customdata": [
[
"B"
]
],
"hovertemplate": "label=%{customdata[0]}<br>start=%{base}<br>end=%{x}<br>y=%{y}<extra></extra>",
"legendgroup": "B",
"marker": {
"color": "#000002",
"pattern": {
"shape": ""
}
},
"name": "B",
"offsetgroup": "B",
"orientation": "h",
"showlegend": true,
"textposition": "auto",
"x": [
86400000
],
"xaxis": "x",
"y": [
""
],
"yaxis": "y",
"type": "bar"
}
]
const layout = {
"template": {
"data": {
"candlestick": [{
"decreasing": {
"line": {
"color": "#000033"
}
},
"increasing": {
"line": {
"color": "#000032"
}
},
"type": "candlestick"
}],
"contourcarpet": [{
"colorscale": [
[
0,
"#000011"
],
[
0.1111111111111111,
"#000012"
],
[
0.2222222222222222,
"#000013"
],
[
0.3333333333333333,
"#000014"
],
[
0.4444444444444444,
"#000015"
],
...