JSFiddle - React, Tailwind, and code Playground

by Egor Makarenko

HTML

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="chart" style="width:600px;height:250px;">

</div>

JavaScript

Plotly.plot(document.getElementById('chart'), [{
    "marker": {
      "color": [
        "#33a02c",
        "#33a02c",
        "#33a02c",
        "#33a02c",
        "#a6cee3",
        "#a6cee3",
        "#a6cee3",
        "#a6cee3",
        "#b2df8a",
        "#b2df8a",
        "#b2df8a",
        "#b2df8a",
        "#1f78b4",
        "#1f78b4",
        "#1f78b4",
        "#1f78b4"
      ],
      "size": 12,
      "symbol": [
        "circle",
        "circle",
        "circle",
        "circle",
        "square",
        "square",
        "square",
        "square",
        "diamond",
        "diamond",
        "diamond",
        "diamond",
        "cross",
        "cross",
        "cross",
        "cross"
      ]
    },
    "name": "",
    "mode": "markers+text",
    "text": ["Aaaa", "Babbbbbb"],
    "textposition": "bottom",
    "type": "scatter",
    "showlegend": false,
    "x": [-64.2558, -133.2068, -125.2141, -119.266, -59.0507, -80.5183, -80.3712, -87.2268,
      122.1245,
      45.1287,
      66.0921,
      52.5339,
      164.6227,
      96.2829,
      95.452,
      106.8728
    ],
    "y": [
      51.3105,
      104.1074,
      73.7229,
      79.884, -89.3959, -98.1038, -113.1622, -118.7584,
      14.5044,
      56.5505,
      33.4657,
      43.8865, -28.1307,
      0.2066, -12.2448,
      2.1573
    ]
  },
  {
    "x": [1000],
    "y": [1000],
    "marker": {
      "symbol": "circle",
      "color": "#000000",
      "size": 10
    },
    "name": "BMDM, untreated",
    "legendgroup": "shapes",
    "mode": "markers",
    "text": null,
    "type": "scatter",
    "showlegend": true,
    "visible": "legendonly"
  },
  {
    "x": [
      1000
    ],
    "y": [
      1000
    ],
    "marker": {
      "symbol": "square",
      "color": "#000000",
      "size": 10
    },
    "name": "BMDM, IFNg",
    "legendgroup": "shapes",
    "mode": "markers",
    "text": null,
    "type": "scatter",
    "showlegend": true,
    "visible": "legendonly"
  },
  {
    "x": [
  ...