javascriptplotlydiagramribbonplotly.js

How do I add data labels to surface and ribbon plots in plotly.js


I am trying to plot measurement data by using plotly.js. As data should resemble a 3 dimensional item, I was looking for a 3D plot and found the ribbon plot to be quite suitable. Untortunately, unlike in the 2D plots in plotly, a lot of functions like annotations seem to be not working. Is there any way to label e.g. maximum and minimum values in each ribbon or for each x value or so?

        function showResults(){

        let data = [[0,-1,-2,2],[0,-6,-4,2],[0,3,1,1],[0,-1],[0,5,7,4],[0,-3,-1,-2],[0,5,3],[0,4,1,2],[0,-5,5,1],[0,-1,1],[0,1,3,-3],[0,1,-1]];

        let traces = [];

        for (let i = 0; i < data.length; i++) {

            let trace = {
                x: [[0, 0], [1, 1], [2, 2], [3, 3]],
                y: [[i, i+0.5], [i, i+0.5], [i, i+0.5], [i+0.5]],
                z: [[data[i][0], data[i][0]], [data[i][1], data[i][1]], [data[i][2], data[i][2]], [data[i][3], data[i][3]]],
                type: 'surface',
                 mode: 'lines+markers+text',
                 name: 'group' +i,
                 nameposition: 'bottom',
                 text: 'group'+i,
                 textposition: 'bottom',
                showscale: false,
                showticklabels: true
            };
            traces.push(trace);
        }
        var layout = {
            title: 'wasduwillst',
            autosize: false,
            margin: {
                l: 10,
                r: 40,
                b: 40,
                t: 40,
            },
            annotations:
            {
              x: 2,
              y: 5,
              xref: 'x',
              yref: 'y',
              text: 'Annotation Text',
              showarrow: true,
              arrowhead: 7,
              ax: 0,
              ay: -40
            },
                    scene: {
                aspectmode: 'manual',
                aspectratio: {
                    x: 1, y: 2.5, z: 0.5, //adjusts the aspect ratio so that the width of the wing is displayed wider than the depth
            },
                xaxis: {title: 'Leading to Trailing'},
                yaxis: {title: 'Column'},
                zaxis: {title: 'Offset'}
            }
        };

         Plotly.newPlot('gd', {
                 'data': traces,
                'layout': layout
             }
        );
    }

I tried the annotation function and was expecting to have some kind of data labels and lines shown pointing to the specified coordinates, but nothing is showing.

Also I was hoping to maybe have the name or text option available permanently and not only on mouse over, but I didn't seem to find a solution for that either.


Solution

  • The issue is that annotations expects an array of objects, so you just need to enclose the definition into square brackets :

    // ...
    annotations: [{
      x: 2,
      y: 5,
      xref: 'x',
      yref: 'y',
      text: 'Annotation Text',
      showarrow: true,
      arrowhead: 7,
      ax: 0,
      ay: -40
    }], 
    // ...