Plotly: How to plot histogram with multiple axes?

Question

I would superpose this 2 next histograms To have this histogram (this histogram was obtained after the answer in this discussion) when I display them one by one it works but the problem is when I do sublopt (px.histogram)

import plotly.graph_objects as go
from plotly.subplots import make_subplots

# Create figure with secondary y-axis
fig = make_subplots(specs=[[{"secondary_y": True}]])

# Add traces
fig.add_trace(
    px.histogram(data, x="mean_rating"),
    secondary_y=False
)

fig.add_trace(
    go.Scatter(x=[2, 3, 4], y=[4, 5, 6], name="yaxis2 data"),
    secondary_y=True,
)

ValueError: 
    Invalid element(s) received for the 'data' property of 
        Invalid elements include: [Figure({

due at line: fig.add_trace( px.histogram(data, x="mean_rating"),

I cannot incorporate px.histogram

data:

data = {'id': {0: 'TZJHLljE',
  1: 'l1NXvwaE',
  2: 'mIICvQHh',
  3: 'kWKvrqYL',
  4: '9tXo1AUZ'},
 'rated': {0: False, 1: True, 2: True, 3: True, 4: True},
 'created_at': {0: 1504210000000.0,
  1: 1504130000000.0,
  2: 1504130000000.0,
  3: 1504110000000.0,
  4: 1504030000000.0},
 'last_move_at': {0: 1504210000000.0,
  1: 1504130000000.0,
  2: 1504130000000.0,
  3: 1504110000000.0,
  4: 1504030000000.0},
 'turns': {0: 13, 1: 16, 2: 61, 3: 61, 4: 95},
 'victory_status': {0: 'outoftime',
  1: 'resign',
  2: 'mate',
  3: 'mate',
  4: 'mate'},
 'winner': {0: 'white', 1: 'black', 2: 'white', 3: 'white', 4: 'white'},
 'increment_code': {0: '15+2', 1: '5+10', 2: '5+10', 3: '20+0', 4: '30+3'},
 'white_id': {0: 'bourgris',
  1: 'a-00',
  2: 'ischia',
  3: 'daniamurashov',
  4: 'nik221107'},
 'white_rating': {0: 1500, 1: 1322, 2: 1496, 3: 1439, 4: 1523},
 'black_id': {0: 'a-00',
  1: 'skinnerua',
  2: 'a-00',
  3: 'adivanov2009',
  4: 'adivanov2009'},
 'black_rating': {0: 1191, 1: 1261, 2: 1500, 3: 1454, 4: 1469},
 'moves': {0: 'd4 d5 c4 c6 cxd5 e6 dxe6 fxe6 Nf3 Bb4+ Nc3 Ba5 Bf4',
  1: 'd4 Nc6 e4 e5 f4 f6 dxe5 fxe5 fxe5 Nxe5 Qd4 Nc6 Qe5+ Nxe5 c4 Bb4+',
  2: 'e4 e5 d3 d6 Be3 c6 Be2 b5 Nd2 a5 a4 c5 axb5 Nc6 bxc6 Ra6 Nc4 a4 c3 a3 Nxa3 Rxa3 Rxa3 c4 dxc4 d5 cxd5 Qxd5 exd5 Be6 Ra8+ Ke7 Bc5+ Kf6 Bxf8 Kg6 Bxg7 Kxg7 dxe6 Kh6 exf7 Nf6 Rxh8 Nh5 Bxh5 Kg5 Rxh7 Kf5 Qf3+ Ke6 Bg4+ Kd6 Rh6+ Kc5 Qe3+ Kb5 c4+ Kb4 Qc3+ Ka4 Bd1#',
  3: 'd4 d5 Nf3 Bf5 Nc3 Nf6 Bf4 Ng4 e3 Nc6 Be2 Qd7 O-O O-O-O Nb5 Nb4 Rc1 Nxa2 Ra1 Nb4 Nxa7+ Kb8 Nb5 Bxc2 Bxc7+ Kc8 Qd2 Qc6 Na7+ Kd7 Nxc6 bxc6 Bxd8 Kxd8 Qxb4 e5 Qb8+ Ke7 dxe5 Be4 Ra7+ Ke6 Qe8+ Kf5 Qxf7+ Nf6 Nh4+ Kg5 g3 Ng4 Qf4+ Kh5 Qxg4+ Kh6 Qf4+ g5 Qf6+ Bg6 Nxg6 Bg7 Qxg7#',
  4: 'e4 e5 Nf3 d6 d4 Nc6 d5 Nb4 a3 Na6 Nc3 Be7 b4 Nf6 Bg5 O-O b5 Nc5 Bxf6 Bxf6 Bd3 Qd7 O-O Nxd3 Qxd3 c6 a4 cxd5 Nxd5 Qe6 Nc7 Qg4 Nxa8 Bd7 Nc7 Rc8 Nd5 Qg6 Nxf6+ Qxf6 Rfd1 Re8 Qxd6 Bg4 Qxf6 gxf6 Rd3 Bxf3 Rxf3 Rd8 Rxf6 Kg7 Rf3 Rd2 Rg3+ Kf8 c3 Re2 f3 Rc2 Rg5 f6 Rh5 Kg7 Rd1 Kg6 Rh3 Rxc3 Rd7 Rc1+ Kf2 Rc2+ Kg3 h5 Rxb7 Kg5 Rxa7 h4+ Rxh4 Rxg2+ Kxg2 Kxh4 b6 Kg5 b7 f5 exf5 Kxf5 b8=Q e4 Rf7+ Kg5 Qg8+ Kh6 Rh7#'},
 'opening_eco': {0: 'D10', 1: 'B00', 2: 'C20', 3: 'D02', 4: 'C41'},
 'opening_name': {0: 'Slav Defense: Exchange Variation',
  1: 'Nimzowitsch Defense: Kennedy Variation',
  2: "King's Pawn Game: Leonardis Variation",
  3: "Queen's Pawn Game: Zukertort Variation",
  4: 'Philidor Defense'},
 'opening_ply': {0: 5, 1: 4, 2: 3, 3: 3, 4: 5},
 'opening_name_trimmed': {0: 'Slav Defense',
  1: 'Nimzowitsch Defense',
  2: "King's Pawn Game",
  3: "Queen's Pawn Game",
  4: 'Philidor Defense'},
 'mean_rating': {0: 1345.5, 1: 1291.5, 2: 1498.0, 3: 1446.5, 4: 1496.0},
 'count': {0: 1, 1: 1, 2: 1, 3: 1, 4: 1},
 'black': {0: 0, 1: 1, 2: 0, 3: 0, 4: 0},
 'draw': {0: 0, 1: 0, 2: 0, 3: 0, 4: 0},
 'white': {0: 1, 1: 0, 2: 1, 3: 1, 4: 1}}

Answer 1

The error:

ValueError: 
    Invalid element(s) received for the 'data' property of 
        Invalid elements include: [Figure({

...is raised because you're trying to use a Figure object (returned by px.histogram ) as an argument where such an object is not accepted. fig.add_trace() accepts traces such as plotly.graph_objs._scatter (returned by go.Scatter ). That does not mean that what you're trying to do here is impossible though. Only a bit cumbersome.

The fact that your histogram will have values in the range of 1200-1500 and your scatter trace has x=[2, 3, 4] poses a challenge as long as you'd like to have a shared x-axis. If that's not necessarily the case you can set up double y-axes and double x-axes. I don't know if you'd prefer to handle the rest with go.Histogram or px.histogram . I often see cases where users like to run px.histogram , and then build on that. And you can set up a px.histogram , "steal" the values from there and use them in go.Histogram traces and combine them with go.Scatter traces. The code snippet below does just that to produce this figure:

import numpy as np
import plotly.graph_objects as go
from plotly.subplots import make_subplots
import pandas as pd
import plotly.express as px

data = {'id': {0: 'TZJHLljE',
  1: 'l1NXvwaE',
  2: 'mIICvQHh',
  3: 'kWKvrqYL',
  4: '9tXo1AUZ'},
 'rated': {0: False, 1: True, 2: True, 3: True, 4: True},
 'created_at': {0: 1504210000000.0,
  1: 1504130000000.0,
  2: 1504130000000.0,
  3: 1504110000000.0,
  4: 1504030000000.0},
 'last_move_at': {0: 1504210000000.0,
  1: 1504130000000.0,
  2: 1504130000000.0,
  3: 1504110000000.0,
  4: 1504030000000.0},
 'turns': {0: 13, 1: 16, 2: 61, 3: 61, 4: 95},
 'victory_status': {0: 'outoftime',
  1: 'resign',
  2: 'mate',
  3: 'mate',
  4: 'mate'},
 'winner': {0: 'white', 1: 'black', 2: 'white', 3: 'white', 4: 'white'},
 'increment_code': {0: '15+2', 1: '5+10', 2: '5+10', 3: '20+0', 4: '30+3'},
 'white_id': {0: 'bourgris',
  1: 'a-00',
  2: 'ischia',
  3: 'daniamurashov',
  4: 'nik221107'},
 'white_rating': {0: 1500, 1: 1322, 2: 1496, 3: 1439, 4: 1523},
 'black_id': {0: 'a-00',
  1: 'skinnerua',
  2: 'a-00',
  3: 'adivanov2009',
  4: 'adivanov2009'},
 'black_rating': {0: 1191, 1: 1261, 2: 1500, 3: 1454, 4: 1469},
 'moves': {0: 'd4 d5 c4 c6 cxd5 e6 dxe6 fxe6 Nf3 Bb4+ Nc3 Ba5 Bf4',
  1: 'd4 Nc6 e4 e5 f4 f6 dxe5 fxe5 fxe5 Nxe5 Qd4 Nc6 Qe5+ Nxe5 c4 Bb4+',
  2: 'e4 e5 d3 d6 Be3 c6 Be2 b5 Nd2 a5 a4 c5 axb5 Nc6 bxc6 Ra6 Nc4 a4 c3 a3 Nxa3 Rxa3 Rxa3 c4 dxc4 d5 cxd5 Qxd5 exd5 Be6 Ra8+ Ke7 Bc5+ Kf6 Bxf8 Kg6 Bxg7 Kxg7 dxe6 Kh6 exf7 Nf6 Rxh8 Nh5 Bxh5 Kg5 Rxh7 Kf5 Qf3+ Ke6 Bg4+ Kd6 Rh6+ Kc5 Qe3+ Kb5 c4+ Kb4 Qc3+ Ka4 Bd1#',
  3: 'd4 d5 Nf3 Bf5 Nc3 Nf6 Bf4 Ng4 e3 Nc6 Be2 Qd7 O-O O-O-O Nb5 Nb4 Rc1 Nxa2 Ra1 Nb4 Nxa7+ Kb8 Nb5 Bxc2 Bxc7+ Kc8 Qd2 Qc6 Na7+ Kd7 Nxc6 bxc6 Bxd8 Kxd8 Qxb4 e5 Qb8+ Ke7 dxe5 Be4 Ra7+ Ke6 Qe8+ Kf5 Qxf7+ Nf6 Nh4+ Kg5 g3 Ng4 Qf4+ Kh5 Qxg4+ Kh6 Qf4+ g5 Qf6+ Bg6 Nxg6 Bg7 Qxg7#',
  4: 'e4 e5 Nf3 d6 d4 Nc6 d5 Nb4 a3 Na6 Nc3 Be7 b4 Nf6 Bg5 O-O b5 Nc5 Bxf6 Bxf6 Bd3 Qd7 O-O Nxd3 Qxd3 c6 a4 cxd5 Nxd5 Qe6 Nc7 Qg4 Nxa8 Bd7 Nc7 Rc8 Nd5 Qg6 Nxf6+ Qxf6 Rfd1 Re8 Qxd6 Bg4 Qxf6 gxf6 Rd3 Bxf3 Rxf3 Rd8 Rxf6 Kg7 Rf3 Rd2 Rg3+ Kf8 c3 Re2 f3 Rc2 Rg5 f6 Rh5 Kg7 Rd1 Kg6 Rh3 Rxc3 Rd7 Rc1+ Kf2 Rc2+ Kg3 h5 Rxb7 Kg5 Rxa7 h4+ Rxh4 Rxg2+ Kxg2 Kxh4 b6 Kg5 b7 f5 exf5 Kxf5 b8=Q e4 Rf7+ Kg5 Qg8+ Kh6 Rh7#'},
 'opening_eco': {0: 'D10', 1: 'B00', 2: 'C20', 3: 'D02', 4: 'C41'},
 'opening_name': {0: 'Slav Defense: Exchange Variation',
  1: 'Nimzowitsch Defense: Kennedy Variation',
  2: "King's Pawn Game: Leonardis Variation",
  3: "Queen's Pawn Game: Zukertort Variation",
  4: 'Philidor Defense'},
 'opening_ply': {0: 5, 1: 4, 2: 3, 3: 3, 4: 5},
 'opening_name_trimmed': {0: 'Slav Defense',
  1: 'Nimzowitsch Defense',
  2: "King's Pawn Game",
  3: "Queen's Pawn Game",
  4: 'Philidor Defense'},
 'mean_rating': {0: 1345.5, 1: 1291.5, 2: 1498.0, 3: 1446.5, 4: 1496.0},
 'count': {0: 1, 1: 1, 2: 1, 3: 1, 4: 1},
 'black': {0: 0, 1: 1, 2: 0, 3: 0, 4: 0},
 'draw': {0: 0, 1: 0, 2: 0, 3: 0, 4: 0},
 'white': {0: 1, 1: 0, 2: 1, 3: 1, 4: 1}}

data = pd.DataFrame(data)

fig=make_subplots(
        specs=[[{"secondary_y": True}]])

fig.update_layout(xaxis2= {'anchor': 'y', 'overlaying': 'x', 'side': 'top'},
                  yaxis_domain=[0, 0.94]);


hist = px.histogram(data, x="mean_rating")

fig.add_trace(
    go.Histogram(x=hist.data[0].x,
           y=hist.data[0].y,
           name="histogram trace, left y and lower x",
          ), secondary_y=False)
fig.add_trace(
    go.Scatter(x=[2, 3, 4],
               y=[4, 5, 6],
               name="Scatter trace, right y and upper x",
               line_color="#ee0000"), secondary_y=True)
fig.data[1].update(xaxis='x2')
fig.update_layout(width=700, height=475)
fig.show()