title: 3D callout line doesn't work with client-side graphics
body: <p>I am struggling to use callout line with client-side graphics.</p>
  
  <p>I followed <a href="https://developers.arcgis.com/javascript/latest/sample-code/visualization-point-styles/index.html" rel="nofollow noreferrer">the "Point styles for cities" example</a> which uses a feature layer from <a href="http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/LyonPointsOfInterest/FeatureServer" rel="nofollow noreferrer">the "LyonPointsOfInterest (FeatureServer)"</a>.</p>
  
  <p>But it doesn't work with a feature layer which creates client-side graphics based on data returned from a web service.</p>
  
  <p>Is there a limitation on 3d callout line?</p>
  
  <p>Here's my code snippet:</p>
  
  <ol>
  <li><p>Create a feature layer based on layer definition:</p>
  
  <pre><code>featureLayer = new FeatureLayer({
    fields: this.layerDefinition.fields,
    objectIdField: this.layerDefinition.objectIdField,
    geometryType: this.layerDefinition.geometryType,
    id: this.layerId
  });
  </code></pre></li>
  <li><p>Set elevation and feature reduction and renderer:</p>
  
  <pre><code>featureLayer.elevationInfo = {
    // elevation mode that will place points on top of the buildings or other SceneLayer 3D objects
    mode: "relative-to-scene"
  };
  // feature reduction is set to selection because our scene contains too many points and they overlap
  featureLayer.featureReduction = {
    type: "selection"
  };
  
  featureLayer.renderer = this._getUniqueValueRenderer() as any as Renderer// callout render
  </code></pre></li>
  <li><p>Here the renderer code:</p>
  
  <pre><code>_getUniqueValueRenderer() {
    let verticalOffset = { // verticalOffset shifts the symbol vertically
      screenLength: 150, // callout line length
      maxWorldLength: 200,
      minWorldLength: 35
    },
    uniqueValueRenderer = {
      type: "unique-value", // autocasts as new UniqueValueRenderer()
      field: "AQHI",
      uniqueValueInfos: [{
        value: 1,
        symbol: this._get3DCallOutSymbol(verticalOffset, "Museum.png", "#D13470")
      }, {
        value: 2,
        symbol: this._get3DCallOutSymbol(verticalOffset, "Restaurant.png", "#F97C5A")
      }, {
        value: 3,
        symbol: this._get3DCallOutSymbol(verticalOffset, "Church.png", "#884614")
      }, {
        value: 4,
        symbol: this._get3DCallOutSymbol(verticalOffset, "Hotel.png", "#56B2D6")
      }, {
        value: 5,
        symbol: this._get3DCallOutSymbol(verticalOffset, "Park.png", "#40C2B4")
      }, {
        value: 6,
        symbol: this._get3DCallOutSymbol(verticalOffset, "Museum.png", "#D13470")
      }, {
        value: 7,
        symbol: this._get3DCallOutSymbol(verticalOffset, "beer.png", "#F97C5A")
      }, {
        value: 8,
        symbol: this._get3DCallOutSymbol(verticalOffset, "senate.png", "#884614")
      }, {
        value: 9,
        symbol: this._get3DCallOutSymbol(verticalOffset, "Hotel.png", "#56B2D6")
      }, {
        value: 10,
        symbol: this._get3DCallOutSymbol(verticalOffset, "Park.png", "#40C2B4")
      }
    ]};
    return uniqueValueRenderer;
  }
  
  _get3DCallOutSymbol(verticalOffset: any, iconName: string, color: string) {
    return {
      type: "point-3d", // autocasts as new PointSymbol3D()
      symbolLayers: [{
        type: "icon", // autocasts as new IconSymbol3DLayer()
        resource: {
          href: this.iconPath + iconName
        },
        size: 20,
        outline: {
          color: "white",
          size: 2
        }
      }],
      verticalOffset: verticalOffset,
      callout: {
        type: "line", // autocasts as new LineCallout3D()
        color: "white",
        size: 2,
        border: {
          color: color
        }
      }
    };
  }
  </code></pre></li>
  <li><p>Set source to an array of graphics, generated based web service data</p>
  
  <pre><code>featureLayer.source = graphics;
  </code></pre></li>
  </ol>