Add labels to axis

[RosarioAleCali]

Hello everyone,
I am creating a 3D chart and I would like to add labels to the x, y, z-axis.
This is my code:

<Plot
    data={[
    {
        type: 'surface',
        x: data.x,
        y: data.y,
        z: data.z
    }
    ]}
    layout={
        {
             width: 800,
             height: 600,
             title: data.masterGraph.title,
             xaxis: {
                 title: data.masterGraph.xAxis,
                 titlefont: {
                     family: 'Courier New, monospace',
                     size: 18,
                     color: '#7f7f7f'
                 }
              },
              yaxis: {
                  title: data.masterGraph.yAxis,
                  titlefont: {
                      family: 'Courier New, monospace',
                      size: 18,
                      color: '#7f7f7f'
                   }
              },
              zaxis: {
                   title: data.masterGraph.zAxis,
                   titlefont: {
                       family: 'Courier New, monospace',
                       size: 18,
                       color: '#7f7f7f'
                     }
                   }
              }
    }
 />

where data is a JSON object. Everything seems to be working (chart title, type, and data) except for labeling the axis. Can anyone help with this?

[nicolaskruchten]

The *axis that you're configuring here are for 2d axes... 3d axis configuration need to be nested under a scene key (easy to miss!). Here's the full reference for plotly.js attributes: https://plot.ly/javascript/reference/

[RosarioAleCali]

@nicolaskruchten Thank you! That did it!
For everyone else who wants to look at the code, here's what I have:

layout={
                {
                    width: 800,
                    height: 600,
                    title: graphData.masterGraph.title,
                    scene: {
                        xaxis: {
                            title: graphData.masterGraph.xAxis,
                            titlefont: {
                              family: 'Courier New, monospace',
                              size: 14,
                              color: '#7f7f7f'
                            }
                        },
                        yaxis: {
                            title: graphData.masterGraph.yAxis,
                            titlefont: {
                              family: 'Courier New, monospace',
                              size: 14,
                              color: '#7f7f7f'
                            }
                        },
                        zaxis: {
                            title: graphData.masterGraph.zAxis,
                            titlefont: {
                              family: 'Courier New, monospace',
                              size: 14,
                              color: '#7f7f7f'
                            }
                        }
                    }
                }
            }