Add axis labes in react-plotly

plotly.js
1

Hello everyone,

Just today I started using this library to create a 3D plot.
Everything works well except that I am not able to add labels to my x, y, and z-axis.

I am doing everything on React by importing react-plotly.js as explained here.
I am trying to use this example to add the labels and I came up with something like this:
<Plot
data={[
{
type: ‘surface’,
x: graphData.x,
y: graphData.y,
z: graphData.z
}
]}
layout={
{
width: 800,
height: 600,
title: graphData.masterGraph.title,
xaxis: {
name: ‘x Axis’,
titlefont: {
family: ‘Courier New, monospace’,
size: 18,
color: ‘#7f7f7f’
}
},
yaxis: {
name: ‘y Axis’,
titlefont: {
family: ‘Courier New, monospace’,
size: 18,
color: ‘#7f7f7f’
}
}
}
}
/>

Can anyone help me figuring out this problem or have other suggestions?

2

You need to wrap your xaxis and yaxis attribute {} in layout.scene.

See https://plot.ly/javascript/3d-axes/

3

Thank you very much, that did it!
Also, would you know how to display a description when the cursor is hover one of the labels?