Inset Plots in JavaScript

How to make an inset graph in D3.js-based javascript charts.

Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Try Plotly Studio now.

Simple Inset Graph

var trace1 = {
  x: [1, 2, 3],
  y: [4, 3, 2],
  type: 'scatter'
};

var trace2 = {
  x: [20, 30, 40],
  y: [30, 40, 50],
  xaxis: 'x2',
  yaxis: 'y2',
  type: 'scatter'
};

var data = [trace1, trace2];

var layout = {
  yaxis2: {
    domain: [0.6, 0.95],
    anchor: 'x2'
  },
  xaxis2: {
    domain: [0.6, 0.95],
    anchor: 'y2'
  }
};

Plotly.newPlot('myDiv', data, layout);