Plotly Scatter3D Annotations

by brian428

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<h3>Using plotly-latest. When using Date axis, plot won't render.</h3>
<div id="testChart" style="width:100%; height:100%;"></div>

JavaScript

var plotElement;
var createPlot = function( divId ) {
	plotElement = document.getElementById(divId);
  
  var layout = {
    "autosize": true,
    "margin": {
      "t": 70,
      "b": 75,
      "l": 70,
      "r": 30
    },
    "title": "3D Plot",
    "scene": {
      "xaxis": {
        "title": "Time",
        "titlefont": {
          "size": 16
        },
        "type": "linear",
        "range": [0, 96],
        "nticks": 12,
        "tickfont": {
          "size": 12
        }
      },
      "yaxis": {
        "title": "Y Axis",
        "titlefont": {
          "size": 16
        },
        "type": "linear",
        "range": [100.71, 232.29],
        "tickfont": {
          "size": 12
        }
      },
      "zaxis": {
        "title": "Z Axis",
        "titlefont": {
          "size": 16
        },
        "type": "linear",
        "range": [0, 96],
        "tickfont": {
          "size": 12
        }
      },
      "annotations": [
        {
          text: "New Annotation",
          x: 50, y: 150,
          font: {
            size: 16,
            color: "blue"
          },
          bordercolor: "#666666",
          borderwidth: 1,
          borderpad: 4,
          bgcolor: "#EEEEEE",
          opacity: 0.8,
          showarrow: true
        }
      ]
    },
    "showlegend": true,
    "legend": {
      "bordercolor": "#444444",
      "borderwidth": 1,
      "bgcolor": "#f0f0f0",
      "font": {
        "size": 12
      }
    },
    
  };
  
  var traces = [
  	{
      "type": "scatter3d",
      "mode": "markers",
      "legendgroup": "trace1",
      "marker": {
        "symbol": "circle",
        "size": 7,
        "color": "#154360"
      },
      "x": [8, 26],
      "y": [109, 110],
      "z": [8, 12],
      "name": "trace1"
    }, {
      "type": "scatter3d",
      "mode": "markers",
      "legendgroup": "trace2",
      "marker": {
        "symbol": "circle",
        "size": 7,
        "color": "#CB4335"
      },
      "x": [14, 9, 6, 3, 4, 5, 6,...