Black Lives Matter. Please consider donating to Black Girls Code today.

Table in Plotly.js React component

Hello!

I’m trying to create plots in python and render them with the Plotly.js React component. I was able to render a scatter, but not a table.

Here’s how a create the scatter plot :

import json
import numpy as np
import plotly.graph_objs as go
from plotly.utils import PlotlyJSONEncoder

N = 1000
random_x = np.random.randn(N)
random_y = np.random.randn(N)

# Create a trace
trace = go.Scatter(
    x = random_x,
    y = random_y,
    mode = 'markers'
)

data = [trace]
layout = dict(title="Example Scatter Plot")

figure = go.Figure(data=data, layout=layout)

json_str = json.dumps(figure, cls=PlotlyJSONEncoder)
print("Json to send to the React component:")
print("\n\n%s\n\n" % json_str)

I put the output of this in a Gist here.

When I paste this url in the Plotly.js JSON Editor, I get the scatter plot.

For the table, the code would be :

trace = go.Table(
    header=dict(values=['A Scores', 'B Scores']),
    cells=dict(values=[[100, 90, 80, 90],
                       [95, 85, 75, 95]]))

data = [trace] 
layout = dict(title="Example Table")
figure = go.Figure(data=data, layout=layout)

json_str = json.dumps(figure, cls=PlotlyJSONEncoder)
print("Json to send to the React component:")
print("\n\n%s\n\n" % json_str)

The output of this is here. But that link doesn’t work in the JSON Editor.

Are tables supported in React?

Thank you!