Single rangeslider for multi xaxis

Dash Python
1

RangeSlider
RangeSlider1512×598 14.8 KB

I need to use a single rangeslider for 3 xaxis, some ideas?

Plotly.newPlot(
“myDiv”,
[
{
x: [“A”, “B”, “C”],
y: [0.3, 0.35, 0.4],
type: “bar”,
name: “series 1a”,
xaxis: ‘x1’,
barmode: ‘stack’,
offsetgroup:‘A’,
marker: {color: ‘#448’}
},
{
x: [“A”, “B”, “C”],
y: [0.6, 0.50, 0.40],
type: “bar”,
name: “series 1b”,
xaxis: ‘x1’,
offsetgroup:‘A’,
barmode: ‘stack’, marker: {color: ‘#88C’}
},
{
x: [“A”, “B”, “C”],
y: [0.1, 0.15, 0.20],
type: “bar”,
name: “series 1c”,
xaxis: ‘x1’,
barmode: ‘stack’,
marker: {color: ‘#CCF’}
},
{
x: [“A”, “B”, “C”],
y: [0.3, 0.35, 0.4],
type: “bar”,
name: “series 2a”,
xaxis: ‘x2’,
showLegend:true,
barmode: ‘stack’, marker: {color: ‘#080’}
},
{
x: [“A”, “B”, “C”],
y: [0.25, 0.15, 0.05],
type: “bar”,
name: “series 2b”,
showLegend:true,
xaxis: ‘x2’,
barmode: ‘stack’, marker: {color: ‘#8c8’}
},
{
x: [“A”, “B”, “C”],
y: [0.45, 0.50, 0.55],
type: “bar”,
name: “series 2c”,
showLegend:true,
xaxis: ‘x2’,
barmode: ‘stack’, marker: {color: ‘#CFC’}
},
{
x: [“A”, “B”, “C”],
y: [0.3, 0.35, 0.4],
type: “bar”,
name: “series 3a”,
showLegend:true,
xaxis: ‘x3’,
barmode: ‘stack’, marker: {color: ‘#880’}
},
{
x: [“A”, “B”, “C”],
y: [0.6, 0.50, 0.40],
type: “bar”,
name: “series 3b”,
showLegend:true,
xaxis: ‘x3’,
barmode: ‘stack’, marker: {color: ‘#CC8’}
},
{
x: [“A”, “B”, “C”],
y: [0.1, 0.15, 0.20],
type: “bar”,
name: “series 3c”,
showLegend:true,
xaxis: ‘x3’,
barmode: ‘stack’, marker: {color: ‘#FFC’}
},
],
{
barmode: “stack”,
yaxis: {tickformat: ‘%’},
xaxis: {
domain: [0, 0.33],
anchor: ‘x1’,
title: ‘Apples’,
rangeslider:{},

},
xaxis2: {
  domain: [0.33, 0.66],
  anchor: 'x2', title: 'Pears',
   rangeslider:{},
},
xaxis3: {
  domain: [0.67, 1.0],
  anchor: 'x3', title: 'Cherries',
   rangeslider:{},
},
xaxis4: {
  domain:[0, 1],
 
}

}
);