plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar
Plotly.js

Inset Plots in plotly.js

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

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

plotly.js runs on all SVG-compatible browsers

Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to a Developer Support Plan.