JSFiddle - React, Tailwind, and code Playground

HTML

<head>
	<!-- Load plotly.js into the DOM -->
	<script src='https://cdn.plot.ly/plotly-2.12.1.min.js'></script>
</head>

<body>
	<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

JavaScript

let data = [
  {
    x: [1, 2],
    y: [20, 20],
    type: "scatter"
  }
];

let layout = {
  annotations: [
    {
      x: 1,
      y: 0,
      text: "This text should be in the graph perimeter (under the red line)",
      showarrow: false,
      xanchor: "left",
      yanchor: "bottom",
      bgcolor: "rgb(0, 0, 255)",
      font: {
        color: "rgb(255, 255, 255)"
      }
    }
  ],
  xaxis: {
    linewidth: 2,
    linecolor: "rgb(255, 0, 0)",
    mirror: true
  },
  yaxis: {
    autorange: "reversed"
  }
};
let plotly = Plotly.newPlot("myDiv", data, layout);