PlotlyJS rotate ellipse

Question

Is there a way to rotate the ellipse in PlotlyJS? To draw a circle/ellipse in Plotly, you define the center and the radii in the positive and negative x and y directions. Is there a way to define an angle at which the ellipse is rotated around its center or perhaps defining the 4 outermost points of the ellipse instead perhaps rather than having plotly deducing them through the radii values?

import React from 'react';
import Plot from 'react-plotly.js';

export default function App() {

  var layout = {
    shapes: [
      {
        type: 'circle',
        xref: 'x',
        yref: 'y',
        x0: -2,
        y0: -1.56,
        x1: 2,
        y1: 2.09,
        opacity: 0.2,
        fillcolor: 'red',
        line: {
          color: 'red'
        }
      }
    ],
    height: 400,
    width: 480,
    showlegend: false,
    dragmode: 'pan'
  }

  return (
    <Plot
      layout={layout}
    />
  );
}

Answer 1

You can "manually" construct the points of the ellipse:

var center_x = 0;
var center_y = 0;
var a = 3; // major radius
var b = 1; // minor radius
var alpha = Math.PI / 4; // angle of rotation;
var X = [];
var Y = [];
var npoints = 100;
for(var i = 0; i <= npoints; i++) {
  var t = 2 * Math.PI / npoints;
  var x = a * Math.cos(t);
  var y = b * Math.sin(t);
  X.push(center_x + Math.cos(alpha)*x - Math.sin(alpha)*y);
  Y.push(center_y + Math.sin(alpha)*x + Math.cos(alpha)*y);
}

Then plot it with a line type.