React-plotly set default coordinates which the plot is center about-CodePudding

How can I set a default zoom level and center my plot around the origin (0,0)? in react-plotly I am not sure what options are responsible for this in the layout object.

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}
    />
  );
}

CodePudding user response：

Define the x and y axis and use constraintoward: "center". Note you may need to extrapolate the max and min values inside each range from your data if its not static:

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",
        },
      },
    ],
    yaxis: {
      visible: true,
      constraintoward: "center",
      showticklabels: false,
      range: [-10, 10],
    },
    xaxis: {
      visible: true,
      constraintoward: "center",
      showticklabels: false,
      range: [-10, 10],
    },
    height: 400,
    width: 480,
    showlegend: false,
    dragmode: "pan",
  };

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