Две оси x на боксплоте

Question

Я пытаюсь получить две оси X на блокпосте в Plotly. js. Однако, как только я начну использовать вторую Plotly по оси X. js укладывает два графика друг на друга, как вы можете видеть в этом CodePen .

// get node wrapper
var graph = document.getElementById('graph');

var config = {
  showLink: false,
  editable: false,
  displayModeBar: false,
  displaylogo: false
};

var x = [10,20];

Plotly.newPlot(
	graph,
	[{
		boxpoints: 'all',
		fillcolor: 'cls',
		hoverinfo: 'text+y',
		hoveron: 'points',
		//jitter: 0.5,
		line: {width: 1},
		marker: {size: 4, opacity: 0.5},
		text: ["Anne","Dirk","Joop","Wendy","Karen","Albert","Scott","Renée"],
		type:'box',
		whiskerwidth:0.2,
		y: [69,36,36,60,97,74,84,33],
		xaxis:'x'
	},
 	{
		boxmean: true,
		boxpoints: 'all',
		fillcolor: 'cls',
		hoverinfo: 'text+y',
		hoveron: 'points',
		//jitter: 0.5,
		line: {width: 1},
		marker: {size: 4, opacity: 0.5},
		text: ["Anne","Dirk","Joop","Wendy","Karen","Albert","Scott","Renée"],
		type:'box',
		whiskerwidth:0.2,
		y: [96,21,1,55,46,79,84,62],
		xaxis:'x2'
	}],
	{'title': 'these boxplots shouldnt overlay',
      'xaxis':{
        title:'traditional',
        // tickmode:'array',
        // tickvals:x2,
        // ticktext:x2,
        side: 'bottom',
    },
    'xaxis2':{
        title:'innovative',
        // tickmode:'array',
        // tickvals:x1,
        // ticktext:x1,
        side: 'top',
        overlaying: 'x'
    }, 
  },
  config
);

<script src="https://cdn.plot.ly/plotly-latest.js"></script>
<div id="graph" style="width:1000px;height:500px;">
    
</div>

Закомментирование второй оси x на втором графике ставит графики в соответствующие позиции рядом друг с другом. Я что-то не так делаю?

Answer 1

// get node wrapper
var graph = document.getElementById('graph');

var config = {
  showLink: false,
  editable: false,
  displayModeBar: false,
  displaylogo: false
};

//var x = [10,20];

var trace1 = {
  boxpoints: 'all',
  fillcolor: 'cls',
  hoverinfo: 'text+y',
  hoveron: 'points',
  //jitter: 0.5,
  line: {width: 1},
  marker: {size: 4, opacity: 0.5},
  text: ["Anne","Dirk","Joop","Wendy","Karen","Albert","Scott","Renée"],
  type:'box',
  whiskerwidth:0.2,
  y: [69,36,36,60,97,74,84,33],
  name: 'trace1'
  //xaxis:'x'
};

var trace2 = {
  boxmean: true,
  boxpoints: 'all',
  fillcolor: 'cls',
  hoverinfo: 'text+y',
  hoveron: 'points',
  //jitter: 0.5,
  line: {width: 1},
  marker: {size: 4, opacity: 0.5},
  text: ["Anne","Dirk","Joop","Wendy","Karen","Albert","Scott","Renée"],
  type:'box',
  whiskerwidth:0.2,
  y: [96,21,1,55,46,79,84,62],
  name: 'trace2'
  //xaxis:'x2'
};

var data = [trace1, trace2];

var layout = {'title': 'these boxplots shouldnt overlay',
              'xaxis':{
                title:'traditional',
                // tickmode:'array',
                // tickvals:x2,
                // ticktext:x2,
                side: 'bottom',
              },
              'xaxis2':{
                title:'innovative',
                // tickmode:'array',
                // tickvals:x1,
                // ticktext:x1,
                side: 'top',
                overlaying: 'x'
              }, 
             };
Plotly.newPlot(graph, data, layout, config);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<div id="graph" style="width:1000px;height:500px;"> 
</div>